While working on my nextjs app, I decided to implement react-query with SSR/SSG and went through several tutorials. I opted for the hydration configuration over the initialData approach as it seemed more efficient.
Following the instructions in the react-query guide at , all you have to do is wrap your app in QueryClientProvider and Hydrate components, passing a prop to each one.
const App = ({ Component, pageProps }: AppProps) => {
const [queryClient] = useState(
() => new QueryClient({ defaultOptions: { queries: { staleTime: 30 * 1000 } } })
)
return (
<QueryClientProvider client={queryClient}>
<Hydrate state={pageProps.dehydratedState}>
<ReactQueryDevtools initialIsOpen={false} />
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</Hydrate>
</QueryClientProvider>
)
}
export default App
To fetch data using react-query within
getServerSideProps/getStaticPropsqueryClient, call prefetchQuery, and set a prop with dehydrate(queryClient).
export async function getStaticProps() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery<Todo[]>('todos', fetchTodos)
return {
props: {
dehydratedState: dehydrate(queryClient),
},
}
}
const Home: NextPage = () => {
const { data, isLoading } = useQuery<Todo[]>('todos', fetchTodos)
console.log(isLoading)
if (isLoading) return <h1>Loading...</h1>
I've set up a small API that returns the same data as https://jsonplaceholder.typicode.com/todos, but with a setTimeout of 3 seconds. However, every time I reload or navigate between pages using next/link, there is a 3-second delay in loading the page, indicating that the react-query cache is not being utilized.
I tried moving the queryClient instance outside of getServerSideProps and also adding staleTime to all queries as per my configuration above.
The only solution I found was:
export const queryClient = new QueryClient()
export async function getStaticProps() {
if (!queryClient.getQueryData('todos')) {
await queryClient.prefetchQuery<Todo[]>('todos', fetchTodos)
}
return {
props: {
dehydratedState: dehydrate(queryClient),
},
}
}
However, I couldn't find much discussion about this issue and it feels like I might be approaching it incorrectly.
This screenshot from my network tab shows the activity when navigating between pages before 30 seconds elapse based on my staleTime configuration and having the queryClient instance outside of gssp:
enter image description here