v12.1.5 regression with apollo client in SSR

[macrozone]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

  Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
    Binaries:
      Node: 14.19.1
      npm: 6.14.16
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.1.5
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

we use the classic approach of doing ssr with @apollo/client where it runs getDataFromTree on the server and hydrates the client in a getInitialProps function.

when I upgraded next from 12.1.4 to 12.1.5 this broke:

Error while running `getDataFromTree` Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
    at new InvariantError (/path/project/node_modules/@apollo/client/node_modules/ts-invariant/lib/invariant.esm.js:12:28)
    at Object.invariant (/path/project/node_modules/@apollo/client/node_modules/ts-invariant/lib/invariant.esm.js:24:15)
    at useApolloClient (/path/project/node_modules/@apollo/client/react/hooks/useApolloClient.js:7:15)
    at useQuery (/path/project/node_modules/@apollo/client/react/hooks/useQuery.js:13:18)
    at useAssortment (webpack-internal:///./src/modules/categories/hooks/useAssortment.ts:31:97)
    at CategoryPage (webpack-internal:///./src/modules/categories/components/ShopRegularCategory.tsx:56:122)
    at processChild (/path/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/path/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/path/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/path/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) {
  framesToPop: 1
}

Expected Behavior

this kind of setup should not be affected by a patch-release

To Reproduce

will try to provide later, i still need to gather information and try to find out which actual change is the root cause o this bug.

[KATT]

Thanks for raising this - got the same issue in tRPC.

Repro:

1. yarn create next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
2. yarn add next@latest
3. yarn dx

Expected

App works without errors

Actual

App has errors similar to the above Apollo-error on the server render.

---

Try changing package.json to a hard dep of 12.1.4 and it works fine.

---

For the easy server-side rendering in tRPC/Apollo/urql we all rely on getInitialProps and doing prepasses on the React-tree to fetch data on the server. tRPC uses react-ssr-prepass.

[macrozone]

has anyone an idea what this could be?

Usually this kind of error arises, when usages of apollo's useQuery do not find the client in the context. Or if they find a different version. I verified that i have only one version of apollo/client in my yarn.lock.

[balazsorban44]

Thanks for the repro, but for completeness, @macrozone could you also add one for your case?

FWIW @KATT, I think react-query only recently started supporting React 18 in their v4 beta: https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.1. Not sure yet if related, but I wanted to mention it.

[macrozone]

Thanks for the repro, but for completeness, @macrozone could you also add one for your case?

FWIW @KATT, I think react-query only recently started supporting React 18 in their v4 beta: https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.1. Not sure yet if related, but I wanted to mention it.

Not sure if I can provide one in the next few hours or days. One important thing to know is, that its not about react 18. Its happening with react 17.

conceptually my case is very similar to the one @KATT provided with his TRPC example. There the App component in pages/_app is wrapped in a HOC withTRPC which provides the right context and collects data on SSR to hydrate the client cache. My guess is that there might be a problem how the App-component of _app is mounted

[KATT]

FWIW @KATT, I think react-query only recently started supporting React 18 in their v4 beta: https://github.com/tannerlinsley/react-query/releases/tag/v4.0.0-beta.1. Not sure yet if related, but I wanted to mention it.

Official support, yes, but they have run their tests with react 18 for ages

---

I made a better repro (which is using react 17 as well).

• CI passes: https://github.com/KATT/next.js-issues-36115
• PR only with Next.js upgrade, CI fails: run yarn add next@latest KATT/next.js-issues-36115#3

I've invited you as a contributor, @balazsorban44, so if you wanna test a new canary or something, feel free to open a new PR that runs through the E2E test suite.

I wish I could provide an even better repro that didn't have libraries, but I really don't have time today.

• tRPC's SSR logic: https://github.com/trpc/trpc/blob/main/packages/next/src/withTRPC.tsx
• Here's urql's which I would bet fails the same way https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/with-urql-client.ts

[balazsorban44]

Thank you, will have a look!

[klarstrup]

Happened upon this myself in my react-query SSR setup

Seems like the AppTree passed to _app's getInitialProps has changed between 12.1.4 and 12.1.5 - the _app (default export MyApp in most examples) component tree doesn't seem to be applied to it any more.

[krunalshahcodes]

@KATT I have tested with next@12.1.6-canary.2 same issue.

[klarstrup]

My tests are now passing again as of next@12.1.6-canary.3! (#36206 & #36198)

[timneutkens]

@klarstrup just to double check: can this issue be closed then?

[klarstrup]

It's @macrozone's issue, but I believe so yes

[timneutkens]

Okay then I'll close it and @balazsorban44 can re-open if @macrozone is still running into it 👍

[KATT]

Confirmed fixed in KATT/next.js-issues-36115#4

[macrozone]

thx guys, will check soon

[HananoshikaYomaru]

hope next@12.1.6 will come soon

[vinamelody]

Thanks for the potential future fix!
fyi, i got this error at first Error while running getDataFromTree Invariant Violation: Could not find "client" in the context or passed in as an option. due to @apollo/client version 3.6.2

however, i had to downgrade to 3.4.17 due to apollographql/apollo-client#9456

The error msg then changed to Error while running getDataFromTree Invariant Violation: Could not find "client" in the context or passed in as an option. and led me here

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.