React useInfiniteQuery & useQuery caching issue

[Karinza38]

Discussed in #8616

^{Originally posted by ktriviso February 7, 2025}
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,
});

Delete modal

  const mutation = usePalomaMutation(ENDPOINT, "post", null, {
    onSuccess: (res) => {
      cache.invalidateQueries({ queryKey: ["get_orders"] });
    },
  });
```</div>

[gs18004]

Can I see the full code?
with something like code sandbox, etc.