{"id":17683214,"url":"https://github.com/nemanjam/hydration-test-case","last_synced_at":"2025-10-06T22:27:06.290Z","repository":{"id":38601504,"uuid":"506590512","full_name":"nemanjam/hydration-test-case","owner":"nemanjam","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-01T08:34:23.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-05T22:46:48.667Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nemanjam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-23T10:13:27.000Z","updated_at":"2022-06-23T10:15:34.000Z","dependencies_parsed_at":"2022-07-30T06:37:53.311Z","dependency_job_id":null,"html_url":"https://github.com/nemanjam/hydration-test-case","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fhydration-test-case","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fhydration-test-case/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fhydration-test-case/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Fhydration-test-case/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nemanjam","download_url":"https://codeload.github.com/nemanjam/hydration-test-case/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246372501,"owners_count":20766627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-24T09:44:40.914Z","updated_at":"2025-10-06T22:27:01.240Z","avatar_url":"https://github.com/nemanjam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Reproduce suspense hydration error\n\n- useMe is dependant query `enabled: status !== 'loading'` with additional async `useSession()` call\n- usePosts has no dependant async queries so SSR === CSR, ulness refetch/invalidate\n\n- **main point:**\n\n```ts\n// if keys don't match:\n// ['posts'] and ['posts-different']\n\n// browser error:\nUncaught 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.\n\n// but ALSO causes this Node.js error\nGlobal Query error handler.  Message: connect ECONNREFUSED 127.0.0.1:80 Error object: AxiosError: connect ECONNREFUSED 127.0.0.1:80\n    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {\n  port: 80,\n  address: '127.0.0.1',\n  syscall: 'connect',\n  code: 'ECONNREFUSED',\n  errno: -111,\n...\n    headers: {\n      Accept: 'application/json, text/plain, */*',\n      'User-Agent': 'axios/0.27.2'\n    },\n    method: 'get',\n    url: 'api/posts/',\n    data: undefined\n```\n\n```ts\n// 1.\n// my-react-query/posts/usePosts.ts\nexport const usePosts = () =\u003e {\n  // IMPORTANT: must match exactly getServerSideProps\n  // await queryClient.prefetchQuery(['posts'], () =\u003e posts);\n  const query = useQuery\u003cPost[], AxiosError\u003e(['posts'], () =\u003e getPosts());\n  return query;\n};\n\n// 2.\n// pages/index.tsx\nexport const getServerSideProps: GetServerSideProps = async ({ req, res }) =\u003e {\n  const me = getMe(true);\n  const posts = getPosts(numberOfPosts, true);\n\n  const queryClient = new QueryClient();\n  // IMPORTANT: must match exactly useQuery key on client\n  await queryClient.prefetchQuery(['posts'], () =\u003e posts);\n  await queryClient.prefetchQuery(['me', me.id], () =\u003e me);\n\n  // ...\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fhydration-test-case","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnemanjam%2Fhydration-test-case","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Fhydration-test-case/lists"}