Merge pull request #2064 from Shopify/make-graphql-api-keepalive-conf…

…igurable

[Feature] Add the ability to override 'keepalive' on fetch requests

.changeset/heavy-seas-shave.md

@@ -0,0 +1,21 @@
+---
+'@shopify/graphql-client': minor
+---
+
+Make fetch's keepalive configurable when making requests
+
+Example:
+```typescript
+const shopQuery = `
+  query ShopQuery {
+    shop {
+      name
+      id
+    }
+  }
+`;
+
+const {data, errors, extensions} = await client.request(shopQuery, {
+  keepalive: true,
+});
+```

packages/api-clients/graphql-client/README.md

@@ -90,6 +90,7 @@ const client = createGraphQLClient({
 | 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`. |
+| keepalive? | `boolean`                            | Whether to keep a connection alive when page is unloaded before a request has completed. Default value is `false`. |
 | signal?    | `AbortSignal`                        | If this option is set, the request can be canceled by calling `abort()` on the corresponding  `AbortController`.                                                                                                                                     |
 
 
@@ -229,6 +230,23 @@ const {data, errors, extensions} = await client.request(shopQuery, {
 });
 ```
 
+### Make a request that should run even if page is unloaded
+
+```typescript
+const shopQuery = `
+  query ShopQuery {
+    shop {
+      name
+      id
+    }
+  }
+`;
+
+const {data, errors, extensions} = await client.request(shopQuery, {
+  keepalive: true,
+});
+```
+
 ### Provide GQL query type to `client.request()` and `client.requestStream()`
 
 ```typescript

packages/api-clients/graphql-client/src/graphql-client/graphql-client.ts

@@ -111,6 +111,7 @@ function generateFetch(
       headers: overrideHeaders,
       url: overrideUrl,
       retries: overrideRetries,
+      keepalive,
       signal,
     } = options;
 
@@ -141,6 +142,7 @@ function generateFetch(
         headers: flatHeaders,
         body,
         signal,
+        keepalive,
       },
     ];
 

packages/api-clients/graphql-client/src/graphql-client/tests/http-fetch.test.ts

@@ -85,6 +85,7 @@ describe('httpFetch utility', () => {
             body: JSON.stringify({query: operation}),
             headers: {'X-My-Header': '1'},
             signal: new AbortController().signal,
+            keepalive: true,
           },
         ];
 

packages/api-clients/graphql-client/src/graphql-client/types.ts

@@ -3,6 +3,7 @@ interface CustomRequestInit {
   headers?: HeadersInit;
   body?: string;
   signal?: AbortSignal;
+  keepalive?: boolean;
 }
 
 export type CustomFetchApi = (
@@ -94,6 +95,7 @@ export interface RequestOptions {
   url?: string;
   headers?: HeadersObject;
   retries?: number;
+  keepalive?: boolean;
   signal?: AbortSignal;
 }