Redux Toolkit · RTK Query · all subjects

createapi/ssr

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

extractRehydrationInfo parameter for SSR

extractRehydrationInfo is an optional parameter for createApi that accepts a function to extract rehydration info from an action. It is used for Server Side Rendering and Persistence and Rehydration scenarios.

configSlice hasRehydrationInfo handler

The hasRehydrationInfo extraReducer in configSlice updates the state to be a new object to be picked up as a state change by redux-persist's autoMergeLevel2.

SSR with Next.js workflow

To implement Server Side Rendering with Next.js using RTK Query: Set up next-redux-wrapper. In getStaticProps or getServerSideProps, pre-fetch all queries via initiate actions (e.g., store.dispatch(api.endpoints.getPokemonByName.initiate(name))). Wait for each query to finish using await Promise.all(dispatch(api.util.getRunningQueriesThunk())). In the createApi call, configure rehydration using the extractRehydrationInfo option.

resetApiState for memory cleanup after SSR render

After a render is sent to the client and the server-side store is being removed from memory, call store.dispatch(api.util.resetApiState()) to ensure no rogue timers are left running and prevent memory leaks.

Prevent stale data with Static Site Generation

To avoid providing stale data with Static Site Generation (SSG), set refetchOnMountOrArgChange to a reasonable value such as 900 seconds to allow data to be re-fetched when accessed if that much time has elapsed since the page was generated.

unstable__ SSR approach for non-Next.js frameworks

For SSR scenarios with frameworks other than Next.js, use an unstable__ marked approach that supports executing async code during render rather than safely in an effect. Create a custom version of createApi that performs asynchronous work during render, similar to Apollo's getDataFromTree approach. Use the custom createApi when calling const api = createApi({...}). Wait for all queries to finish using await Promise.all(dispatch(api.util.getRunningQueriesThunk())) before performing the next render cycle.

extractRehydrationInfo configuration option

The extractRehydrationInfo option is configured in the createApi call to handle rehydration of the RTK Query state during server-side rendering, restoring cached data on the client after the server render.

Give your agent this brain