CODEWITHSUNDEEP
typescriptgraphqlreact-apollo
FEE
FEE

Reputation: 309

TypeScript type for the fetchMore

GraphQL has fetchMore method to fetch more data when needed.

Function itselt looks like below (src: https://www.apollographql.com/docs/react/pagination/core-api/)

fetchMore({
  variables: {
    offset: 10,
    limit: 10
  },
});

When you pass fetchMore function as a prop to child component, you have to define it's type in child component. I couldn't figure out what it should be. I used any but I would like to correctly typecast it. Any suggestion?

Upvotes: 1

Views: 2331

Answers (2)

Benazir
Benazir

Reputation: 260

You can get the type of fetchMore from apollo and pass the two types of your query into your componet props.

export interface ChildComponentProps<TData = YourGetQuery, TVariables = YourGetQueryVariables>{
  fetchMore<TFetchData = TData, TFetchVars = TVariables>(
    fetchMoreOptions: FetchMoreQueryOptions<TFetchVars, TFetchData> & {
      updateQuery?: (
        previousQueryResult: TData,
        options: {
          fetchMoreResult: TFetchData;
          variables: TFetchVars;
        }
      ) => TData;
    }
  ): Promise<ApolloQueryResult<TFetchData>>;
}

Similarly, you can create for refetch as well.

Upvotes: 0

FEE
FEE

Reputation: 309

@nlta based on your suggestion, this is what I did. Hopefully, it will help someone

export type FetchMoreArgs = {
  offset: number;
  limit: number;
};

fetchMore: ({ variables: FetchMoreArgs }) => void;

Upvotes: 3

Related Questions