Merge pull request #470 from Shopify/dx-rename-version

dx: rename graphqlApiVersion to storefrontApiVersion
Shopify · Jan 24, 2022 · e5000ff · e5000ff
2 parents 94f39b0 + 4dfd6b0
commit e5000ff
Show file tree

Hide file tree

Showing 19 changed files with 42 additions and 61 deletions.
diff --git a/examples/template-hydrogen-default/shopify.config.js b/examples/template-hydrogen-default/shopify.config.js
@@ -1,4 +1,5 @@
 export default {
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+ storefrontApiVersion: 'unstable',
 };
diff --git a/packages/cli/src/commands/add/shopifyConfig/templates/shopify-config-js.ts b/packages/cli/src/commands/add/shopifyConfig/templates/shopify-config-js.ts
@@ -5,6 +5,7 @@ export default function ({storeDomain, storefrontToken}: TemplateOptions) {
 module.exports = {
  storeDomain: '${storeDomain}',
  storefrontToken: '${storefrontToken}',
+ storefrontApiVersion: 'unstable',
 };
 `;
 }
diff --git a/packages/cli/src/commands/add/shopifyProvider/templates/shopify-config-js.ts b/packages/cli/src/commands/add/shopifyProvider/templates/shopify-config-js.ts
@@ -5,6 +5,7 @@ export default function ({storeDomain, storefrontToken}: TemplateOptions) {
 module.exports = {
  storeDomain: '${storeDomain}',
  storefrontToken: '${storefrontToken}',
+ storefrontApiVersion: 'unstable',
 };
 `;
 }
diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md
@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 - Warn instead of error when a page server component is missing valid exports
 - Adopt upstream version of React Server Components. See [#498](https:/Shopify/hydrogen/pull/498) for breaking changes.
 - The 'locale' option in shopify.config.js had been renamed to 'defaultLocale'
+- dx: rename `graphqlApiVersion` to `storefrontApiVersion` in `shopify.config.js`
 - Bump to latest version of React experimental to include [upstream context bugfix](https:/facebook/react/issues/23089)
 
 ## 0.9.1 - 2022-01-20

diff --git a/packages/hydrogen/src/components/CartProvider/hooks.tsx b/packages/hydrogen/src/components/CartProvider/hooks.tsx
@@ -10,7 +10,7 @@ import {
 import {Cart} from './types';
 
 export function useCartFetch() {
- const {storeDomain, graphqlApiVersion, storefrontToken} = useShop();
+ const {storeDomain, storefrontApiVersion, storefrontToken} = useShop();
 
  return React.useCallback(
  <T, K>({
@@ -21,7 +21,7 @@ export function useCartFetch() {
  variables: T;
  }): Promise<{data: K | undefined; error: any}> => {
  return fetch(
- `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`,
+ `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,
  {
  method: 'POST',
  headers: {
@@ -42,7 +42,7 @@ export function useCartFetch() {
  };
  });
  },
- [storeDomain, graphqlApiVersion, storefrontToken]
+ [storeDomain, storefrontApiVersion, storefrontToken]
  );
 }
 

diff --git a/packages/hydrogen/src/foundation/ShopifyProvider/ShopifyContext.tsx b/packages/hydrogen/src/foundation/ShopifyProvider/ShopifyContext.tsx
@@ -1,5 +1,5 @@
 import {createContext} from 'react';
-import {DEFAULT_API_VERSION, DEFAULT_LOCALE} from '../constants';
+import {DEFAULT_LOCALE} from '../constants';
 import type {ShopifyContextValue} from './types';
 import type {ShopifyConfig} from '../../types';
 
@@ -13,6 +13,6 @@ export function makeShopifyContext(
  locale: shopifyConfig.defaultLocale ?? DEFAULT_LOCALE,
  storeDomain: shopifyConfig?.storeDomain?.replace(/^https?:\/\//, ''),
  storefrontToken: shopifyConfig.storefrontToken,
- graphqlApiVersion: shopifyConfig.graphqlApiVersion ?? DEFAULT_API_VERSION,
+ storefrontApiVersion: shopifyConfig.storefrontApiVersion,
  };
 }
diff --git a/packages/hydrogen/src/foundation/ShopifyProvider/tests/ShopifyProvider.test.tsx b/packages/hydrogen/src/foundation/ShopifyProvider/tests/ShopifyProvider.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {mount} from '@shopify/react-testing';
 import {ShopifyProvider} from '../ShopifyProvider';
 import {ShopifyContext} from '../ShopifyContext';
-import {DEFAULT_API_VERSION, DEFAULT_LOCALE} from '../../constants';
+import {DEFAULT_LOCALE} from '../../constants';
 import {SHOPIFY_CONFIG} from './fixtures';
 
 describe('<ShopifyProvider />', () => {
@@ -25,6 +25,7 @@ describe('<ShopifyProvider />', () => {
  defaultLocale: 'zh-TW',
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '1234',
+ storefrontApiVersion: 'unstable',
  }}
  >
  <Children />
@@ -42,6 +43,7 @@ describe('<ShopifyProvider />', () => {
  shopifyConfig={{
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '1234',
+ storefrontApiVersion: 'unstable',
  }}
  >
  <Children />
@@ -59,6 +61,7 @@ describe('<ShopifyProvider />', () => {
  shopifyConfig={{
  storeDomain: 'https://hydrogen-preview.myshopify.com',
  storefrontToken: '1234',
+ storefrontApiVersion: 'unstable',
  }}
  >
  <Children />
@@ -72,13 +75,13 @@ describe('<ShopifyProvider />', () => {
  });
  });
 
- it('contains graphqlApiVersion from shopifyConfig', () => {
+ it('contains storefrontApiVersion from shopifyConfig', () => {
  const provider = mount(
  <ShopifyProvider
  shopifyConfig={{
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '1234',
- graphqlApiVersion: '2022-04',
+ storefrontApiVersion: '2022-04',
  }}
  >
  <Children />
@@ -87,26 +90,7 @@ describe('<ShopifyProvider />', () => {
 
  expect(provider).toContainReactComponent(ShopifyContext.Provider, {
  value: expect.objectContaining({
- graphqlApiVersion: '2022-04',
- }),
- });
- });
-
- it('contains DEFAULT_API_VERSION as graphqlApiVersion when it is not specify in shopifyConfig', () => {
- const provider = mount(
- <ShopifyProvider
- shopifyConfig={{
- storeDomain: 'hydrogen-preview.myshopify.com',
- storefrontToken: '1234',
- }}
- >
- <Children />
- </ShopifyProvider>
- );
-
- expect(provider).toContainReactComponent(ShopifyContext.Provider, {
- value: expect.objectContaining({
- graphqlApiVersion: DEFAULT_API_VERSION,
+ storefrontApiVersion: '2022-04',
  }),
  });
  });

diff --git a/packages/hydrogen/src/foundation/ShopifyProvider/tests/fixtures.ts b/packages/hydrogen/src/foundation/ShopifyProvider/tests/fixtures.ts
@@ -1,8 +1,8 @@
-import {DEFAULT_API_VERSION, DEFAULT_LOCALE} from '../../constants';
+import {DEFAULT_LOCALE} from '../../constants';
 
 export const SHOPIFY_CONFIG = {
  locale: DEFAULT_LOCALE,
  storeDomain: 'notashop.myshopify.io',
  storefrontToken: 'abc123',
- apiVersion: DEFAULT_API_VERSION,
+ storefrontApiVersion: 'unstable',
 };
diff --git a/packages/hydrogen/src/foundation/ShopifyProvider/types.ts b/packages/hydrogen/src/foundation/ShopifyProvider/types.ts
@@ -4,7 +4,7 @@ export type ShopifyContextValue = {
  locale: string;
  storeDomain: ShopifyConfig['storeDomain'];
  storefrontToken: ShopifyConfig['storefrontToken'];
- graphqlApiVersion: string;
+ storefrontApiVersion: string;
 };
 
 export type ShopifyProviderProps = {

diff --git a/packages/hydrogen/src/foundation/constants.ts b/packages/hydrogen/src/foundation/constants.ts
@@ -1,4 +1,3 @@
 // Note: do not mix this export with other app-only logic
 // to avoid importing unnecessary code in the plugins.
-export const DEFAULT_API_VERSION = 'unstable';
 export const DEFAULT_LOCALE = 'en-us';
diff --git a/packages/hydrogen/src/foundation/useShop/README.md b/packages/hydrogen/src/foundation/useShop/README.md
@@ -18,12 +18,12 @@ export default function MyPage() {
 
 The `useShop` hook returns an object with the following keys:
 
-| Key | Description |
-| ------------------- | --------------------------------------------------------------------------------------- |
-| `locale` | The application locale. Default to `defaultLocale` in `shopify.config.js` then `en-us`. |
-| `storeDomain` | The store domain set in `shopify.config.js`. |
-| `storefrontToken` | The Storefront API token set in `shopify.config.js`. |
-| `graphqlApiVersion` | The GraphQL API version set in `shopify.config.js`. Default to `unstable`. |
+| Key  | Description |
+| ---------------------- | --------------------------------------------------------------------------------------- |
+| `locale`  | The application locale. Default to `defaultLocale` in `shopify.config.js` then `en-us`. |
+| `storeDomain`  | The store domain set in `shopify.config.js`. |
+| `storefrontToken`  | The Storefront API token set in `shopify.config.js`. |
+| `storefrontApiVersion` | The GraphQL Storefront API version set in `shopify.config.js`.   |
 
 ## Related components
 

diff --git a/packages/hydrogen/src/foundation/useShop/docs/1-return-value.md b/packages/hydrogen/src/foundation/useShop/docs/1-return-value.md
@@ -2,9 +2,9 @@
 
 The `useShop` hook returns an object with the following keys:
 
-| Key | Description |
-| ------------------- | ---------------------------------------------------- |
-| `locale` | The locale set in `shopify.config.js`. |
-| `storeDomain` | The store domain set in `shopify.config.js`. |
-| `storefrontToken` | The Storefront API token set in `shopify.config.js`. |
-| `graphqlApiVersion` | The GraphQL API version set in `shopify.config.js`.  |
+| Key  | Description  |
+| ---------------------- | ------------------------------------------------------ |
+| `locale`  | The locale set in `shopify.config.js`.  |
+| `storeDomain`  | The store domain set in `shopify.config.js`.  |
+| `storefrontToken`  | The Storefront API token set in `shopify.config.js`.  |
+| `storefrontApiVersion` | The Storefront API version set in `shopify.config.js`. |
diff --git a/packages/hydrogen/src/framework/graphiql.ts b/packages/hydrogen/src/framework/graphiql.ts
@@ -1,10 +1,4 @@
-import {DEFAULT_API_VERSION} from '../foundation/constants';
-
-export function graphiqlHtml(
- shop: string,
- token: string,
- apiVersion = DEFAULT_API_VERSION
-) {
+export function graphiqlHtml(shop: string, token: string, apiVersion: string) {
  return `<html>
  <head>
  <title>Shopify Storefront API</title>

diff --git a/packages/hydrogen/src/framework/middleware.ts b/packages/hydrogen/src/framework/middleware.ts
@@ -175,14 +175,14 @@ async function respondWithGraphiql(
  );
  }
 
- const {storeDomain, storefrontToken, graphqlApiVersion} = shopifyConfig;
+ const {storeDomain, storefrontToken, storefrontApiVersion} = shopifyConfig;
 
  response.setHeader('Content-Type', 'text/html');
  response.end(
  graphiqlHtml(
  storeDomain?.replace(/^https?:\/\//, ''),
  storefrontToken,
- graphqlApiVersion
+ storefrontApiVersion
  )
  );
 }
diff --git a/packages/hydrogen/src/hooks/useShopQuery/hooks.ts b/packages/hydrogen/src/hooks/useShopQuery/hooks.ts
@@ -96,11 +96,11 @@ function createShopRequest(body: string, locale?: string) {
  const {
  storeDomain,
  storefrontToken,
- graphqlApiVersion,
+ storefrontApiVersion,
  locale: defaultLocale,
  } = useShop();
 
- const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
+ const url = `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`;
 
  return {
  request: new Request(url, {
@@ -112,6 +112,6 @@ function createShopRequest(body: string, locale?: string) {
  },
  body,
  }),
- key: [storeDomain, graphqlApiVersion, body, locale],
+ key: [storeDomain, storefrontApiVersion, body, locale],
  };
 }
diff --git a/packages/hydrogen/src/types.ts b/packages/hydrogen/src/types.ts
@@ -47,7 +47,7 @@ export type ShopifyConfig = {
  defaultLocale?: string;
  storeDomain: string;
  storefrontToken: string;
- graphqlApiVersion?: string;
+ storefrontApiVersion: string;
 };
 
 export type Hook = (

diff --git a/packages/hydrogen/src/utilities/tests/shopifyMount.tsx b/packages/hydrogen/src/utilities/tests/shopifyMount.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {createMount} from '@shopify/react-testing';
-import {DEFAULT_API_VERSION, DEFAULT_LOCALE} from '../../foundation/constants';
+import {DEFAULT_LOCALE} from '../../foundation/constants';
 
 import {ShopifyConfig} from '../../types';
 import {ShopifyProvider} from '../../foundation/ShopifyProvider';
@@ -30,6 +30,6 @@ export function getShopifyConfig(config: Partial<ShopifyConfig> = {}) {
  locale: config.defaultLocale ?? DEFAULT_LOCALE,
  storeDomain: config.storeDomain ?? 'notashop.myshopify.io',
  storefrontToken: config.storefrontToken ?? 'abc123',
- graphqlApiVersion: config.graphqlApiVersion ?? DEFAULT_API_VERSION,
+ storefrontApiVersion: config.storefrontApiVersion ?? 'unstable',
  };
 }
diff --git a/packages/playground/server-components-worker/shopify.config.js b/packages/playground/server-components-worker/shopify.config.js
@@ -2,5 +2,5 @@ export default {
  locale: 'en-us',
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
- graphqlApiVersion: 'unstable',
+ storefrontApiVersion: 'unstable',
 };
diff --git a/packages/playground/server-components/shopify.config.js b/packages/playground/server-components/shopify.config.js
@@ -2,5 +2,5 @@ export default {
  locale: 'en-us',
  storeDomain: 'hydrogen-preview.myshopify.com',
  storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
- graphqlApiVersion: 'unstable',
+ storefrontApiVersion: 'unstable',
 };