Next.js製のアプリでApollo Clientを使用する際に、下記エラーが解消できずしばらくはまってしまった。

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.

簡略化するとコードは以下の状態。

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
import { ApolloProvider } from "@apollo/react-hooks";

function MyApp(props: AppProps) {
  const client = () => {
    return new ApolloClient({
      link: new HttpLink({
        uri: "http://localhost:8080/v1/graphql",
        credentials: "same-origin",
      }),
      cache: new InMemoryCache(),
    });
  };

  return (
    <>
      <ApolloProvider client={client}>
        ...
        <Component {...pageProps} />
        ...
      </ApolloProvider>
    </>
  );
}

AuthProviderを古い方のライブラリ（'@apollo/react-hooks'）から import していたので@apollo/clientから import するように変更。
すると以下のエラーに変わった。

TypeError: client.watchQuery is not a function

@apollo/clientとgraphqlのバージョンを上げてみた。

- "@apollo/client": "^3.3.6",
+ "@apollo/client": "^3.5.6",

- "graphql": "^15.4.0",
+ "graphql": "^15.8.0",

しかしエラーは変わらず。

原因

ApolloClientの初期化処理に問題があった。
コールバックで呼び出していたところを下記のように修正。

const client = new ApolloClient({
  uri: "http://localhost:8080/v1/graphql",
  cache: new InMemoryCache(),
});

これで無事エラーが解消できた。