useInfinieQuery with initialData, Refetch only after second change of inputs

Hi everyone, I have the problem as stated in the title. My code looks like the following:

  const queryInput = {
    locale,
    pageId: id,
    selectedFilterGuids: activeOptionsValues,
  };

  const { data, fetchNextPage, isFetchingNextPage } =
    trpc.epiApiRouter.artistLandingPage.useInfiniteQuery(queryInput, {
      ...reactQueryNoRefetch,
      getNextPageParam: (lastPage) => lastPage.lastPage + 1,
      initialData: () => ({ pageParams: [undefined], pages: [{ ...initialData }] }),
      keepPreviousData: true,
      initialCursor: 1
    });

  const queryInput = {
    locale,
    pageId: id,
    selectedFilterGuids: activeOptionsValues,
  };

  const { data, fetchNextPage, isFetchingNextPage } =
    trpc.epiApiRouter.artistLandingPage.useInfiniteQuery(queryInput, {
      ...reactQueryNoRefetch,
      getNextPageParam: (lastPage) => lastPage.lastPage + 1,
      initialData: () => ({ pageParams: [undefined], pages: [{ ...initialData }] }),
      keepPreviousData: true,
      initialCursor: 1
    });

activeOptionsValues is a string[] which is getting changed if I enable a filter. Somehow, only after the second change in the queryInput the query refetches. You can see this in the screenshot I've provided. If you have any idea what the problem could be I would be really thankful. Thank you all 🙂

1 Reply

Felix•2y ago

hey, have you figured this out? i am running into the same problem but with the useQuery fn

useInfinieQuery with initialData, Refetch only after second change of inputs

Did you find this page helpful?