React Query on events page #4
Conversation
There was a problem hiding this comment.
I've taken a closer look at this and can find no big issues with it. I do have issues with sending the entire pageProps to <Component> (more on that below) but it's not a big deal so we can fix that some other time. I will create a separate issue for it.
Will merge this now. :)
| return ( | ||
| <QueryClientProvider client={ queryClient }> | ||
| <Hydrate state={ pageProps.dehydratedState }> | ||
| <Component { ...pageProps } /> |
There was a problem hiding this comment.
An unnecessary effect of spreading pageProps like this is that the page component (e.g. OrgEventsPage) will receive the dehydratedState property even though it doesn't need and should never use it directly. The purpose of the dehydratedState property, created on the server by getServerSideProps(), is to provide state to the <Hydrate> component. Once passed to <Hydrate>, the dehydratedState is no longer relevant.
We should exclude dehydratedState from pageProps before passing it to the page component.
A neat looking way to do this would be to use the spread syntax described here (be sure to read the comments as well) to create two variables, dehydratedState and restProps. The former can then be passed to <Hydrate> and ...restProps to <Component>.
Sets up hydration and refactors events page with React Query