useInfinieQuery with initialData, Refetch only after second change of inputs

WWestsaid4/20/2023
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 🙂