getStaticPropsで、Apollo Clientを使うと出たエラーへの対処

3708 ワード
GraphQL TypeScript next.js Auth0 ApolloGraphQL TypeScript テキストリンク

前提

Next.js, Auth0, Hasura, Apolloを使用しています。

問題

[quizId].tsx
export const getStaticProps: GetStaticProps = async (context) => {
  const apolloClient = initializeApollo()
  const { data } = await apolloClient.query<GetQuizByIdQuery>({
    query: GET_QUIZ_BY_ID,
    variables: { id: context.params.quizId },
  })

  return {
    props: { data: data.quiz_by_pk },
    revalidate: 1,
  }
}

getStaticProps内で、Apolloの初期化を行うとエラーがでました。
Auth0を使用してない場合は、エラーは出ませんでした。

解決策

こちらに解決策がありました。
https://github.com/apollographql/apollo-client/issues/6765

get~propsのnode-fetchにパッチを当てることで、解決できるようです。
具体的には、_document.tsx内に下記を追記で解消できました。

_document.tsx
import fetch from 'node-fetch'
import { abortableFetch } from 'abortcontroller-polyfill/dist/cjs-ponyfill'

global.fetch = abortableFetch(fetch).fetch

Auth0を使っていないAppでは出なかったエラーなので、@auth0/auth0-react辺りが怪しいと思いつつ、
いまいち原因がわかりませんでした。。。