Middleware matcher for RTKQuery cache hits

[brogine]

Hello community! I come here with a scenario and a question:

A basic RTK Query setup (with a tag in the param sent as a string):

const api = createApi({
  reducerPath: 'api',
  keepUnusedDataFor: 3600,
  baseQuery,
  endpoints: builder => ({
    getSomething: builder.query<ReturnType, string>({
      query: param => resolveQueryParams('/endpoint', { param }),
      providesTags: (_, __, param) => [{ type: 'endpoint', param }]
    }),

My middleware listener:

const listener = createListenerMiddleware()
listener.startListening({
  matcher: api.endpoints.getSomething.matchFulfilled,
  effect: async (action, api) => {}
)

A basic component:

const Component = () => {
  const [param, setParam] = useState('A')
  const { data } = useGetSomethingQuery(param)
  ...
}

So my issue is the following:

• In the middleware, I listen to the query being fulfilled.
• The first time I make the request with param "A", it will call the middleware correctly.
• The first time I make the request with param "B", it will call the middleware correctly.
• If I make another request with param "A", the cache will hit and my listener will not be called (Which is correct because there's no request)

Is there any matcher for cache hits that I can use in my middleware for this scenario?

Thanks in advance.

[lamhungypl]

You can use the keepUnusedDataFor with a long number to achieve unwanted requests (cache hit & revalidate are 2 different things).

In case the cache hit is required, let's use the predicate options

const listener = createListenerMiddleware()
listener.startListening({
 predicate: (action, state, prevState)=>{

    return  api.endpoints.getSomething.matchFulfilled(state)

    const params= getParams(action)
    
    const matched =  api.endpoints.getSomething.matchFulfilled(action)
    
    const { data } =  api.endpoints.getSomething.select(params)(prevState)
    
    return matched && !!data
    
  },
  effect: async (action, api) => {}
)

[markerikson]

That won't help, for a couple reasons:

• matchFulfilled accepts an action, not the state
• There isn't an action dispatched when there's a cache hit

[lamhungypl]

I updated the recipe after looking back at my implementation for a similar behavior,
in my case, it doesn't require the params but this match-utility & selector combination can be a potential answer

[riqts]

As mentioned by @markerikson there is not an action dispatched for a cache hit. However, maybe this pattern could help where you dispatch an action related to the arg changing instead, obviously this is dependant on your situation, and you may need some additional predicate or conditional in your middleware.

const mySlice = createSlice({
  initialState: { arg: null },
  reducers: {
    argChanged(state, action) {
      state.arg = action.payload
    }
  },
  selectors: {
    selectMyArg: state => state.arg
  }
})

const arg = useSelector(selectMyArg)

const { data } = useMyQuery(arg)

function onClick() {
  dispatch(argChanged(newArg))
}