getStaticProps에서 Apollo Client를 사용하면 나온 오류를 해결합니다.

전제



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을 사용하지 않으면 오류가 발생하지 않았습니다.



해결책



여기에 해결책이있었습니다.
htps : // 기주 b. 코 m / Apog g et al phql / Apop - c peen t / issue s / 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 근처가 수상하다고 생각하면서,
지금은 원인을 몰랐습니다. . .

좋은 웹페이지 즐겨찾기