apollo-client: Missing getServerSnapshot on React 18 and Next 12

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 27
Comments: 17 (3 by maintainers)

Commits related to this issue

Downgrade Apollo Client Ref: https://github.com/apollographql/apollo-client/issues/9623 — committed to upleveled/react-graphql-clients-servers-examples by karlhorky 2 years ago
Update dependency upgrades - non-major (#211) * Update dependency upgrades - non-major * Downgrade React * Revert "Downgrade React" This reverts commit 1eb627fb4a0dab99313766b964de1490a46c06... — committed to upleveled/react-graphql-clients-servers-examples by renovate[bot] 2 years ago

Most upvoted comments

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.

+12

yura3d on Apr 26, 2022

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

yarn add react@17 react-dom@17

+11

pin4eva on Apr 28, 2022

for me is solved in @apollo/client@3.6.2

elrumordelaluz on May 4, 2022

I temporarily solved it by doing this

import React, { useEffect, useState } from "react";
import useUser from "../../src/lib/hooks/useUser";
import Admin from "../../src/containers/Dashboard/Admin";

const AdminPage = ({ ssrMode }) => {
  const [isClient, setClient] = useState<boolean>(false);
  const { user } = useUser({});

  useEffect(() => {
    setClient(true);
  }, []);

  return isClient ? <Admin user={user} ssrMode={ssrMode} /> : null;
};

export default AdminPage;

bluematter on Apr 27, 2022

Why do I need to downgrade to react 18? this was working before the new version @apollo/client 3.6.0 for me I just downgrade to "@apollo/client": "3.5.10", , make sure not you don’t have @apollo/client 3.6.0 on yarn.lock , and this works with react 18.

HT-Moh on Apr 28, 2022

I’ve created a small bugfix PR for this #9652 . Just waiting for approval

hungphongbk on May 1, 2022

Experience the same after updating to 3.6.1

MYKEU on Apr 30, 2022

Confirmed, this appears to be a bug in @apollo/client >= 3.6.0. Downgrading to ❤️.6.0 fixes it.

markedwards on Apr 29, 2022

CSR works in CRA apps, but doesn’t work in Next.js apps. Next.js runs hooks on both sides (server and client), and exactly running on a server triggers the error.

yura3d on Apr 27, 2022