Facing hydrating problems after updating to 9.0

[aleksakojadinovic]

Hi, I added this as a discussion since I'm not sure whether this is a library problem or I lack some understanding of how things work in 9.0.

My app relies heavily on App.getInitialProps, or rather wrapper.getInitialAppProps. The reason is that I need some global data fetched for every single page (some data that is displayed in the header and the footer of my website). Up until now it was really no problem, I would have something like this in my _app: (Please note I've simplified the code a little bit, as to not reveal any sensitive info)

MyApp.getInitialProps = wrapper.getInitialAppProps(
  (store) => async (appContext) => {
    store.dispatch(globalDataSlice.endpoints.getGlobalData.initiate());

    await Promise.all(
      store.dispatch(globalDataSlice.util.getRunningQueriesThunk())
    );

    const appProps = await App.getInitialProps(appContext);
    return { ...appProps };
  }
);

And then in the app component itself I would have something like this:

function MyApp({ Component, pageProps }) {
  useGetGlobalDataQuery();
  return (
    <Fragment>
      {/* Header which uses some parts of the global data */}
      <Header />
      
      <Component {...pageProps} />
      {/* Footer which also uses some parts of the global data */}
      <Footer />
    </Fragment>
  );
}

export default wrapper.withRedux(MyApp);

I also had the extractRehydrationInfo in my RTKQ setup, exactly as shown in their official docs.
Besides global data fetched in App's getInitialProps, I also had a few pages that fetched data in their own getInitialProps.

Anyway, I updated to next-redux-wrapper 9.0 today. I followed the guide for updating. I've removed all manual hydration and usages of HYDRATE, I switched to wrapper.useStore() hook instead of the HOC.
Now, when it comes to other pages (non-_app pages) and their data fetching, everything works fine, I've just added wrapper.useHydration(props) call to them. However, this cannot be done with _app since app is the one that wraps stuff with the redux provider now therefore it has no access to the store at all. I've tried hacking this by creating a component called AppWrapper like so:

function MyApp(...) {
  const store = wrapper.useStore();
  return <Provider store={store}>
     <AppWrapper /> // And then inside the AppWrapper i call useHydrate, and all the data fetching hooks
  </Provider>
}

but it doesn't work. When the page loads there is an initial flash of unhydrated data in the header, and then in a few moments the data appears. As I've mentioned, this is only the case with the data that gets fetched through _app's getInitialProps, data that gets fetched through specific pages has no issues whatsoever. The fact that data is displayed immediately on the specific pages is even more confusing to me since, if I understood correctly, hydration now actually works by replaying all actions that happened on the server, in the same order. How can this then make a difference? I've checked redux devtools on the client side and all the actions, including the ones caused by app's getInitialProps, are displayed at the beginning. So how come their data flashes and the page-specific data doesn't?

So, am I using something wrong or is there no good way to fetch data in app's getInitialProps and have it displayed immediately on the first render?

Thanks in advance :)

[aleksakojadinovic]

Well, sorry for potentially wasting someone's time, but it seems I just accidentally put the useHydration call after the selectors that extract the global data in my AppWrapper:

function AppWrapper(...){
   const globalData = useSelector(...);
   wrapper.useHydration(...); // should be at the top
}

which caused the globalData to be empty on the first render.