T
TanStack•10mo ago
foreign-sapphire

React useInfiniteQuery & useQuery caching issue

Hi, my React app is using both useQuery and useInfiniteQuery. When using react-query-devtools, I can see the cache is being set and cleared with no issues for queries that used useQuery to fetch the data. But any data fetched using useInfiniteQuery is not setting the cache and I am not able to use invalidateQueries to clear it either. We were previously using a SUPER old version of React query (not Tanstack) and this pattern was working. I have tried various different solutions with no luck. Below is the exact scenario I am trying to solve for and my current implementation. Scenario: Query list of orders. In a modal, delete an order and invalidate the query so that it refreshes and the list of orders does not contain the deleted order. Important to note, the modal does not have access to the useInfiniteQuery refetch method. Current code: List page - using this solution, I can see the cache is set in react-query-devtools but it's inactive 
const {
  data,
  hasNextPage,
  fetchNextPage,
  isFetching,
  status,
  refetch,
} = useInfiniteQuery({
  queryKey: ["get_orders"],
  queryFn: ({ pageParam = 1 }) =>
  callBackend(ENDPOINT, { method: "GET" }),
  staleTime: 0,
  getNextPageParam: (d, _) => {
    const { current_page, total_pages } = d;
    d.nextCursor;
    // POSSIBLE FIX FOR CACHE NOT BEING SET
    cache.setQueryData(["get_orders"], d);
    return current_page < total_pages ? current_page + 1 : undefined;
  },
  getPreviousPageParam: (d, _) => d.prevCursor,
});
const {
  data,
  hasNextPage,
  fetchNextPage,
  isFetching,
  status,
  refetch,
} = useInfiniteQuery({
  queryKey: ["get_orders"],
  queryFn: ({ pageParam = 1 }) =>
  callBackend(ENDPOINT, { method: "GET" }),
  staleTime: 0,
  getNextPageParam: (d, _) => {
    const { current_page, total_pages } = d;
    d.nextCursor;
    // POSSIBLE FIX FOR CACHE NOT BEING SET
    cache.setQueryData(["get_orders"], d);
    return current_page < total_pages ? current_page + 1 : undefined;
  },
  getPreviousPageParam: (d, _) => d.prevCursor,
});
Delete modal - 
  const mutation = usePalomaMutation(ENDPOINT, "post", null, {
    onSuccess: (res) => {
      cache.invalidateQueries({ queryKey: ["get_orders"] });
    },
  });
  const mutation = usePalomaMutation(ENDPOINT, "post", null, {
    onSuccess: (res) => {
      cache.invalidateQueries({ queryKey: ["get_orders"] });
    },
  });
2 Replies
adverse-sapphire
adverse-sapphire•10mo ago
What version of RQ are you using? What version of React? Can you reproduce this problem in something like CodeSandBox or StackBlitz? Look at the example in the docs: https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries. I tried to adjust your code to what I'm seeing there. Your queryFn exposed the pageParam but the fetcher fn didn't use it. (So, wouldn't the first page only be fetched?) 
const methods = useInfiniteQuery({
  queryKey: ["get_orders"],
  queryFn: ({ pageParam }) => callBackend(ENDPOINT, { method: "GET", pageParam }),
  initialPageParam: 1,
  getNextPageParam: (d) => d.nextCursor,
  getPreviousPageParam: (d) => d.prevCursor,
});
const methods = useInfiniteQuery({
  queryKey: ["get_orders"],
  queryFn: ({ pageParam }) => callBackend(ENDPOINT, { method: "GET", pageParam }),
  initialPageParam: 1,
  getNextPageParam: (d) => d.nextCursor,
  getPreviousPageParam: (d) => d.prevCursor,
});
Another option would be to swap to useQuery and manually paginate. If your cache still doesn't work, then something might be misconfigured deeper in your setup.
foreign-sapphire
foreign-sapphireOP•10mo ago
@brett I was finally able to figure it out. I was able to have the inifinite query caching working just fine inside a sandbox environment and realized the issue was with server side rendering which caused the app to re-create the initial QueryClient instance over and over. Thank you so much for responding to this thread tho!!!! But I will look into the unused instance of pageParam you mention above.

Did you find this page helpful?