@shopify/hydrogen 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 0.16.0
+
+### Patch Changes
+
+- [#1082](https://github.com/Shopify/hydrogen/pull/1082) [`bd14340c`](https://github.com/Shopify/hydrogen/commit/bd14340c3099a0bf375a5879410cdf0697ed22f6) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `useUrl()` to allow a developer to subscribe to a reactive version of the current router location.
+
+  Example:
+
+  ```jsx
+  import {useUrl} from '@shopify/hydrogen/client';
+
+  function MyClientComponent() {
+    const url = useUrl();
+
+    useEffect(() => {
+      // Record navigation, analytics, etc
+    }, [url]);
+  }
+  ```
+
+* [#1075](https://github.com/Shopify/hydrogen/pull/1075) [`05dea552`](https://github.com/Shopify/hydrogen/commit/05dea552c90862a125b5111993003355a019b556) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly set buyer IP and secret token for API Route queryShop helper
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/esnext/client.d.ts

@@ -2,6 +2,7 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
+export * from './foundation/useUrl';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';

package/dist/esnext/client.js

@@ -2,6 +2,7 @@ export * from './components';
 export * from './hooks';
 export * from './foundation/useServerState';
 export * from './foundation/useShop';
+export * from './foundation/useUrl';
 export * from './foundation/ServerStateProvider';
 export { Head } from './foundation/Head';
 export * from './utilities';

package/dist/esnext/constants.d.ts

@@ -1,3 +1,7 @@
 export declare const RSC_PATHNAME = "/__rsc";
 export declare const EVENT_PATHNAME = "/__event";
 export declare const EVENT_PATHNAME_REGEX: RegExp;
+export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
+export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
+export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
+export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";

package/dist/esnext/constants.js

@@ -1,3 +1,7 @@
 export const RSC_PATHNAME = '/__rsc';
 export const EVENT_PATHNAME = '/__event';
 export const EVENT_PATHNAME_REGEX = new RegExp(`^${EVENT_PATHNAME}\/`);
+export const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
+export const STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
+export const STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
+export const STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { RSC_PATHNAME } from '../../constants';
+import { useLocation } from '../Router/BrowserRouter.client';
 import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 /**
  * The `useUrl` hook retrieves the current URL in a server or client component.
  */
 export function useUrl() {
     var _a, _b;
+    const location = useLocation();
     if (META_ENV_SSR) {
         const serverUrl = new URL(useEnvContext((req) => req.url));
         if (serverUrl.pathname === RSC_PATHNAME) {
@@ -14,5 +17,9 @@ export function useUrl() {
         }
         return new URL(serverUrl);
     }
-    return new URL(window.location.href);
+    /**
+     * We return a `URL` object instead of passing through `location` because
+     * the URL object contains important info like hostname, etc.
+     */
+    return useMemo(() => new URL(window.location.href), [location]);
 }

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -7,6 +7,7 @@ import { injectGraphQLTracker } from '../../utilities/graphql-tracker';
 import { sendMessageToClient } from '../../utilities/devtools';
 import { fetchSync } from '../../foundation/fetchSync/server/fetchSync';
 import { META_ENV_SSR } from '../../foundation/ssr-interop';
+import { getStorefrontApiRequestHeaders } from '../../utilities/storefrontApi';
 // Check if the response body has GraphQL errors
 // https://spec.graphql.org/June2018/#sec-Response-Format
 const shouldCacheResponse = ([body]) => { var _a; return !((_a = JSON.parse(body)) === null || _a === void 0 ? void 0 : _a.errors); };
@@ -114,26 +115,13 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     return data;
 }
 function useCreateShopRequest(body) {
-    var _a;
     const { storeDomain, storefrontToken, storefrontApiVersion } = useShop();
     const request = useServerRequest();
-    const secretToken = typeof Oxygen !== 'undefined'
-        ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a.SHOPIFY_STOREFRONT_API_SECRET_TOKEN
-        : null;
     const buyerIp = request.getBuyerIp();
-    const extraHeaders = {};
-    /**
-     * Only pass one type of storefront token at a time.
-     */
-    if (secretToken) {
-        extraHeaders['Shopify-Storefront-Private-Token'] = secretToken;
-    }
-    else {
-        extraHeaders['X-Shopify-Storefront-Access-Token'] = storefrontToken;
-    }
-    if (buyerIp) {
-        extraHeaders['Shopify-Storefront-Buyer-IP'] = buyerIp;
-    }
+    const extraHeaders = getStorefrontApiRequestHeaders({
+        buyerIp,
+        storefrontToken,
+    });
     return {
         key: [storeDomain, storefrontApiVersion, body],
         url: `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,

package/dist/esnext/utilities/apiRoutes.d.ts

@@ -1,4 +1,5 @@
 import { ImportGlobEagerOutput, ShopifyConfig } from '../types';
+import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
 import type { ASTNode } from 'graphql';
 declare type RouteParams = Record<string, string>;
 declare type RequestOptions = {
@@ -29,8 +30,6 @@ interface QueryShopArgs {
     query: ASTNode | string;
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
-    /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
-    locale?: string;
 }
-export declare function renderApiRoute(request: Request, route: ApiRouteMatch, shopifyConfig: ShopifyConfig): Promise<Response | Request>;
+export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: ShopifyConfig): Promise<Response | Request>;
 export {};

package/dist/esnext/utilities/apiRoutes.js

@@ -1,6 +1,7 @@
 import { matchPath } from './matchPath';
 import { getLoggerWithContext, logServerResponse } from '../utilities/log/';
 import { fetchBuilder, graphqlRequestBody } from './fetch';
+import { getStorefrontApiRequestHeaders } from './storefrontApi';
 let memoizedRoutes = [];
 let memoizedPages = {};
 export function getApiRoutes(pages, topLevelPath = '*') {
@@ -64,17 +65,20 @@ export function getApiRouteFromURL(url, routes) {
         hasServerComponent: foundRoute.hasServerComponent,
     };
 }
-function queryShopBuilder(shopifyConfig) {
-    return async function queryShop({ query, variables, locale, }) {
-        var _a;
-        const { storeDomain, storefrontApiVersion, storefrontToken, defaultLocale } = shopifyConfig;
+function queryShopBuilder(shopifyConfig, request) {
+    return async function queryShop({ query, variables, }) {
+        const { storeDomain, storefrontApiVersion, storefrontToken } = shopifyConfig;
+        const buyerIp = request.getBuyerIp();
+        const extraHeaders = getStorefrontApiRequestHeaders({
+            buyerIp,
+            storefrontToken,
+        });
         const fetcher = fetchBuilder(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',
             body: graphqlRequestBody(query, variables),
             headers: {
-                'X-Shopify-Storefront-Access-Token': storefrontToken,
-                'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
                 'Content-Type': 'application/json',
+                ...extraHeaders,
             },
         });
         return await fetcher();
@@ -87,7 +91,7 @@ export async function renderApiRoute(request, route, shopifyConfig) {
     try {
         response = await route.resource(request, {
             params: route.params,
-            queryShop: queryShopBuilder(shopifyConfig),
+            queryShop: queryShopBuilder(shopifyConfig, request),
         });
         if (!(response instanceof Response || response instanceof Request)) {
             if (typeof response === 'string' || response instanceof String) {

package/dist/esnext/utilities/storefrontApi.d.ts

@@ -0,0 +1,4 @@
+export declare function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }: {
+    buyerIp?: string | null;
+    storefrontToken: string;
+}): Record<string, any>;

package/dist/esnext/utilities/storefrontApi.js

@@ -0,0 +1,21 @@
+import { OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE, STOREFRONT_API_SECRET_TOKEN_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, STOREFRONT_API_BUYER_IP_HEADER, } from '../constants';
+export function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
+    var _a;
+    const headers = {};
+    const secretToken = typeof Oxygen !== 'undefined'
+        ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a[OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
+        : null;
+    /**
+     * Only pass one type of storefront token at a time.
+     */
+    if (secretToken) {
+        headers[STOREFRONT_API_SECRET_TOKEN_HEADER] = secretToken;
+    }
+    else {
+        headers[STOREFRONT_API_PUBLIC_TOKEN_HEADER] = storefrontToken;
+    }
+    if (buyerIp) {
+        headers[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+    }
+    return headers;
+}

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.15.0";
+export declare const LIB_VERSION = "0.16.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.15.0';
+export const LIB_VERSION = '0.16.0';

package/dist/node/constants.d.ts

@@ -1,3 +1,7 @@
 export declare const RSC_PATHNAME = "/__rsc";
 export declare const EVENT_PATHNAME = "/__event";
 export declare const EVENT_PATHNAME_REGEX: RegExp;
+export declare const OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = "SHOPIFY_STOREFRONT_API_SECRET_TOKEN";
+export declare const STOREFRONT_API_SECRET_TOKEN_HEADER = "Shopify-Storefront-Private-Token";
+export declare const STOREFRONT_API_PUBLIC_TOKEN_HEADER = "X-Shopify-Storefront-Access-Token";
+export declare const STOREFRONT_API_BUYER_IP_HEADER = "Shopify-Storefront-Buyer-IP";

package/dist/node/constants.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EVENT_PATHNAME_REGEX = exports.EVENT_PATHNAME = exports.RSC_PATHNAME = void 0;
+exports.STOREFRONT_API_BUYER_IP_HEADER = exports.STOREFRONT_API_PUBLIC_TOKEN_HEADER = exports.STOREFRONT_API_SECRET_TOKEN_HEADER = exports.OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = exports.EVENT_PATHNAME_REGEX = exports.EVENT_PATHNAME = exports.RSC_PATHNAME = void 0;
 exports.RSC_PATHNAME = '/__rsc';
 exports.EVENT_PATHNAME = '/__event';
 exports.EVENT_PATHNAME_REGEX = new RegExp(`^${exports.EVENT_PATHNAME}\/`);
+exports.OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE = 'SHOPIFY_STOREFRONT_API_SECRET_TOKEN';
+exports.STOREFRONT_API_SECRET_TOKEN_HEADER = 'Shopify-Storefront-Private-Token';
+exports.STOREFRONT_API_PUBLIC_TOKEN_HEADER = 'X-Shopify-Storefront-Access-Token';
+exports.STOREFRONT_API_BUYER_IP_HEADER = 'Shopify-Storefront-Buyer-IP';

package/dist/node/utilities/apiRoutes.d.ts

@@ -1,4 +1,5 @@
 import { ImportGlobEagerOutput, ShopifyConfig } from '../types';
+import type { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
 import type { ASTNode } from 'graphql';
 declare type RouteParams = Record<string, string>;
 declare type RequestOptions = {
@@ -29,8 +30,6 @@ interface QueryShopArgs {
     query: ASTNode | string;
     /** An object of the variables for the GraphQL query. */
     variables?: Record<string, any>;
-    /** A string corresponding to a valid locale identifier like `en-us` used to make the request. */
-    locale?: string;
 }
-export declare function renderApiRoute(request: Request, route: ApiRouteMatch, shopifyConfig: ShopifyConfig): Promise<Response | Request>;
+export declare function renderApiRoute(request: ServerComponentRequest, route: ApiRouteMatch, shopifyConfig: ShopifyConfig): Promise<Response | Request>;
 export {};

package/dist/node/utilities/apiRoutes.js

@@ -4,6 +4,7 @@ exports.renderApiRoute = exports.getApiRouteFromURL = exports.getApiRoutes = voi
 const matchPath_1 = require("./matchPath");
 const log_1 = require("../utilities/log/");
 const fetch_1 = require("./fetch");
+const storefrontApi_1 = require("./storefrontApi");
 let memoizedRoutes = [];
 let memoizedPages = {};
 function getApiRoutes(pages, topLevelPath = '*') {
@@ -69,17 +70,20 @@ function getApiRouteFromURL(url, routes) {
     };
 }
 exports.getApiRouteFromURL = getApiRouteFromURL;
-function queryShopBuilder(shopifyConfig) {
-    return async function queryShop({ query, variables, locale, }) {
-        var _a;
-        const { storeDomain, storefrontApiVersion, storefrontToken, defaultLocale } = shopifyConfig;
+function queryShopBuilder(shopifyConfig, request) {
+    return async function queryShop({ query, variables, }) {
+        const { storeDomain, storefrontApiVersion, storefrontToken } = shopifyConfig;
+        const buyerIp = request.getBuyerIp();
+        const extraHeaders = (0, storefrontApi_1.getStorefrontApiRequestHeaders)({
+            buyerIp,
+            storefrontToken,
+        });
         const fetcher = (0, fetch_1.fetchBuilder)(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',
             body: (0, fetch_1.graphqlRequestBody)(query, variables),
             headers: {
-                'X-Shopify-Storefront-Access-Token': storefrontToken,
-                'Accept-Language': (_a = locale) !== null && _a !== void 0 ? _a : defaultLocale,
                 'Content-Type': 'application/json',
+                ...extraHeaders,
             },
         });
         return await fetcher();
@@ -92,7 +96,7 @@ async function renderApiRoute(request, route, shopifyConfig) {
     try {
         response = await route.resource(request, {
             params: route.params,
-            queryShop: queryShopBuilder(shopifyConfig),
+            queryShop: queryShopBuilder(shopifyConfig, request),
         });
         if (!(response instanceof Response || response instanceof Request)) {
             if (typeof response === 'string' || response instanceof String) {

package/dist/node/utilities/storefrontApi.d.ts

@@ -0,0 +1,4 @@
+export declare function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }: {
+    buyerIp?: string | null;
+    storefrontToken: string;
+}): Record<string, any>;

package/dist/node/utilities/storefrontApi.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStorefrontApiRequestHeaders = void 0;
+const constants_1 = require("../constants");
+function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
+    var _a;
+    const headers = {};
+    const secretToken = typeof Oxygen !== 'undefined'
+        ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a[constants_1.OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE]
+        : null;
+    /**
+     * Only pass one type of storefront token at a time.
+     */
+    if (secretToken) {
+        headers[constants_1.STOREFRONT_API_SECRET_TOKEN_HEADER] = secretToken;
+    }
+    else {
+        headers[constants_1.STOREFRONT_API_PUBLIC_TOKEN_HEADER] = storefrontToken;
+    }
+    if (buyerIp) {
+        headers[constants_1.STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;
+    }
+    return headers;
+}
+exports.getStorefrontApiRequestHeaders = getStorefrontApiRequestHeaders;

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.15.0";
+export declare const LIB_VERSION = "0.16.0";

package/dist/node/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '0.15.0';
+exports.LIB_VERSION = '0.16.0';

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",