phryneas / ssr-experiments Goto Github PK

A lot has changed with Next and RTK in the past 5 months. Is this still the recommended way?

use hydration. still behaves wonky - middleware not executed on client?

That commit message is a little off-putting, too :P

In getPokemonByName query i change param from name: string to object {name: string}, i got two api call when i first visit pokemon detail page.

Hello @phryneas first of all, thanks for the amazing work you and your team do.
I see how helpful your comments are all over the web.

I'm a bit confused when it comes to using RTK query during SSR, particularly using Next.js.

I have seen in this repo that even with the use of RTK query during SSR, you still make use of the hooks to fetch for the Pokemon details in the Pokemon page.

Because of that, I have multiple questions -

• Do I still need the hook to fetch/query data even even while using RTK query server side ?
• While using SSR, is the data still stored in the cache ?
• If the data is still stored in the cache and not run on every request, meaning I can still get the cached data from the query hook right ?

Please I would really appreciate your response.
Thanks @phryneas

@phryneas
I try to convert this into normal js but I don't how to convert this part

# store.ts
export type AppStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<AppStore["getState"]>;
export type AppDispatch = AppStore["dispatch"];

and this part where is this

util: { getRunningOperationPromises }

defined ?

# pokemonApi.ts

// Export hooks for usage in functional components
export const {
  useGetPokemonByNameQuery,
  useGetPokemonListQuery,
  util: { getRunningOperationPromises },
} = pokemonApi;

I'm trying to run rtkQuery during SSR, all goes well until it gets to dispatching the getRunningQueriesThunk and I get the following function TypeError: _features_api_subApis_propertyApi__WEBPACK_IMPORTED_MODULE_4__.propertyApi.util.getRunningQueriesThunk is not a function

export const getServerSideProps = reduxWrapper.getServerSideProps(
  (store) => async (context) => {
    const propertyId = context.params?.propertyId;

    store.dispatch(getProperty.initiate(propertyId));

    const response = await Promise.all(
      store.dispatch(propertyApi.util.getRunningQueriesThunk())
    );
    console.log(response);

    return {
      props: {},
    };
  }
);

I have tried looking for solution online, but I found none,
When I check the methods/functions of the api.util, I see the old getRunningOperationPromises and cannot find getRunningQueriesThunk
Please how can I solve this?