Missing getServerSnapshot on React 18 and Next 12

See original GitHub issue

Intended outcome: Adding an Apollo Client to a Next JS application with React 18 should execute the query and load the data. However, the error message below prevents the page from loading.

Actual outcome: error - Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering. Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering. at Object.useSyncExternalStore (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5051:11) at Object.useSyncExternalStore (/node_modules/react/cjs/react.development.js:1671:21) at InternalState.useQuery (/node_modules/@apollo/client/react/hooks/hooks.cjs:70:31) at useQuery (/node_modules/@apollo/client/react/hooks/hooks.cjs:28:69)

How to reproduce the issue:

Use create-next-app to create a new NextJS application with React 18 and Next 12.
Setup an Apollo Server endpoint similar to the steps discussed in this blog post: https://www.prisma.io/blog/fullstack-nextjs-graphql-prisma-2-fwpc6ds155
Install @apollo/client @beta (currently 3.6.0-rc.1) and configure a query similar to the above blog post. The beta is currently required to install Apollo Client with React 18.
Executing the client query results in the error message “Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.”

A similar issue was identified and fixed in another package, Zustand. https://github.com/pmndrs/zustand/commit/773e2e2919d5367a41f27adaa63fe2ab2e572d07

Versions System: OS: macOS 12.3.1 Binaries: Node: 17.1.0 - ~/.nvm/versions/node/v17.1.0/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v17.1.0/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v17.1.0/bin/npm Browsers: Chrome: 100.0.4896.127 Firefox: 99.0.1 Safari: 15.4 npmPackages: @apollo/client: ^3.6.0-rc.1 => 3.6.0-rc.1 apollo-server-micro: ^3.5.0 => 3.5.0

Issue Analytics

State:
Created a year ago
Reactions:27
Comments:17 (3 by maintainers)

Top GitHub Comments

12reactions

yura3dcommented, Apr 26, 2022

3.6.0 has just released and SSR is still broken:

Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
    at Object.useSyncExternalStore (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5051:11)
    at Object.useSyncExternalStore (***\node_modules\react\cjs\react.development.js:1671:21)
    at InternalState.useQuery (***\node_modules\@apollo\client\react\hooks\hooks.cjs:70:31)
    at useQuery (***\node_modules\@apollo\client\react\hooks\hooks.cjs:28:69)
    at *** (webpack-internal:///./***)
    at renderWithHooks (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5448:16)
    at renderIndeterminateComponent (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5521:15)
    at renderElement (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5736:7)
    at renderNodeDestructive (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5875:11)
    at renderContextProvider (***\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5710:3)
error - Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.

Windows 11 x64 / Debian 10 x64 Node.js 17.8.0 react 18.0.0 react-dom 18.0.0 next 12.1.5 @apollo/client 3.6.0 graphql 15.8.0

Seems like 3.6.0 simply does not support SSR for React 18: hook useSyncExternalStore requires 3rd argument named getServerSnapshot for SSR to work, but useQuery passes only 2 arguments to it: https://github.com/apollographql/apollo-client/blob/18e9911116902870d0cbb8a10d3174e24f5817d9/src/react/hooks/useQuery.ts#L110-L188 So for now, only client rendering is available.

11reactions

pin4evacommented, Apr 28, 2022

The error is from react 18. To solve this problem simply downgrade your react version

yarn add react@17 react-dom@17

Top Results From Across the Web

Error: Missing getServerSnapshot, which is required for server ...

With React 18, this error occurs when using a useStore hook: // useDarkMode.ts import create from 'zustand' import { persist } from ...

Amlify react app throws Error: Missing getServerSnapshot ...

A fix for it has been implemented and will be part of the next package release. Share.

React 18: Overview - Next.js

Next.js 13 requires using React 18, unlocking: Streaming SSR; React Server Components; Edge and Node.js Runtimes; New APIs like startTransition and more.

Hooks API Reference - React

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This page...

Server-side rendering - Apollo GraphQL Docs

You don't need to make any changes to your queries to support this API. Differences from client-side rendering. When you render your React...