【Next.js】App RouterでApollo Client使用時にInvariant Violationのエラー

概要

Next.jsのApp RouterでApollo Clientを使用した際に、表題のエラーが起きましたので対応のメモ書きを残しておきます。
なお、2024年1月時点での事象ですので今後の更新で解消される可能性はあります。

前提

• 使用したNext.jsのバージョンは14.0.4です。
• 使用したapollo-clientのバージョンは3.8.8です。

対応

Invariant Violation APOLLO: Using next.js and tsのstackoverflowの回答で紹介されている通り、apollo-client-nextjsというライブラリを別途使用する対応が挙げられていて、今回これを試してみました。
ただ、このライブラリは2024年1月時点でまだexperimentalな状態です。現時点で私の方で軽く動作確認したところ基本的な動作は問題ない感じはしますが、まだ完璧ではない可能性がある点だけ認識しつつ使用してください。このライブラリを使った実装についてはHow to use Apollo Client with Next.js 13で紹介されています。

実装サンプル

上記で紹介した記事の実装例ほぼそのままですが、クライアントコンポーネントでApollo Clientを設定する実装は以下の通りになります。
Provider部分だけ入れ替えれば、クエリの実行部分はコードを変更しなくても大丈夫そうです。

"use client";

import { ApolloLink } from "@apollo/client";
import {
  ApolloNextAppProvider,
  NextSSRInMemoryCache,
  NextSSRApolloClient,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";

// ここに今回使用した環境のlink設定を定義してある（実装は割愛）
import { apolloLink } from "@/constants/ApolloLinkConstants";

function makeClient() {
  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            apolloLink,
          ])
        : apolloLink,
  });
}

export function ApolloProvider({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}