https://github.com/nemanjam/hydration-test-case
https://github.com/nemanjam/hydration-test-case
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nemanjam/hydration-test-case
- Owner: nemanjam
- Created: 2022-06-23T10:13:27.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-01T08:34:23.000Z (almost 4 years ago)
- Last Synced: 2025-02-05T22:46:48.667Z (over 1 year ago)
- Language: TypeScript
- Size: 47.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Reproduce suspense hydration error
- useMe is dependant query `enabled: status !== 'loading'` with additional async `useSession()` call
- usePosts has no dependant async queries so SSR === CSR, ulness refetch/invalidate
- **main point:**
```ts
// if keys don't match:
// ['posts'] and ['posts-different']
// browser error:
Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
// but ALSO causes this Node.js error
Global Query error handler. Message: connect ECONNREFUSED 127.0.0.1:80 Error object: AxiosError: connect ECONNREFUSED 127.0.0.1:80
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {
port: 80,
address: '127.0.0.1',
syscall: 'connect',
code: 'ECONNREFUSED',
errno: -111,
...
headers: {
Accept: 'application/json, text/plain, */*',
'User-Agent': 'axios/0.27.2'
},
method: 'get',
url: 'api/posts/',
data: undefined
```
```ts
// 1.
// my-react-query/posts/usePosts.ts
export const usePosts = () => {
// IMPORTANT: must match exactly getServerSideProps
// await queryClient.prefetchQuery(['posts'], () => posts);
const query = useQuery(['posts'], () => getPosts());
return query;
};
// 2.
// pages/index.tsx
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
const me = getMe(true);
const posts = getPosts(numberOfPosts, true);
const queryClient = new QueryClient();
// IMPORTANT: must match exactly useQuery key on client
await queryClient.prefetchQuery(['posts'], () => posts);
await queryClient.prefetchQuery(['me', me.id], () => me);
// ...
};
```