useInfinieQuery with initialData, Refetch only after second change of inputs

Question

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
    });

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 🙂

useInfinieQuery with initialData, Refetch only after second change of inputs

Looking for more? Join the community!