quickest-silver

useInfiniteQuery returns unmodified data after manual refetch triggered

Hello, I am trying to use useInfiniteQuery to implement pagination. I am using next v13 and @tanstack/react-query v4.27.0. The issue I am facing is that the useInfiniteQuery does not modify its returns on manual refetch. I have checked that the refetch method from useInfiniteQuery properly requests with the current pageParam. Also verified that the response of the request included modified data. However, even when the request's response was modified and the request was made by the manual refetch, the useInfiniteQuery still returns data identical to the previous data. I can't figure out why this is happening... Is there any clue to resolve this issue or an ongoing discussion? Please feel free to correct my practice if I am doing something wrong.

7 Replies

quickest-silverOP•3y ago

@Dimitri Mitropoulos

optimistic-gold•3y ago

hi! I'm sorry I can't be much help: I don't work on connect-query anymore (and a decent amount about it has changed since I did)

quickest-silverOP•3y ago

ohh it's fine. Thank you for letting me know

fascinating-indigo•3y ago

What does the network tab show? If the fetch "happens", react query did its job. It doesn't do the actual network request, so the problem is somewhere else (usually on the backend or with browser cache headers)

quickest-silverOP•3y ago

@TkDodo 🔮 Thank you for replying to my issue. My network tab implies that the server has no problem (since it responds with the latest modified data) I double checked to make sure the network request was triggered be the useInfiniteQuery instance and it was. The problem I am facing is that even when the request was triggered by useInfiniteQuery and the reponse was modified (different from the cache), useInfiniteQuery still returns the previous cached value (not sure if it is the cache data though)

const {
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isFetchingNextPage,
    isFetchingPreviousPage,
    refetch,
    ...result
  } = useInfiniteQuery(
    queryKey,
    ({ pageParam = null }: QueryFunctionContext) => {
      return queryFn({ after: pageParam, perPage: perPage });
    },
    {
      getNextPageParam: (lastPage, allPages) => {
        if (lastPage?.data?.meta?.after) {
          return lastPage?.data?.meta?.after;
        }

        return undefined;
      },
      getPreviousPageParam: (firstPage, allPages) => {
        return firstPage?.data?.meta?.after;
      },
      refetchOnMount: "always",
      keepPreviousData: true,
      staleTime: 0,
    }
  );

const {
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
    isFetchingNextPage,
    isFetchingPreviousPage,
    refetch,
    ...result
  } = useInfiniteQuery(
    queryKey,
    ({ pageParam = null }: QueryFunctionContext) => {
      return queryFn({ after: pageParam, perPage: perPage });
    },
    {
      getNextPageParam: (lastPage, allPages) => {
        if (lastPage?.data?.meta?.after) {
          return lastPage?.data?.meta?.after;
        }

        return undefined;
      },
      getPreviousPageParam: (firstPage, allPages) => {
        return firstPage?.data?.meta?.after;
      },
      refetchOnMount: "always",
      keepPreviousData: true,
      staleTime: 0,
    }
  );

I tried to fix it by giving the staleTime option as 0, but it didn't fix the problem, so it's not the problem of cache. In addition, it finally returns the modified data when refetchOnWindowFocus function executes... It's only the manual refetch method that is not working for me. @TkDodo 🔮 Please let me know if you need more information to investigate or define my issue 🙂

fascinating-indigo•3y ago

you know what's needed 😉 a runnable minimal reproduction

quickest-silverOP•3y ago

@TkDodo 🔮 Oh sorry for not providing any context. I wasn't used to issue reporting. I'll have the reproduction ready, then make comments again

Gaming

Programming

useInfiniteQuery returns unmodified data after manual refetch triggered

Did you find this page helpful?