Help migrating from RTK thunk/reducer to RTKQ

[fhanggi]

Hello
I am looking for advice for how to best migrate some code from RTK to RTKQ.

I have a slice with a thunk that makes an api call to get some data. I also have a reducer in that same slice that is called in some places in the app to change data in the slice without making an api call.
If i understand it correctly if i make the api call now with RTKQ i am not supposed to change that "cached" data in the store but i am not sure.
What i thought I could do is to add a new reducer to the original slice that takes the data that RTKQ put into the api store and puts it into the place where the original thunk put the data. then i could keep on using the reducer that changes the data.

I am just wondering what the best way of migrating this code is. Maybe is there a way to change data in the api area of the store with reducers or something else or is that a no go?

Thank you
Fabian

[markerikson]

The general approach would be to:

• Set up RTKQ
• Define an RTKQ endpoint that fetches the same data
• Replace whatever useSelector + useEffect call you have that triggers the current request with the new RTKQ query hook for that endpoint

See the examples here:

• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics

Note that you can do manual cache updates if needed:

• https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#implementing-optimistic-updates
• https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates

[fhanggi]

Thank you! I was able to update the data in the api store using the updateQueryData function

  dispatch(
    serviceRequestsApi.util.updateQueryData("fetchServiceRequestsByServiceRequestLocationId", undefined, (draftPost) => {
      draftPost[serviceRequest.id] = updatedServiceRequest;
    })
  );

however after 60 seconds the data is lost.

i see that there is keepUnusedDataFor which i could set to a very high value

is this the best approach to simulate what the thunks do? with thunks the data stays in the store "indefinitely"
i cannot make an api call again to get the data because the updates i make using updateQueryData are not yet in the database.

Thank you

[markerikson]

RTKQ keeps track of active subscriptions to a given cache entry. The assumption is that your UI components ought to be using the useFetchServiceRequestsWhateveryQuery() hook and asking for that data, in which case RTKQ sees that the data is in use and keeps it around.

What part of your UI is supposed to be using that data?

(But yes, you can set keepUnusedDataFor to a high value and RTKQ will keep it in the cache even if no component is asking for it.)

[fhanggi]

The UI is a wizard. at the start an api call is made to get data which is then modified throughout the wizard steps. I am using a lazy query to control when the api call is made at the beginning of the wizard.
on the last step the data is submitted. so i need to keep the data in "memory" and not have an api call made again which would wipe out what the user added.
hence i think I cannot use "useLazyFetchServiceRequestsByServiceRequestLocationIdQuery" again

i try keepUnusedDataFor

Thank you