RTK Query in SSG - Extracting Rehydration Info not working as expected

Question

According to the steps mentioned in the RTK Query documentation for SSR:

I first configured next-redux-wrapper.
Then, I called two lines of code in the SSG call.
The third step was to add extractRehydrationInfo, which I also added.

The following code is part of the SSG section of one of my pages:

    export const getStaticProps: GetStaticProps = wrapper.getStaticProps((store) =>
        async (context) => {
    
            store.dispatch<any>(apiCore.endpoints.getAboutUsInformation.initiate());
            await Promise.all(store.dispatch<any>(apiCore.util.getRunningQueriesThunk()));
    
            return {
                props: {},
            }
        }
    )

This part is also the section for creating an API, and I added a log:

    export const apiCore = createApi({
        tagTypes: ["events-get", "about-us-get"],
        refetchOnMountOrArgChange: 900,
        extractRehydrationInfo(action, {reducerPath}) {
            console.log("extractRehydrationInfo", action.type, action.type == HYDRATE)
            if (action.type === HYDRATE) {
                return action.payload[reducerPath]
            }
        },
        baseQuery: fetchBaseQuery({
            baseUrl: process.env.NEXT_PUBLIC_API_REQUEST    }),
        endpoints: (build) => ({
            getAboutUsInformation: build.query<ApiResponseWrapper<Array<AboutUsModel>>, void>({
                providesTags: ["about-us-get"],
                query: () => 'helper/pages',
            }),
        }),
    })

After running this code, the following logs appear in the terminal:

extractRehydrationInfo api/config/middlewareRegistered false
extractRehydrationInfo api/executeQuery/pending false
extractRehydrationInfo api/subscriptions/internal_probeSubscription false
extractRehydrationInfo api/internalSubscriptions/subscriptionsUpdated false
extractRehydrationInfo api/executeQuery/fulfilled false

The problem is that

the action.type value does not equal HYDRATE, so it cannot return the data. Did I make a mistake in any part? Generally, the value should be equal to HYDRATE in order to merge the server and client store.
Another question is whether I should also use RTK in the SSR? because I want to return the data from props to use SSG caching at build time.

also, here is the redux store configuration.

const entities = combineReducers({
    usersSlice: usersSlice,
    eventsSlice: eventsSlice,
    termConditionSlice: termConditionSlice,
    companiesSlice: companiesSlice,
    aboutUsSlice: aboutUsSlice
})
const ui = combineReducers({
    modals: modalSlice,
    notification: notificationSLice
})

const reducers = combineReducers({
    [apiCore.reducerPath]: apiCore.reducer,
    entities: entities,
    ui: ui,
})

const makeStore = () => configureStore({
    reducer: reducers,
    middleware: getDefaultMiddleware => [
        ...getDefaultMiddleware({
            serializableCheck: false
        }).concat(apiCore.middleware),
    ],
    devTools: process.env.NODE_ENV === 'development',
});
const appStore = makeStore()

setupListeners(appStore.dispatch)

export type AppStore = ReturnType<typeof makeStore>
export type AppState = ReturnType<typeof appStore.getState>
export type AppDispatch = typeof appStore.dispatch
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType,
    AppState,
    unknown,
    Action<string>>

export const wrapper = createWrapper<AppStore>(makeStore, { debug: true })
export default appStore

e.g. I want to use the RTK query data in my meta description

RTK Query in SSG - Extracting Rehydration Info not working as expected

0 Answers0