我有一个组件,我正在尝试使用apollo从graphql服务(https://rickandmortyapi.com)中获取数据,这还可以,但是我无法使用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?:“ Character”的参数| 未定义}&Pick> []'不是 可分配给“ SetStateAction”类型的参数。类型 '也许<{__typename ?:“字符” |未定义}&Pick> []'不能分配给'Character []'类型。 键入'Maybe <{__typename ?:“字符” |未定义}&Pick>'无法分配给类型 '字符'。不能将“空”类型分配给“字符”类型。
我的所有类型的大型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>;
我不完全了解类型的问题以及如何解决它?
答案 0 :(得分:0)
在类型定义中,您已将Characters响应定义为:
export type Characters = {
__typename?: 'Characters';
info?: Maybe<Info>;
results?: Maybe<Array<Maybe<Character>>>;
};
这意味着,即使您使用!
命令,迫使TS相信data.characters!.results!
是一个数组且未定义,数组 elements 仍可能是未定义的(Array<Maybe<Character>>
)。
您可以通过以下一种方法解决此问题:
确保您的API始终返回有效字符,并将返回类型更改为Array<Character>
将您的useState
定义更改为useState<Maybe<Character>[]>([]);
,并处理渲染中的null
个字符(这对我来说很奇怪,但是很好)
直接在null
中过滤onCompleted
个字符
但是,我认为您在查询中弄错了。从data
解构中获得的useCharactersListQuery
变量已经包含API响应,您不需要使用其他本地React状态来存储它。