From 49d5966ea28a8855247dfcbe8e9b882136d7d8da Mon Sep 17 00:00:00 2001 From: Melissa Luu Date: Thu, 9 Nov 2023 12:12:36 -0500 Subject: [PATCH 1/4] Rename customHeaders to headers --- .changeset/quick-shirts-remain.md | 5 +++++ .../src/api-client-utilities/tests/utilities.test.ts | 6 +++--- packages/graphql-client/src/api-client-utilities/types.ts | 4 ++-- .../graphql-client/src/api-client-utilities/utilities.ts | 4 ++-- 4 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 .changeset/quick-shirts-remain.md 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 } : {}), }); From 703447ea3a256ac3d3e42e4e4e3f3a6789b34158 Mon Sep 17 00:00:00 2001 From: Melissa Luu Date: Thu, 9 Nov 2023 12:26:30 -0500 Subject: [PATCH 2/4] Set static graphql-client version in storefront-api-client --- packages/storefront-api-client/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storefront-api-client/package.json b/packages/storefront-api-client/package.json index 7f31c485b..81761be96 100644 --- a/packages/storefront-api-client/package.json +++ b/packages/storefront-api-client/package.json @@ -85,7 +85,7 @@ "!node_modules" ], "dependencies": { - "@shopify/graphql-client": "^0.7.0" + "@shopify/graphql-client": "0.7.0" }, "devDependencies": { "@babel/core": "^7.21.3", From 130725fd25173fef165eb4a2cdeba94698e02125 Mon Sep 17 00:00:00 2001 From: Melissa Luu Date: Thu, 9 Nov 2023 12:34:53 -0500 Subject: [PATCH 3/4] Fix tests for storefront-api-client --- packages/storefront-api-client/package.json | 2 +- .../storefront-api-client.test.ts | 21 +++++++++++-------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/storefront-api-client/package.json b/packages/storefront-api-client/package.json index 81761be96..7f31c485b 100644 --- a/packages/storefront-api-client/package.json +++ b/packages/storefront-api-client/package.json @@ -85,7 +85,7 @@ "!node_modules" ], "dependencies": { - "@shopify/graphql-client": "0.7.0" + "@shopify/graphql-client": "^0.7.0" }, "devDependencies": { "@babel/core": "^7.21.3", 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), }); }); From 18e471b142f0de261bd1db5c6a14e91d7b3ba09e Mon Sep 17 00:00:00 2001 From: Melissa Luu Date: Thu, 9 Nov 2023 12:41:55 -0500 Subject: [PATCH 4/4] Update storefront-api-client README to rename customHeaders to headers --- packages/storefront-api-client/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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', }, });