Adds support for signal request option to the graphql-client

Shopify · Sep 5, 2024 · ada2cc3 · ada2cc3
1 parent 0166d6c
commit ada2cc3
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 11 deletions.
diff --git a/.changeset/khaki-scissors-look.md b/.changeset/khaki-scissors-look.md
@@ -0,0 +1,5 @@
+---
+'@shopify/graphql-client': minor
+---
+
+Adds support for `signal` request option
diff --git a/packages/api-clients/graphql-client/README.md b/packages/api-clients/graphql-client/README.md
@@ -84,12 +84,14 @@ const client = createGraphQLClient({
 
 ## `RequestOptions` properties
 
-| Name       | Type                  | Description                                                      |
-| ---------- | --------------------- | ---------------------------------------------------------------- |
-| variables? | `Record<string, any>` | Variable values needed in the graphQL operation                  |
-| url?       | `string`              | Alternative request API URL                                     |
-| headers?   | `Record<string, string \| string[]>`             | Additional and/or replacement headers to be used in the request |
-| retries?   | `number`             | Alternative number of retries for the request. Retries only occur for requests that were abandoned or if the server responds with a `Too Many Request (429)` or `Service Unavailable (503)` response. Minimum value is `0` and maximum value is `3`.|
+| Name       | Type                                 | Description                                                                                                                                                                                                                                          |
+| ---------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| variables? | `Record<string, any>`                | Variable values needed in the graphQL operation                                                                                                                                                                                                      |
+| url?       | `string`                             | Alternative request API URL                                                                                                                                                                                                                          |
+| headers?   | `Record<string, string \| string[]>` | Additional and/or replacement headers to be used in the request                                                                                                                                                                                      |
+| retries?   | `number`                             | Alternative number of retries for the request. Retries only occur for requests that were abandoned or if the server responds with a `Too Many Request (429)` or `Service Unavailable (503)` response. Minimum value is `0` and maximum value is `3`. |
+| signal?    | `AbortSignal`                        | If this option is set, the request can be canceled by calling `abort()` on the corresponding  `AbortController`.                                                                                                                                     |
+
 
 ## `ClientResponse<TData>`
 

diff --git a/packages/api-clients/graphql-client/src/graphql-client/graphql-client.ts b/packages/api-clients/graphql-client/src/graphql-client/graphql-client.ts
@@ -111,6 +111,7 @@ function generateFetch(
       headers: overrideHeaders,
       url: overrideUrl,
       retries: overrideRetries,
+      signal,
     } = options;
 
     const body = JSON.stringify({
@@ -139,6 +140,7 @@ function generateFetch(
         method: 'POST',
         headers: flatHeaders,
         body,
+        signal,
       },
     ];
 

diff --git a/packages/api-clients/graphql-client/src/graphql-client/tests/graphql-client/common-tests.ts b/packages/api-clients/graphql-client/src/graphql-client/tests/graphql-client/common-tests.ts
@@ -140,6 +140,21 @@ export const parametersTests = (
       }),
     });
   });
+
+  it('calls fetch API with provided signal', async () => {
+    const signal = new AbortController().signal;
+
+    await client[functionName](gqlOperation, {signal});
+
+    expect(fetchMock).toHaveBeenCalledWith(clientConfig.url, {
+      method: 'POST',
+      headers: defaultHeaders,
+      body: JSON.stringify({
+        query: gqlOperation,
+      }),
+      signal,
+    });
+  });
 };
 
 export const sdkHeadersTests = (

diff --git a/packages/api-clients/graphql-client/src/graphql-client/tests/http-fetch.test.ts b/packages/api-clients/graphql-client/src/graphql-client/tests/http-fetch.test.ts
@@ -84,6 +84,7 @@ describe('httpFetch utility', () => {
             method: 'POST',
             body: JSON.stringify({query: operation}),
             headers: {'X-My-Header': '1'},
+            signal: new AbortController().signal,
           },
         ];
 

diff --git a/packages/api-clients/graphql-client/src/graphql-client/types.ts b/packages/api-clients/graphql-client/src/graphql-client/types.ts
@@ -1,10 +1,13 @@
+interface CustomRequestInit {
+  method?: string;
+  headers?: HeadersInit;
+  body?: string;
+  signal?: AbortSignal;
+}
+
 export type CustomFetchApi = (
   url: string,
-  init?: {
-    method?: string;
-    headers?: HeadersInit;
-    body?: string;
-  },
+  init?: CustomRequestInit,
 ) => Promise<Response>;
 
 type OperationVariables = Record<string, any>;
@@ -91,6 +94,7 @@ export interface RequestOptions {
   url?: string;
   headers?: HeadersObject;
   retries?: number;
+  signal?: AbortSignal;
 }
 
 export type RequestParams = [operation: string, options?: RequestOptions];