diff --git a/.changeset/witty-maps-ring.md b/.changeset/witty-maps-ring.md new file mode 100644 index 00000000..ced261f0 --- /dev/null +++ b/.changeset/witty-maps-ring.md @@ -0,0 +1,10 @@ +--- +'@shopify/hydrogen-react': patch +--- + +Add a new utility helper for getting the myshopify domain for the site: + +```ts +const client = createStorefrontClient(...); +client.getShopifyDomain() === `https://testing.myshopify.com`; +``` diff --git a/packages/react/README.md b/packages/react/README.md index f55b055c..b02e3de0 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -59,6 +59,7 @@ const client = createStorefrontClient({ export const getStorefrontApiUrl = client.getStorefrontApiUrl; export const getPrivateTokenHeaders = client.getPrivateTokenHeaders; +export const getShopifyDomain = client.getShopifyDomain; ``` You can then use this in your server-side queries. Here's an example of using it for [NextJS's `getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props): @@ -84,6 +85,31 @@ export async function getServerSideProps() { } ``` +You can also use this to proxy the liquid online store: + +```ts +// Next.js API route support: https://nextjs.org/docs/api-routes/introduction +import {getShopifyDomain} from '../shopify-client.js'; + +export default function handler(req, res) { + fetch(getShopifyDomain() + '/products', { + headers: { + /** forward some of the headers from the original request **/ + }, + }) + .then((resp) => resp.text()) + .then((text) => res.status(200).send(text)) + .catch((error) => { + console.error( + `Error proxying the online store: ${ + error instanceof Error ? error.stack : error + }` + ); + res.status(500).send('Server error occurred'); + }); +} +``` + ### (Optional) Set the content type for the Storefront client By default, the Storefront client sends the `"content-type": "application/json"` header. Use the `json` content type when you have GraphQL variables and when the body is an object with the following shape: diff --git a/packages/react/src/storefront-client.test.ts b/packages/react/src/storefront-client.test.ts index 3f089146..105b0bb3 100644 --- a/packages/react/src/storefront-client.test.ts +++ b/packages/react/src/storefront-client.test.ts @@ -47,6 +47,24 @@ describe(`createStorefrontClient`, () => { }); }); + describe(`getShopifyDomain`, () => { + it(`generates a URL`, () => { + const client = createStorefrontClient(generateConfig()); + + expect(client.getShopifyDomain()).toBe(`https://testing.myshopify.com`); + }); + + it(`allows overrides`, () => { + const client = createStorefrontClient(generateConfig()); + + expect( + client.getShopifyDomain({ + storeDomain: 'newdomain', + }) + ).toBe(`https://newdomain.myshopify.com`); + }); + }); + describe(`getStorefrontApiUrl`, () => { it(`generates a URL`, () => { const client = createStorefrontClient(generateConfig()); diff --git a/packages/react/src/storefront-client.ts b/packages/react/src/storefront-client.ts index edcffa63..2069a445 100644 --- a/packages/react/src/storefront-client.ts +++ b/packages/react/src/storefront-client.ts @@ -33,6 +33,11 @@ export function createStorefrontClient({ } return { + getShopifyDomain(overrideProps) { + return `https://${ + overrideProps?.storeDomain ?? storeDomain + }.myshopify.com`; + }, getStorefrontApiUrl(overrideProps) { return `https://${ overrideProps?.storeDomain ?? storeDomain @@ -128,6 +133,16 @@ type OverrideTokenHeaderProps = Partial< >; type StorefrontClientReturn = { + /** + * Creates the fully-qualified URL to your myshopify.com domain. + * + * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`: + * + * - `storeDomain` + */ + getShopifyDomain: ( + props?: Partial> + ) => string; /** * Creates the fully-qualified URL to your store's GraphQL endpoint. *