reactjstypescriptgraphqlreact-apolloreact-apollo-hooks

Types for return values from Apollo client

This is a standard query made with react-apollo:

const { loading, data, error } = useQuery<RocketInventoryData, RocketInventoryVars>(
  GET_ROCKET_INVENTORY,
  { variables: { year: 2019 } }
);

If I want pass loading, data or error to sub-components, is there any way to access the types for those from react-apollo?

Solution

  • You're already providing the type for data and loading is just a boolean. You can look at the type definition for the hook in your editor to determine what other types you might need.

    export declare function useQuery<TData = any, TVariables = OperationVariables>(query: DocumentNode, options?: QueryHookOptions<TData, TVariables>): QueryResult<TData, TVariables>;

export interface QueryResult<TData = any, TVariables = OperationVariables>
  extends ObservableQueryFields<TData, TVariables> {
  client: ApolloClient<any>;
  data: TData | undefined;
  error?: ApolloError;
  loading: boolean;
  networkStatus: NetworkStatus;
}