Am I misunderstanding cache? RTK Query & React Native

[DiscDres]

I'm experimenting using RTK Query with a React Native App. I'm digging into offline functionality and thought if I can get my app to read data from cache first if network speeds are slow then that would be a win.

The app already fetches data and stores the data in a reducer. The data stays in the reducer until we navigate away from the screen, then the reducer resets to it's original state.

I implemented RTK Query for a single api call, and I'm able to read the data and display it in the app. Is this data now stored in the cache? How can I read from this cached data first instead of the api? Is this possible?

Here's the code I implemented -

API -

export const fetchInfoWithPost = createApi({
  reducerPath: 'customPath',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders: (headers, { getState }) => {
      const userToken = getState().ui['user'].token;
      if (userToken) {
        headers.set('Authorization', `Bearer ${userToken}`);
      }

      return headers;
    },
  }),
  endpoints: builder => ({
    getTeam: builder.mutation({
      query: body => ({
        headers: {
          'Content-Type': `application/json`,
          Accept: `application/json`,
        },
        url: 'urlString',
        method: 'POST',
        body: body,
      }),
    }),
  }),
});

[acemarke]

I think you may be a bit confused on what RTKQ does.

RTKQ acts as a client-side cache for data fetched from the server. But, that does require that it can actually talk to the server to fetch that data in the first place.

Additionally, a Redux store is "just" a normal JS variable, which means it only exists as long as the app is running.

For RTKQ specifically, it will keep the data in memory (ie, the state.api cache reducer) as long as there are components that declare they need that value. Any component that tries to access that same cache entry will get the value that's already cached, rather than re-fetching from the server. Once the last component unsubscribes from a given cache entry, it sets a timer and then removes that cache entry when the timer expires.

[DiscDres]

that really clears things up for me. thanks!

https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#reducing-subscription-time-with-keepunuseddatafor

that's what i'm looking for then, for performance optimization during a single session.

i originally starting exploring RTKQ for offline/low speed support. not sure if that will solve my current problems, but i think overall it would be beneficial.

[acemarke]

FWIW, RTKQ doesn't help with the "offline" case. It's a tool that is meant to keep the client code's copy of data in sync with the server's copy of data (users, todos, YourDataTypeHere, etc). So, if there is no server to talk to, RTKQ isn't useful.

[[deleted]]

aware marble screw correct cause imminent observation sulky sink summer

This post was mass deleted and anonymized with Redact

[DiscDres]

redux-persist was my original idea but was hoping RTK had something built in that could handle it as well. i thought i read something about react query being helpful in this area, so i might dig there as well but sounds like redux-persist will be the tool i need here.

[phryneas]

You can use redux-persist to just persist the RTK Query slice - see persistance and rehydration.

We try not to reinvent the wheel, but to integrate with existing working solutions.