Allow function as valid type for UrlSchemaOptions.customFetch (#10150)

* Add type CustomSchemaFetcher

* Add test for using function as customFetch

* Fix linting

* Add documentation

* Add changeset

* Update changeset to remove website as it is not a package

---------

Co-authored-by: Armin Wiebigke <[email protected]>
Co-authored-by: Armin Wiebigke <[email protected]>
Co-authored-by: Eddy Nguyen <[email protected]>
Co-authored-by: Eddy Nguyen <[email protected]>

Author: 4 people

.changeset/big-kiwis-move.md

@@ -0,0 +1,6 @@
+---
+"@graphql-codegen/cli": patch
+"@graphql-codegen/plugin-helpers": patch
+---
+
+Allow functions to be passed as valid values for `UrlSchemaOptions.customFetch`. This was already possible, but the type definitions did not reflect that correctly.

packages/graphql-codegen-cli/tests/codegen.spec.ts

@@ -967,6 +967,31 @@ describe('Codegen Executor', () => {
     expect((global as any).CUSTOM_FETCH_FN_CALLED).toBeTruthy();
   });
 
+  it('should load schema with custom fetch function', async () => {
+    let fetchCalledFor = null;
+
+    async function myCustomFetch(url: string, _options?: RequestInit): Promise<Response> {
+      fetchCalledFor = url;
+      return Promise.resolve(new Response());
+    }
+
+    try {
+      await executeCodegen({
+        schema: ['http://www.dummyschema.com/graphql'],
+        customFetch: myCustomFetch,
+        documents: ['./tests/test-documents/valid.graphql'],
+        generates: {
+          'out1.ts': {
+            plugins: ['typescript'],
+          },
+        },
+      });
+    } catch (error) {
+      expect(error.message).toContain('Failed to load schema from http://www.dummyschema.com/graphql');
+    }
+    expect(fetchCalledFor).toBe('http://www.dummyschema.com/graphql');
+  });
+
   it('should evaluate glob expressions correctly', async () => {
     try {
       await executeCodegen({

packages/utils/plugins-helpers/src/types.ts

@@ -75,6 +75,12 @@ export namespace Types {
     [path: string]: SchemaFromCodeFileOptions;
   }
 
+  /**
+   * @description A function to use for fetching the schema.
+   * @see fetch
+   */
+  export type CustomSchemaFetcher = (url: string, options?: RequestInit) => Promise<Response>;
+
   /**
    * @additionalProperties false
    * @description Loads a schema from remote endpoint, with custom http options.
@@ -85,9 +91,9 @@ export namespace Types {
      */
     headers?: { [headerName: string]: string };
     /**
-     * @description Specify a Node module name, or a custom file, to be used instead of standard `fetch`
+     * @description Specify a Node module name, a custom file, or a function, to be used instead of a standard `fetch`.
      */
-    customFetch?: string;
+    customFetch?: string | CustomSchemaFetcher;
     /**
      * @description HTTP Method to use, either POST (default) or GET.
      */
@@ -407,10 +413,9 @@ export namespace Types {
      */
     require?: RequireExtension;
     /**
-     * @description Name for a library that implements `fetch`.
-     * Use this to tell codegen to use that to fetch schemas in a custom way.
+     * @description Specify a Node module name, a custom file, or a function, to be used instead of a standard `fetch`.
      */
-    customFetch?: string;
+    customFetch?: string | CustomSchemaFetcher;
     /**
      * @description A pointer(s) to your GraphQL documents: query, mutation, subscription and fragment. These documents will be loaded into for all your output files.
      * You can use one of the following:

website/src/pages/docs/config-reference/schema-field.mdx

@@ -141,6 +141,23 @@ const config: CodegenConfig = {
 export default config;
 ```
 
+Alternatively, you can specify a custom fetch function directly:
+
+```ts {7}
+import { CodegenConfig } from '@graphql-codegen/cli';
+import { myCustomFetch } from './my-custom-fetch.ts'
+
+const config: CodegenConfig = {
+  schema: [
+    {
+      'http://localhost:3000/graphql': {
+        customFetch: myCustomFetch,
+      }
+    }
+  ]
+};
+export default config;
+```
 
 ##### `method`