diff --git a/.changeset/quick-shirts-remain.md b/.changeset/quick-shirts-remain.md new file mode 100644 index 000000000..157b9e4b9 --- /dev/null +++ b/.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 diff --git a/packages/graphql-client/src/api-client-utilities/tests/utilities.test.ts b/packages/graphql-client/src/api-client-utilities/tests/utilities.test.ts index 8aa6752f9..e9fb04839 100644 --- a/packages/graphql-client/src/api-client-utilities/tests/utilities.test.ts +++ b/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 }); }); diff --git a/packages/graphql-client/src/api-client-utilities/types.ts b/packages/graphql-client/src/api-client-utilities/types.ts index 38327940c..01ca098c2 100644 --- a/packages/graphql-client/src/api-client-utilities/types.ts +++ b/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; - getHeaders: (customHeaders?: Headers) => Headers; + getHeaders: (headers?: Headers) => Headers; getApiUrl: (apiVersion?: string) => string; fetch: ( ...props: ApiClientRequestParams diff --git a/packages/graphql-client/src/api-client-utilities/utilities.ts b/packages/graphql-client/src/api-client-utilities/utilities.ts index 9268d5390..6260cbc24 100644 --- a/packages/graphql-client/src/api-client-utilities/utilities.ts +++ b/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 } : {}), }); diff --git a/packages/storefront-api-client/README.md b/packages/storefront-api-client/README.md index 6f8862ed4..52dda3218 100644 --- a/packages/storefront-api-client/README.md +++ b/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 | `(operation: string, options?: `[ApiClientRequestOptions](#apiclientrequestoptions-properties)`) => Promise` | Fetches data from Storefront API using the provided GQL `operation` string and [ApiClientRequestOptions](#apiclientrequestoptions-properties) object and returns the network response. | | request | `(operation: string, options?: `[ApiClientRequestOptions](#apiclientrequestoptions-properties)`) => Promise<`[ClientResponse\](#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` @@ -273,7 +273,7 @@ const {data, errors, extensions} = await client.request(productQuery, { variables: { handle: 'sample-product', }, - customHeaders: { + headers: { 'Shopify-Storefront-Id': 'shop-id', }, }); diff --git a/packages/storefront-api-client/src/tests/storefront-api-client/storefront-api-client.test.ts b/packages/storefront-api-client/src/tests/storefront-api-client/storefront-api-client.test.ts index 5132ac638..9f2e31d0f 100644 --- a/packages/storefront-api-client/src/tests/storefront-api-client/storefront-api-client.test.ts +++ b/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), }); });