Replies: 3 comments 2 replies
-
the dehydration doesn't have any state. If you dehydrate a queryClient, you will get a json structure that's detached from the client. It will contain everything that was dehydrated as part of the dehydrateOptions. As you've seen, errors are excluded, but you can include them. See the docs here.
errors are just not included in the dehydration, so when you hydrate again on the client and call
|
Beta Was this translation helpful? Give feedback.
-
This could be problem when error occurred on const fn = () => {
throw new Error('error!');
}
const App = () => {
// whice throw error on server, because QueryClient's queryState has error on this query key.
const {error} = useQuery('key', fn, {useErrorBoundary: true});
return <h1>{error?.message}</h1>
}
// server code from the doc
import { dehydrate, Hydrate, QueryClient, QueryClientProvider } from 'react-query';
function handleRequest (req, res) {
const queryClient = new QueryClient()
await queryClient.prefetchQuery('key', fn)
const dehydratedState = dehydrate(queryClient)
const html = ReactDOM.renderToString(
<QueryClientProvider client={queryClient}>
<Hydrate state={dehydratedState}>
<App />
</Hydrate>
</QueryClientProvider>
)
res.send(`
<html>
<body>
<div id="root">${html}</div>
<script>
window.__REACT_QUERY_STATE__ = ${JSON.stringify(dehydratedState)};
</script>
</body>
</html>
`)
queryClient.clear()
}
|
Beta Was this translation helpful? Give feedback.
-
to my knowledge, It would be best if you could show a codesandbox reproduction of your issue. |
Beta Was this translation helpful? Give feedback.
-
Yes. What I'm saying is,
Here is reproduction codesandbox. https://codesandbox.io/s/razzle-examples-basic-forked-ppgz7z?file=/src/App.js It seems that Also, if error used in the render (like In Nextjs, it is not a problem because the queryClient used for rendering and the queryClient used for prefetching are different. But in custom SSR frameworks guide, it shows same QueryClient used both prefetch and render. Should I use different QueryClient for render and prefetchQuery? |
Beta Was this translation helpful? Give feedback.
-
Yes, I think that's it. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi!
I'm using react-query in SSR environment very happily.
I refer this SSR document a lot.
I'm confused difference between queryClient's error state and dehydrated error state.
When error occurred in SSR (prefetchQuery or fetchQuery), queryClient's error state updated, but dehydrated state is not.
So, when component rendered in SSR,
useQueryreturn error state, but when rendered in client side(CSR) error would beundefinedbefore fetching.In SSR Documents,
If this is desirable behavior, shouldn't
useQueryreturn error asundefinedlike dehydrated state ?This also would be problem when use
useErrorBoundaryoption.When use
useErrorBoundaryoption is SSR, it would throw error in SSR (which doesn't support ErrorBoundary) because of queryClient's error state.This wouldn't be a problem in Next.js because queryClient will be newly created in each page's
getServerSideProps. But in custom SSR frameworks guide, it shows same QueryClient used both prefetch and render.Beta Was this translation helpful? Give feedback.
All reactions