The easy way to remove a query cache after unmounting

[stsiushkevich]

Is there any flag to remove a query cache after unmouting?

Today I can use remove() or cache.removeQuery() methods after unmouting my component. But I want to to it easily. For example:

const {
   ....
} = useQuery(queryKey, queryFn?, {
   ...
   removeAfterUnmount: true
   ...
})

Is my idea rational?

[TkDodo]

If you set cacheTime to 0, the entry will be removed from the cache if the last observer unmounts. If you only have one observer, that will be equal to what you are looking for I believe.

[bmmpt]

@TkDodo I tried cacheTime: 0 and the component enters in a loop... (with or without the retry flags). In dev tools the network tab shows an unending stream of requests for http://localhost:8080/endpoint?param=null.

const MyComponent= (): ReactElement => {
  const { data, isLoading } = useQuery(
    'someKey',
    async () => {
      const options = {
        url: 'http://localhost:8080/endpoint?param=null',
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      };

      const response = await fetch(options.url, options);
      if (response.ok) {
        return response.json();
      }
      return null;
    },
    {
      cacheTime: 0,
      retry: false,
      refetchOnMount: false,
      retryOnMount: false
    }
  );

  return (
    <>
      {
        !isLoading &&
        <PageContainer>
          {
            data? <div>aaaaaaaa</div> : <div>bbbbb</div>
          }
        </PageContainer>
      }
    </>
  );
};

[TkDodo]

Are you using suspense? Because there’s an open issue: #2367

[bmmpt]

@TkDodo Thanks for pointing that out. I am using suspense. I'll keep an eye on the outcome of #2367.

[dberardo-com]

what is the way to do this in version 5 of usequery ? --> i figured out the cacheTime param has be renamed to gcTime.

would it be possible to keep the query in the cache when the component is unmounted, but prevent it from polling again ? i use polling quite often and would like to disable them when the component unmounts.

i guess this is happening already when the numbere of observers gets to 0 ?

[ProbirSarkar001]

  const queryClient = useQueryClient();
  useEffect(() => {
    return () => {
      // Clear all cached data
      queryClient.clear();
    };
  }, [queryClient]);