CODEWITHSUNDEEP
typescripttanstackreact-query
Yash Sharma
Yash Sharma

Reputation: 21

How to solve overload error in tanstack infinite query?

export const useGetPosts = () => {
  return useInfiniteQuery({
    queryKey: [QUERY_KEYS.GET_INFINITE_POSTS],
    queryFn: getInfinitePosts,
    getNextPageParam: (lastPage) => {
      if (lastPage && lastPage.documents.length === 0) {
        return null;
      }
      const lastId = lastPage?.documents[lastPage?.documents.length - 1].$id;

      return lastId;
    },
  });
};

Getting the error at the time of deployment in this function

No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.
      Type 'string | null | undefined' is not assignable to type 'number | null | undefined'.
        Type 'string' is not assignable to type 'number'.
  Overload 2 of 3, '(options: DefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.
  Overload 3 of 3, '(options: UseInfiniteQueryOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, DocumentList<...> | undefined, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Type '(lastPage: DocumentList<Document> | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList<Document> | undefined>'.ts(2769)
queryClient-5b892aba.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'UndefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>'
queryClient-5b892aba.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'DefinedInitialDataInfiniteOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, QUERY_KEYS[], number>'
queryClient-5b892aba.d.ts(335, 5): The expected type comes from property 'getNextPageParam' which is declared here on type 'UseInfiniteQueryOptions<DocumentList<Document> | undefined, Error, InfiniteData<DocumentList<Document> | undefined, unknown>, DocumentList<...> | undefined, QUERY_KEYS[], number>'
(property) getNextPageParam: GetNextPageParamFunction<number, Models.DocumentList<Models.Document> | undefined>
This function can be set to automatically get the next cursor for infinite queries. The result will also be used to determine the value of hasNextPage.

This is the infinite posts function.

export async function getInfinitePosts({ pageParam }: { pageParam: number }) {
  const queries: any[] = [Query.orderDesc("$updatedAt"), Query.limit(10)];

  if (pageParam) {
    queries.push(Query.cursorAfter(pageParam.toString()));
  }

  try {
    const posts = await databases.listDocuments(
      appwriteConfig.databaseId,
      appwriteConfig.postCollectionId,
      queries
    );

    if (!posts) throw Error;

    return posts;
  } catch (error) {
    console.log(error);
  }
}

I am using the useGetPosts function in a component as

const { data: posts, fetchNextPage, hasNextPage } = useGetPosts();

I am providing the github link for the project incase anyone want to view the codebase : https://github.com/CodeWithYashp/snapgram

I have read the docs but still can't find why am i getting this error

Upvotes: 1

Views: 500

Answers (1)

curiosoofficial
curiosoofficial

Reputation: 11

Js mastery did his video in tanstack query v4. In v5 there is a initialpage param required. Try this, worked for me:

export const useGetPosts = () => {
return useInfiniteQuery({
  queryKey: [QUERY_KEYS.GET_INFINITE_POSTS],
  queryFn: getInfinitePosts as any,
  getNextPageParam: (lastPage: any) => {
    if (!lastPage || lastPage.documents.length === 0) {
      return null;
    }

    const lastId = lastPage.documents[lastPage.documents.length - 1].$id;
    return lastId;
  },
  initialPageParam: null, // Set initialPageParam to null
});

};

Upvotes: 1

Related Questions