other-emerald

Unsure why this is constantly refetching

Okay, I think I fundamentally misunderstand how the cache works in React query. I have a table, one of my columns in the table renders a component which fetches some data. I am trying to get it to stop refetching whenver the table changes

const QueryCell = ({ result, id }: QueryCellProps) => {
  const queryClient = useQueryClient();
  const { data, isLoading } = useQuery({
    queryKey: ["F"],
    queryFn: async () => {
      const res = await result;
      return res;
    },
    initialData: () => {
      return queryClient.getQueryData<number>(["F"]);
    },
    staleTime: Infinity,
  });

  if (isLoading)
    return (
      <div className="inline-flex h-10 w-24 animate-pulse rounded-md bg-gray-200 p-2" />
    );

  return <p>{data}</p>;
};

const QueryCell = ({ result, id }: QueryCellProps) => {
  const queryClient = useQueryClient();
  const { data, isLoading } = useQuery({
    queryKey: ["F"],
    queryFn: async () => {
      const res = await result;
      return res;
    },
    initialData: () => {
      return queryClient.getQueryData<number>(["F"]);
    },
    staleTime: Infinity,
  });

  if (isLoading)
    return (
      <div className="inline-flex h-10 w-24 animate-pulse rounded-md bg-gray-200 p-2" />
    );

  return <p>{data}</p>;
};

I have hardcoded the querykey, made staleTime infinity and setting the initial data just to try make this damn thing stop refetching, nothing seems to work. The issue is that im using the globalFilter on my table to filter it, and with every keystroke this refetches, even if its the same row being shown on the table. My expectation is this is fetched once, then any subsequent queries for the same key is grabbed from the cache. Why is this not working as expected? I will try get a codesandbox up soon

6 Replies

other-emeraldOP•12mo ago

Using react query devtools, the ["F"] query is always "Fresh" despite this it constantly refetches

extended-salmon•12mo ago

maybe: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

React Query FAQs

Answering the most frequently asked React Query questions

other-emeraldOP•12mo ago

Hey @TkDodo 🔮 , thanks for the response! I am quite certain I am handling the queryclient correctly. As it is so easy to replicate this, I assume this is more me misunderstanding how the cache works rather than something actually not working as expected. I've put up a small sandbox to show what Im seeing here: https://codesandbox.io/p/sandbox/autumn-platform-7x3dmh?workspaceId=9d458740-0c73-4a14-b901-35f3e2ed916c In the table, one of the cells fetches data, with a static query key. My expectation is when this re renders (type in the search and bring the result back) it doesn't refetch, as the query key hasn't changed, I have an infinite stale time and Im not refetching on mount. However, every time this cell renders, it seems to fetch again (check the console to see the fetches). Again im thinking my expectation is wrong here, and feel free to let me know if that is not what is meant to happen!

extended-salmon•12mo ago

eh, you can't pass promises around like that; the moment you call getLicenseNumber, it will start to fetch. So this:

result={getLicenseNumber(row.original.id)}

result={getLicenseNumber(row.original.id)}

triggers the fetch during render. not good. also if you use something in side the queryFn, it needs to go to the key. here is the "fixed" version: https://codesandbox.io/p/sandbox/dreamy-archimedes-6ytgwz?file=%2Fsrc%2FApp.tsx%3A57%2C23&workspaceId=f8b1f196-24ca-4cb8-91fa-60c35640afe6

other-emeraldOP•12mo ago

Agh, feeling very dumb right now. Seeing it pointed out like that obviously that is exactly what will happen. React Query can't do anything to stop the fetch, because its not the one actually initiating it. Is that framing correct? @TkDodo 🔮 Appreciate your help with this so much. I can't believe how active you are everywhere, including the discord answering silly questions like mine. Thankyou again!

extended-salmon•12mo ago

Yes that's exactly it 👍 You're welcome. When someone makes a reproduction, I look at it 🙂 Answering those questions in the abstract is what's difficult and time consuming and sometimes annoying 😅

Gaming

Programming

Unsure why this is constantly refetching

Did you find this page helpful?