React Query and using queryClient in both _app.js AND getInitialProps

Question

So, in the docs, we have this code: https://react-query.tanstack.com/guides/ssr#using-hydration

RE: The use of 'useRef' to store a reference.

 // _app.jsx
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
 export default function MyApp({ Component, pageProps }) {
   const queryClientRef = React.useRef()
   if (!queryClientRef.current) {
     queryClientRef.current = new QueryClient()
   }
 
   return (
     <QueryClientProvider client={queryClientRef.current}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>
     </QueryClientProvider>
   )
 }

BUT, I also need to store some fetch calls IN the "cache" in the MyApp.getInitialProps.... how is that gonna happen IF I create an instance with useRef in function above? Meaning, how is my "getInitialProps" gonna get that instance?

MyApp.getInitialProps = async (appContext) => {
   // in here, I do a fetch and get some data I need for SSR
   // user Session etc...
   const { user } = await fetchUserSession();

   // WHAT INSTANCE IS THIS?
   queryClient.setQueryData('user', user || {});

   return {
      ...appProps,
     dehydratedState: dehydrate(queryClient),
   }

}

I am currently defining queryClient = new QueryClient() at the top of the page, so "both" can use it. But I think that is causing some issues with hydration when I npm run build this app.

Remember, this is in "_app.js" so I have to use getInitialProps.

The reason I am doing it here is because we need the users session sitewide, no matter what page they and on. So, rather than do this in every single /page/, just do it in _app.js, so the whole site needs that? The /page/ are Static Generated.

Out of curiosity, what about simply separating concerns and passing the user session as a props? — mydogspies
– mydogspies, Commented May 12, 2021 at 18:57

TkDodo · Accepted Answer · 2021-05-12 18:34:46Z

1

for prefetching on the server, you just create a new QueryClient like described further down on the page you have linked:

 export async function getStaticProps() {
   const queryClient = new QueryClient()
 
   await queryClient.prefetchQuery('posts', getPosts)
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
     },
   }
 }

Here, you create a new empty client, prefetch and take the state and dehydrate it. Then, on the frontend, that state is put into your instance client from MyApp. This is just a way of getting the data from that server-side cache into the client-side cache.

answered May 12, 2021 at 18:34

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

james emanon Over a year ago

Just to be clear, and I appreciate your response ,in "_app.js", you can only use "getInitialProps". I just want to make sure that this is still doable in "app.js" getInitialProps.. ie.. MyApp.getInitialProps

james emanon Over a year ago

Also, do I have to use "prefetchQuery". I can still do it the way that is used in my OP (but make sure I use its own QueryClient)?

Collectives™ on Stack Overflow

React Query and using queryClient in both _app.js AND getInitialProps

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related