dotansimha / dotansimha/graphql-code-generator

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

Open
#10,213 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.3k
Forks
1.4k
Avg merge
1d 1h
Merged PRs (30d)
23

Description

### Which packages are impacted by your issue?

@graphql-codegen/cli

### Describe the bug

I'm following the [documentation](https://the-guild.dev/graphql/codegen/docs/config-reference/schema-field#customfetch) 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 => {
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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.