我有一个组件，正在尝试从graphql服务获取数据(https://rickandmortyapi.com)使用apollo，它还可以，但我不能使用react钩子设置数据：
const [characters, setCharacters] = useState<Character[]>([]);
const {data, error, loading, refetch} = useCharactersListQuery({
variables: {name: String(search)},
onCompleted: (data)=>{
//here I can see data very well
console.log(data.characters!)
//this line gives me an ERROR
setCharacters(data.characters!.results!)
}
});
当我尝试使用setCharacters方法设置数据时发生错误
TS2345:类型为'Maybe<｛__typename？："字符"|未定义；｝&Pick>[]’不是可分配给"SetStateAction"类型的参数。类型"也许<｛__typename？："字符"|未定义；｝&Pick>[]"不可分配给类型"Character[]"。键入"也许<｛__typename？："字符"|未定义；｝&Pick>'不可分配给类型"字符"。类型"null"不可分配给类型"Character"。
我的所有类型的大型graphql.tsx文件
import gql from 'graphql-tag';
import * as React from 'react';
import * as ApolloReactCommon from '@apollo/react-common';
import * as ApolloReactComponents from '@apollo/react-components';
import * as ApolloReactHoc from '@apollo/react-hoc';
import * as ApolloReactHooks from '@apollo/react-hooks';
export type Maybe<T> = T | null;
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: string;
String: string;
Boolean: boolean;
Int: number;
Float: number;
/** The `Upload` scalar type represents a file upload. */
Upload: any;
};
export type Query = {
__typename?: 'Query';
/** Get a specific character by ID */
character?: Maybe<Character>;
/** Get the list of all characters */
characters?: Maybe<Characters>;
/** Get a specific locations by ID */
location?: Maybe<Location>;
/** Get the list of all locations */
locations?: Maybe<Locations>;
/** Get a specific episode by ID */
episode?: Maybe<Episode>;
/** Get the list of all episodes */
episodes?: Maybe<Episodes>;
};
export type QueryCharacterArgs = {
id?: Maybe<Scalars['ID']>;
};
export type QueryCharactersArgs = {
page?: Maybe<Scalars['Int']>;
filter?: Maybe<FilterCharacter>;
};
export type QueryLocationArgs = {
id?: Maybe<Scalars['ID']>;
};
export type QueryLocationsArgs = {
page?: Maybe<Scalars['Int']>;
filter?: Maybe<FilterLocation>;
};
export type QueryEpisodeArgs = {
id?: Maybe<Scalars['ID']>;
};
export type QueryEpisodesArgs = {
page?: Maybe<Scalars['Int']>;
filter?: Maybe<FilterEpisode>;
};
export type Character = {
__typename?: 'Character';
/** The id of the character. */
id?: Maybe<Scalars['ID']>;
/** The name of the character. */
name?: Maybe<Scalars['String']>;
/** The status of the character ('Alive', 'Dead' or 'unknown'). */
status?: Maybe<Scalars['String']>;
/** The species of the character. */
species?: Maybe<Scalars['String']>;
/** The type or subspecies of the character. */
type?: Maybe<Scalars['String']>;
/** The gender of the character ('Female', 'Male', 'Genderless' or 'unknown'). */
gender?: Maybe<Scalars['String']>;
/** The character's origin location */
origin?: Maybe<Location>;
/** The character's last known location */
location?: Maybe<Location>;
/**
* Link to the character's image.
* All images are 300x300px and most are medium shots or portraits since they are intended to be used as avatars.
*/
image?: Maybe<Scalars['String']>;
/** Episodes in which this character appeared. */
episode?: Maybe<Array<Maybe<Episode>>>;
/** Time at which the character was created in the database. */
created?: Maybe<Scalars['String']>;
};
export type Location = {
__typename?: 'Location';
/** The id of the location. */
id?: Maybe<Scalars['ID']>;
/** The name of the location. */
name?: Maybe<Scalars['String']>;
/** The type of the location. */
type?: Maybe<Scalars['String']>;
/** The dimension in which the location is located. */
dimension?: Maybe<Scalars['String']>;
/** List of characters who have been last seen in the location. */
residents?: Maybe<Array<Maybe<Character>>>;
/** Time at which the location was created in the database. */
created?: Maybe<Scalars['String']>;
};
export type Episode = {
__typename?: 'Episode';
/** The id of the episode. */
id?: Maybe<Scalars['ID']>;
/** The name of the episode. */
name?: Maybe<Scalars['String']>;
/** The air date of the episode. */
air_date?: Maybe<Scalars['String']>;
/** The code of the episode. */
episode?: Maybe<Scalars['String']>;
/** List of characters who have been seen in the episode. */
characters?: Maybe<Array<Maybe<Character>>>;
/** Time at which the episode was created in the database. */
created?: Maybe<Scalars['String']>;
};
export type FilterCharacter = {
name?: Maybe<Scalars['String']>;
status?: Maybe<Scalars['String']>;
species?: Maybe<Scalars['String']>;
type?: Maybe<Scalars['String']>;
gender?: Maybe<Scalars['String']>;
};
export type Characters = {
__typename?: 'Characters';
info?: Maybe<Info>;
results?: Maybe<Array<Maybe<Character>>>;
};
export type Info = {
__typename?: 'Info';
/** The length of the response. */
count?: Maybe<Scalars['Int']>;
/** The amount of pages. */
pages?: Maybe<Scalars['Int']>;
/** Number of the next page (if it exists) */
next?: Maybe<Scalars['Int']>;
/** Number of the previous page (if it exists) */
prev?: Maybe<Scalars['Int']>;
};
export type FilterLocation = {
name?: Maybe<Scalars['String']>;
type?: Maybe<Scalars['String']>;
dimension?: Maybe<Scalars['String']>;
};
export type Locations = {
__typename?: 'Locations';
info?: Maybe<Info>;
results?: Maybe<Array<Maybe<Location>>>;
};
export type FilterEpisode = {
name?: Maybe<Scalars['String']>;
episode?: Maybe<Scalars['String']>;
};
export type Episodes = {
__typename?: 'Episodes';
info?: Maybe<Info>;
results?: Maybe<Array<Maybe<Episode>>>;
};
export enum CacheControlScope {
Public = 'PUBLIC',
Private = 'PRIVATE'
}
export type CharactersListQueryVariables = {
name?: Maybe<Scalars['String']>;
};
export type CharactersListQuery = (
{ __typename?: 'Query' }
& { characters?: Maybe<(
{ __typename?: 'Characters' }
& { info?: Maybe<(
{ __typename?: 'Info' }
& Pick<Info, 'count'>
)>, results?: Maybe<Array<Maybe<(
{ __typename?: 'Character' }
& Pick<Character, 'id' | 'name' | 'image'>
)>>> }
)> }
);
export const CharactersListDocument = gql`
query charactersList($name: String) {
characters(page: 1, filter: {name: $name}) {
info {
count
}
results {
id
name
image
}
}
}
`;
export type CharactersListComponentProps = Omit<ApolloReactComponents.QueryComponentOptions<CharactersListQuery, CharactersListQueryVariables>, 'query'>;
export const CharactersListComponent = (props: CharactersListComponentProps) => (
<ApolloReactComponents.Query<CharactersListQuery, CharactersListQueryVariables> query={CharactersListDocument} {...props} />
);
export type CharactersListProps<TChildProps = {}, TDataName extends string = 'data'> = {
[key in TDataName]: ApolloReactHoc.DataValue<CharactersListQuery, CharactersListQueryVariables>
} & TChildProps;
export function withCharactersList<TProps, TChildProps = {}, TDataName extends string = 'data'>(operationOptions?: ApolloReactHoc.OperationOption<
TProps,
CharactersListQuery,
CharactersListQueryVariables,
CharactersListProps<TChildProps, TDataName>>) {
return ApolloReactHoc.withQuery<TProps, CharactersListQuery, CharactersListQueryVariables, CharactersListProps<TChildProps, TDataName>>(CharactersListDocument, {
alias: 'charactersList',
...operationOptions
});
};
/**
* __useCharactersListQuery__
*
* To run a query within a React component, call `useCharactersListQuery` and pass it any options that fit your needs.
* When your component renders, `useCharactersListQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useCharactersListQuery({
* variables: {
* name: // value for 'name'
* },
* });
*/
export function useCharactersListQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<CharactersListQuery, CharactersListQueryVariables>) {
return ApolloReactHooks.useQuery<CharactersListQuery, CharactersListQueryVariables>(CharactersListDocument, baseOptions);
}
export function useCharactersListLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<CharactersListQuery, CharactersListQueryVariables>) {
return ApolloReactHooks.useLazyQuery<CharactersListQuery, CharactersListQueryVariables>(CharactersListDocument, baseOptions);
}
export type CharactersListQueryHookResult = ReturnType<typeof useCharactersListQuery>;
export type CharactersListLazyQueryHookResult = ReturnType<typeof useCharactersListLazyQuery>;
export type CharactersListQueryResult = ApolloReactCommon.QueryResult<CharactersListQuery, CharactersListQueryVariables>;
我不完全理解类型的问题是什么，以及如何解决它？
在类型定义中，您已将Characters响应定义为：
export type Characters = {
__typename?: 'Characters';
info?: Maybe<Info>;
results?: Maybe<Array<Maybe<Character>>>;
};
这意味着，即使您使用!命令，迫使TS相信data.characters!.results!是一个数组并且未定义，array元素仍可能未定义(Array<Maybe<Character>>(。
您可以通过以下方式之一解决此问题：
确保API始终返回有效字符，并将返回类型更改为
Array<Character>将
useState定义更改为useState<Maybe<Character>[]>([]);，并在渲染中处理null字符(这对我来说很奇怪，但很好(直接在
onCompleted中过滤null字符
但是，我认为您的查询有误。您从useCharactersListQuery销毁中获得的data变量将已经包含API响应，您不需要使用另一个本地React状态来存储它。