T
TanStack•10mo ago
other-emerald

Invalidate query?

const { isFetching, isError, isSuccess, data } = useQuery({
    queryKey: ['...'],
    queryFn: async () => {
      const startTime = Date.now();

      const response = await fetch('...', {
        cache: 'no-store',
      });

      const timeTaken = Date.now() - startTime;

      if (timeTaken < 500) {
        await new Promise((resolve) => setTimeout(resolve, 500 - timeTaken));
      }

      if (!response.ok) {
        throw new Error('...');
      }

      const receivedObject: {
        ...
      } = await response.json();

      const { data } = receivedObject;

      return data;
    },
  });

useEffect(() => {
  if (isFetching) return;

  if (isError) { ... }
  if (isSuccess) { ... }
}, [isFetching]);

return (<></>);
const { isFetching, isError, isSuccess, data } = useQuery({
    queryKey: ['...'],
    queryFn: async () => {
      const startTime = Date.now();

      const response = await fetch('...', {
        cache: 'no-store',
      });

      const timeTaken = Date.now() - startTime;

      if (timeTaken < 500) {
        await new Promise((resolve) => setTimeout(resolve, 500 - timeTaken));
      }

      if (!response.ok) {
        throw new Error('...');
      }

      const receivedObject: {
        ...
      } = await response.json();

      const { data } = receivedObject;

      return data;
    },
  });

useEffect(() => {
  if (isFetching) return;

  if (isError) { ... }
  if (isSuccess) { ... }
}, [isFetching]);

return (<></>);
If the component mounts and fetch is complete and then the component unmounts and remounts, I realized that isError and isSuccess have the previous values before the last unmount so you have to use isFetching to know if the query completed. I am not sure why but the request is being done but it doesnt execute the code inside the query function. Is this normal and expected behavior?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?