graphql-code-generator icon indicating copy to clipboard operation
graphql-code-generator copied to clipboard

customFetch configuration option doesn't appear to work with Next.js 15

Open linucks opened this issue 11 months ago • 4 comments
trafficstars

Which packages are impacted by your issue?

@graphql-codegen/cli

Describe the bug

I'm following the documentation to use a custom fetch function, as I need to add authentication for accessing my GraphQL endpoint. I'm using the following codegen.ts file:

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "https://swapi-graphql.netlify.app/.netlify/functions/index",
  documents: ["src/**/*.tsx"],
  customFetch: "myFetch",
  generates: {
    "./src/gql/": {
      preset: "client",
    },
  },
};
export default config;

and have a file called myFetch.ts in the same directory as the codegen.ts file that contains:

const myFetch = async (
  uri: RequestInfo | URL,
  options: RequestInit | undefined
): Promise<Response> => {
  return fetch(uri, {
    ...options,
  });
};

export default myFetch;

Whenever I try and run the command: npx graphql-codegen --config codegen.ts

I get the error:

✔ Parse Configuration
❯ Generate outputs
  ❯ Generate to ./src/gql/
    ⠋ Load GraphQL schemas
    ◼ Load GraphQL documents
    ◼ Generate
node:internal/modules/cjs/loader:1048
  const err = new Error(message);
              ^

Error: Cannot find module 'myFetch'
Require stack:
- /private/tmp/my-app/node_modules/@graphql-tools/url-loader/cjs/index.js
- /private/tmp/my-app/node_modules/@graphql-tools/prisma-loader/cjs/index.js
- /private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/graphql-config.js
- /private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/config.js
- /private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/cli.js
- /private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/bin.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at /private/tmp/my-app/node_modules/@graphql-tools/url-loader/cjs/index.js:15:106 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/private/tmp/my-app/node_modules/@graphql-tools/url-loader/cjs/index.js',
    '/private/tmp/my-app/node_modules/@graphql-tools/prisma-loader/cjs/index.js',
    '/private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/graphql-config.js',
    '/private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/config.js',
    '/private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/cli.js',
    '/private/tmp/my-app/node_modules/@graphql-codegen/cli/cjs/bin.js'
  ]
}

Node.js v20.9.0

This happens regardless of where I put the myFetch.ts file or how I organise the imports.

Your Example Website or App

https://github.com/linucks/gqlcodegen-customfetch

Steps to Reproduce the Bug or Issue

  1. Clone repository and cd into it.
  2. Run npx graphql-codegen --config codegen.ts

Expected behavior

I expected the myFetch.ts file to be found and the function imported and used or all fetches by graphql-codgen.

Screenshots or Videos

No response

Platform

  • OS: macOS 15.0.1
  • NodeJS: v20.9.0
  • @graphql-codegen/* version(s): 5.0.3

Codegen Config File

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = { schema: "https://swapi-graphql.netlify.app/.netlify/functions/index", documents: ["src/**/*.tsx"], customFetch: "myFetch", generates: { "./src/gql/": { preset: "client", }, }, }; export default config;

Additional context

No response

linucks avatar Dec 08 '24 16:12 linucks