javascript - Auth0 の ID トークンを GraphQL Code Generator に転送するには?

Question

私はReact Queryで GraphQL Code Generator を使用しています。これは私のものcodegen.ymlです:

overwrite: true

schema: http://localhost:4000/graphql

generates:
  src/lib/__generated__/graphql.ts:
    documents:
      - "**/graphql/**/*.graphql"
      - "!mysqldata/**"
    plugins:
      - add:
          content: &comment "/* DO NOT EDIT! this file was generated by graphql-codegen */\n/* eslint-disable */"
      - add:
          placement: append
          content: "export { fetcher }"
      - typescript
      - typescript-operations
      - typescript-react-query
    config:
      fetcher:
        endpoint: "`${process.env.NEXT_PUBLIC_API_URL}/graphql`"
        fetchParams:
          credentials: include
          headers:
            Content-Type: application/json

これにより、次のフェッチャーが生成されます。

function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
  return async (): Promise<TData> => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/graphql` as string, {
      method: "POST",
      credentials: "include",
      headers: {"Content-Type":"application/json"},
      body: JSON.stringify({ query, variables }),
    });
    
    const json = await res.json();

    if (json.errors) {
      const { message } = json.errors[0];

      throw new Error(message);
    }

    return json.data;
  }
}

NEXT_PUBLIC_API_URL外部の GraphQL API を指します。私の Next.js アプリケーションでは、nextjs-auth0とauth0- react を利用しようとしました。

nextjs-auth0Next.js API ルートから Auth0 の ID トークンにアクセスできます。

export default (req: NextApiRequest, res: NextApiResponse) => {
  const session = getSession(req, res)
  const idToken = session?.idToken

whileauth0-react私はトークンのクライアント側を取得することができます:

const claims = await auth0.getIdTokenClaims();
const idToken = claims.__raw;

問題は、これらの抽象化のために、次のような GraphQL エンドポイントへのリクエストにこのトークンを含める方法がわからないことです。

headers: {
  authorization: `Bearer ${session?.idToken}`,
},