Zenn
😎

【ApolloClient】`forward is not a function`エラーの解決策

2023/05/20に公開
GraphQL
Next.js
TypeScript
Apollo
tech

背景

ここ一年ほどNext.jsを用いたフロントエンド開発をしてきた中でREST APIの欠点を感じ始めトレンド?のGraphQLの調査を始めました。その際に直面したエラーについて記載したいと思います。

技術スタック

  • 言語：Typescript
  • フレームワーク：Next.js
  • データフェッチライブラリ:Apollo
  • API設計：GraphQL

問題

リクエストヘッダーに情報を載せようと思って設定を修正したら下記のエラーが発生した。
forward is not a function
forwardは関数のはずなのに。。。と思いながら調べてみました。

問題のソースコード

import { COOKIE_KEY } from '@/constants/auth';
import {
  ApolloClient,
  InMemoryCache,
} from '@apollo/client';
import Cookies from 'js-cookie';

// リクエストヘッダー設定
const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: Cookies.get('csrfToken') || null,
    },
  }));

  return forward(operation);
});

const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_LOCAL_IF_HOST,
  link: ApolloLink.from([middlewareLink]),
  cache: new InMemoryCache(),
});
export default client;

原因

ApolloClientの引数の設定が間違っていました。
下記公式の記載

uriまたはのいずれかが必要linkです。両方を指定した場合は、linkが優先されます。
https://www.apollographql.com/docs/react/api/core/ApolloClient/

解決策

  1. ApolloClientのoptionからuriを削除する
  2. HttpLinkを用いてuriを設定する。
import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';
import Cookies from 'js-cookie';

// リクエストヘッダー設定
const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: Cookies.get('csrfToken') || null,
    },
  }));

  return forward(operation);
});

// ① HttpLinkを用いてuriを設定する。
+ const httpLink = new HttpLink({
+  uri: process.env.NEXT_PUBLIC_CONTENT_API,
+ });

// ② uriを削除する。
const client = new ApolloClient({
- uri: process.env.NEXT_PUBLIC_LOCAL_IF_HOST,
 link: ApolloLink.from([middlewareLink, httpLink]),
  cache: new InMemoryCache(),
});
export default client;

最後に

みんなで頑張りましょう！

参考

https://github.com/apollographql/apollo-client/issues/6850

Discussion