Question 270112 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I invalidate cache only on specific RTK query calls?

I have an infinite scroll RTK query app that makes endpoint queries and merges the data on each call so the results get concatenated on scroll down. However, on specific calls to this same endpoint, I’d like to invalidate the cache and start over. Here is my query:

getArticles: builder.query({
  query: (args) => {
      let { page, filter } = args;
      let filtersString = filter.join(',');
      return {
          url: '/apiPath?offset=${page*5}&limit=1000&categories=${filtersString}''
      }
  },

  serializeQueryArgs: ({ endpointName }) => {
      return endpointName;
  },

  merge: (currentCache, newItems) => {
      currentCache.push(...newItems)
  },

 forceRefetch({ currentArg, previousArg }) {
      return currentArg !== previousArg;
  }

})

Ideally, I’d like to use the same query because I want the data to refetch whenever page limit or categories change — but occasionally, I’d like to force a total refresh. Is this possible?

Tags:

2

Answers


  1. 0

    i am facing the same issue. now i solve this by removing all the cache.

    dispatch(api.util.resetApiState())

    i know its now a good approach we have to remove the cache only for this end point. i also try providedtag but no luck. if any one solve this please comment here. invalidateTags works fine its recall the api but due to cache its merge the data because we are using merge

    Login or Signup to reply.
  2. 0 
              merge: (currentData, newData, { arg }) => {

            if (arg?.refech && arg.page == 1)
                return newData;
            else
                return {
                    ...newData,
                    data: [...currentData?.data, ...newData?.data]
                }
        },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search