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

TanStack•2y ago•

7 replies

colossal-harlequin

Unsure why this is constantly refetching

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>;
};

Unsure why this is constantly refetching

Similar Threads

Unsure why this is constantly refetching

Similar Threads

Similar Threads

Similar Threads