@rtk-query How to clear query cache data on changed query parameters

[ollybondareva]

I have infinite scroll and use merge cache data for this purposes. But I also have filter and sorting and if one of them is changed I want to clear cache and start fetching from the begging new data according to the new params.

 query: ({ baseId, someFilterIds, sortBy, page }) => {
      ...some code
      },
      serializeQueryArgs: ({ endpointName }) => {
        return endpointName
      },
      merge: (currentCache, newItems) => {
        currentCache.items.push(...newItems.items)
      },
      transformResponse: (response) => {
        return response || []
      },
      forceRefetch({ currentArg, previousArg }) {
        return currentArg !== previousArg
      },

so when someFilterIds or sortBy changes I need to clear cache. Now it's simply add more data to the cache when these params are changed. What is the best way to do that?

[phryneas]

That additional data will automatically be removed 30 seconds after you stop using it.

[fkozlicki]

You can combine useQuery with useLazyQuery, when useQuery params changes it will clear the cache.

	const { data, isLoading } = useQuery(params);
	const [fetchMore] = useLazyQuery();
	
        useEffect(() => {
          if (inView && !isLoading) {
	        fetchMore(params);
          }
	}, [inView]);