[GraphQL Client] Rename customHeaders to headers

.changeset/quick-shirts-remain.md

@@ -0,0 +1,5 @@
+---
+"@shopify/graphql-client": minor
+---
+
+Rename `customHeaders` to `headers` in Api Client utils and types for readibility

packages/graphql-client/src/api-client-utilities/tests/utilities.test.ts

@@ -113,13 +113,13 @@ describe("generateGetGQLClientParams()", () => {
     });
 
     it("returns an array with the operation string and an option with headers when custom headers were provided", () => {
-      const customHeaders = { "Shopify-Storefront-Id": "shop-id" };
-      const params = getGQLClientParams(operation, { customHeaders });
+      const headers = { "Shopify-Storefront-Id": "shop-id" };
+      const params = getGQLClientParams(operation, { headers });
 
       expect(params).toHaveLength(2);
 
       expect(params[0]).toBe(operation);
-      expect(getHeaderMock).toHaveBeenCalledWith(customHeaders);
+      expect(getHeaderMock).toHaveBeenCalledWith(headers);
       expect(params[1]).toEqual({ headers: mockHeaders });
     });
 

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

@@ -34,7 +34,7 @@ export interface ApiClientConfig {
 export interface ApiClientRequestOptions {
   variables?: OperationVariables;
   apiVersion?: string;
-  customHeaders?: Headers;
+  headers?: Headers;
   retries?: number;
 }
 
@@ -47,7 +47,7 @@ export interface ApiClient<
   TClientConfig extends ApiClientConfig = ApiClientConfig
 > {
   readonly config: Readonly<TClientConfig>;
-  getHeaders: (customHeaders?: Headers) => Headers;
+  getHeaders: (headers?: Headers) => Headers;
   getApiUrl: (apiVersion?: string) => string;
   fetch: (
     ...props: ApiClientRequestParams

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

@@ -27,13 +27,13 @@ export function generateGetGQLClientParams({
       const {
         variables,
         apiVersion: propApiVersion,
-        customHeaders,
+        headers,
         retries,
       } = options;
 
       props.push({
         ...(variables ? { variables } : {}),
-        ...(customHeaders ? { headers: getHeaders(customHeaders) } : {}),
+        ...(headers ? { headers: getHeaders(headers) } : {}),
         ...(propApiVersion ? { url: getApiUrl(propApiVersion) } : {}),
         ...(retries ? { retries } : {}),
       });

packages/storefront-api-client/README.md

@@ -54,7 +54,7 @@ const client = createStorefrontApiClient({
 | Property      | Type                                                                                                                                                                       | Description                                                                                                                                                                                                                                                                                                                                                                |
 | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | config        | [StorefrontApiClientConfig](#storefrontapiclientconfig-properties)                                                                                                                                                             | Configuration for the client                                                                                                                                                                                                                                                                                                                                               |
-| getHeaders    | `(customHeaders?: {[key: string]: string}) => {[key: string]: string}`                                                                                                       | Returns Storefront API specific headers needed to interact with the API. If `customHeaders` is provided, the custom headers will be included in the returned headers object.                                                                                                                                                                                               |
+| getHeaders    | `(headers?: {[key: string]: string}) => {[key: string]: string}`                                                                                                       | Returns Storefront API specific headers needed to interact with the API. If additional `headers` are provided, the custom headers will be included in the returned headers object.                                                                                                                                                                                               |
 | getApiUrl     | `(apiVersion?: string) => string`                                                                                                                                          | Returns the shop specific API url. If an API version is provided, the returned URL will include the provided version, else the URL will include the API version set at client initialization.                                                                                                                                                                              |
 | fetch         | `<TData>(operation: string, options?: `[ApiClientRequestOptions](#apiclientrequestoptions-properties)`) => Promise<Response>`                                          | Fetches data from Storefront API using the provided GQL `operation` string and [ApiClientRequestOptions](#apiclientrequestoptions-properties) object and returns the network response.                                                                                                                                                                                 |
 | request       | `<TData>(operation: string, options?: `[ApiClientRequestOptions](#apiclientrequestoptions-properties)`) => Promise<`[ClientResponse\<TData\>](#ClientResponsetdata)`>` | Requests data from Storefront API using the provided GQL `operation` string and [ApiClientRequestOptions](#apiclientrequestoptions-properties) object and returns a normalized response object.                                                                                                                                                                        |
@@ -80,7 +80,7 @@ const client = createStorefrontApiClient({
 | -------------- | ------------------------ | ---------------------------------------------------- |
 | variables?     | `{[key: string]: string}`    | Variable values needed in the graphQL operation      |
 | apiVersion?    | `string`                 | The Storefront API version to use in the API request |
-| customHeaders? | `{[key: string]: string}` | Customized headers to be included in the API request |
+| headers? | `{[key: string]: string}` | Customized headers to be included in the API 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`.|
 
 ## `ClientResponse<TData>`
@@ -273,7 +273,7 @@ const {data, errors, extensions} = await client.request(productQuery, {
   variables: {
     handle: 'sample-product',
   },
-  customHeaders: {
+  headers: {
     'Shopify-Storefront-Id': 'shop-id',
   },
 });

packages/storefront-api-client/src/tests/storefront-api-client/storefront-api-client.test.ts

@@ -342,11 +342,14 @@ describe("Storefront API Client", () => {
       });
 
       it("returns a headers object that contains both the client default headers and the provided custom headers", () => {
-        const customHeaders = {
+        const headers = {
           "Shopify-Storefront-Id": "test-id",
         };
-        const headers = client.getHeaders(customHeaders);
-        expect(headers).toEqual({ ...customHeaders, ...client.config.headers });
+        const updatedHeaders = client.getHeaders(headers);
+        expect(updatedHeaders).toEqual({
+          ...headers,
+          ...client.config.headers,
+        });
       });
     });
 
@@ -442,13 +445,13 @@ describe("Storefront API Client", () => {
         });
 
         it("calls the graphql client fetch() with customized headers", async () => {
-          const customHeaders = { "custom-header": "custom" };
+          const headers = { "custom-header": "custom" };
 
-          await client.fetch(operation, { customHeaders });
+          await client.fetch(operation, { headers });
           expect(
             (graphqlClientMock.fetch as jest.Mock).mock.calls.pop()[1]
           ).toEqual({
-            headers: client.getHeaders(customHeaders),
+            headers: client.getHeaders(headers),
           });
         });
 
@@ -526,13 +529,13 @@ describe("Storefront API Client", () => {
         });
 
         it("calls the graphql client request() with customized headers", async () => {
-          const customHeaders = { "custom-header": "custom" };
+          const headers = { "custom-header": "custom" };
 
-          await client.request(operation, { customHeaders });
+          await client.request(operation, { headers });
           expect(
             (graphqlClientMock.request as jest.Mock).mock.calls.pop()[1]
           ).toEqual({
-            headers: client.getHeaders(customHeaders),
+            headers: client.getHeaders(headers),
           });
         });