4

I have a react-toolkit query that after a first successful request cached the response as expected, then in subsequent requests it's using the cached response. I'm ok with that.

In the store I have a slice that is watching the above mentioned query for matching fulfilled to get the response and transform it to then save some processed in the slice's state.

The problem is this: The first time the request is made I can get the response through a matcher, but then in subsequent calls the matcher do not match fulfilled cause the request is cached and no executed but I need to get the data in the slice, how can I?

This is a sample code:

const itemsSlice = createSlice({
   name: 'items',
   initialState,
   reducers: {},
   extraReducers: builder => {
      builder.addMatcher(api.endpoints.getTokens.matchFulfilled, (state, {payload}) => {
         // process the payload and update slice's state
      })
   }
})
Osmanys Fuentes-Lombá
  • 823
  • 2
  • 12
  • Is there a particular reason you need the data in that slice - and especially after it was already fetched once? Generally you should really be avoiding copying api data out of the RTK Query slice because that way you lose features of RTK Query like automatic cache collection of unused data. RTK Query usually handles that data for you and you should be using the query hooks to access it in your component. – phry Jun 05 '22 at 21:54
  • @phry I need to use the data for the slice but not just to make a copy but to transform it in something different that the api does not provide, so there is no endpoint for that. The data saved in slice's state not is a copy of the data cached by the endpoint – Osmanys Fuentes-Lombá Jun 05 '22 at 22:12
  • I'm currently doing the transformation in the component that's executing the query then dispatch some action from the slice. But I'd prefer to move that logic to the slice itself, is it a bad pattern what I'm trying to do? – Osmanys Fuentes-Lombá Jun 05 '22 at 22:16
  • 1
    Why not just use `transformResponse` on the endpoint? – phry Jun 05 '22 at 22:16
  • @phry Can a set the transformResponse at calling time? Cause I need some data in the slice for the transformation, that data is not available at the endpoint definition state – Osmanys Fuentes-Lombá Jun 05 '22 at 22:20
  • 1
    No. At this point it pretty much sounds like you have some kind of derived data. In that case I'd call a selector for your extra data as well as the `useQuery` hook - and then a `useMemo` to merge both together. I'd wrap those three things in a custom hook to keep the logic out of your component? – phry Jun 05 '22 at 22:25
  • @phry that sounds interesting, I haven't think it that way. Just a last question: what would be the useMemo dependencies, the paramaters for the query or maybe something related to the data fetched? – Osmanys Fuentes-Lombá Jun 05 '22 at 22:29
  • The fetched data and whatever you selected out of your slice. – phry Jun 05 '22 at 22:38
  • Please refer to this answer https://stackoverflow.com/a/75258901/8191659 – Mahmonir Bakhtiyari Jan 27 '23 at 13:43

0 Answers0