@shopify/hydrogen 0.7.1 → 0.8.0

package/dist/esnext/components/CartEstimatedCost/CartEstimatedCost.client.d.ts

@@ -7,7 +7,7 @@ export interface CartEstimatedCostProps {
     children?: React.ReactNode;
 }
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */

package/dist/esnext/components/CartEstimatedCost/CartEstimatedCost.client.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useCart } from '../CartProvider';
 import { Money } from '../Money';
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */

package/dist/esnext/components/LocalizationProvider/index.d.ts

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

package/dist/esnext/components/LocalizationProvider/index.js

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

package/dist/esnext/components/ProductPrice/ProductPrice.client.d.ts

@@ -8,8 +8,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice`
- * or `minVariantPrice`, for either the regular price or compare at price range.
- * It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
 export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;

package/dist/esnext/components/ProductPrice/ProductPrice.client.js

@@ -3,9 +3,7 @@ import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice`
- * or `minVariantPrice`, for either the regular price or compare at price range.
- * It must be a descendent of the `ProductProvider` component.
+ * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
 export function ProductPrice(props) {
     var _a, _b, _c, _d;

package/dist/esnext/components/UnitPrice/UnitPrice.client.d.ts

@@ -13,8 +13,7 @@ export interface UnitPriceProps {
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.

package/dist/esnext/components/UnitPrice/UnitPrice.client.js

@@ -4,8 +4,7 @@ import { Money } from '../Money';
 import { UnitPriceFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.

package/dist/esnext/components/index.d.ts

@@ -28,6 +28,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';

package/dist/esnext/components/index.js

@@ -19,6 +19,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';
 export { ProductDescription } from './ProductDescription';

package/dist/esnext/entry-client.js

@@ -6,7 +6,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { HelmetProvider } from 'react-helmet-async';
 import { useServerResponse } from './framework/Hydration/Cache.client';
 import { ServerStateProvider, ServerStateRouter } from './client';
-import { QueryProvider } from './hooks';
 const renderHydrogen = async (ClientWrapper) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -25,11 +24,10 @@ function Content({ clientWrapper: ClientWrapper }) {
     });
     const response = useServerResponse(serverState);
     return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(QueryProvider, null,
-            React.createElement(HelmetProvider, null,
-                React.createElement(BrowserRouter, null,
-                    React.createElement(ServerStateRouter, null),
-                    React.createElement(ClientWrapper, null, response.read()))))));
+        React.createElement(HelmetProvider, null,
+            React.createElement(BrowserRouter, null,
+                React.createElement(ServerStateRouter, null),
+                React.createElement(ClientWrapper, null, response.read())))));
 }
 function Error({ error }) {
     return (React.createElement("div", { style: { padding: '1em' } },

package/dist/esnext/entry-server.js

@@ -12,8 +12,8 @@ import { HelmetProvider } from 'react-helmet-async';
 import { Html } from './framework/Hydration/Html';
 import { HydrationWriter } from './framework/Hydration/writer.server';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
-import { dehydrate } from 'react-query/hydration';
 import { getCacheControlHeader } from './framework/cache';
+import { RenderCacheProvider } from './foundation/RenderCacheProvider';
 /**
  * react-dom/unstable-fizz provides different entrypoints based on runtime:
  * - `renderToReadableStream` for "browser" (aka worker)
@@ -173,9 +173,11 @@ const renderHydrogen = (App, hook) => {
 function buildReactApp({ App, state, context, request, dev, }) {
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
-    const ReactApp = (props) => (React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
-        React.createElement(HelmetProvider, { context: helmetContext },
-            React.createElement(App, { ...props, request: request, response: componentResponse }))));
+    const renderCache = {};
+    const ReactApp = (props) => (React.createElement(RenderCacheProvider, { cache: renderCache },
+        React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
+            React.createElement(HelmetProvider, { context: helmetContext },
+                React.createElement(App, { ...props, request: request, response: componentResponse })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -287,18 +289,9 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
  * the results in a context object, and re-render.
  */
 async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest) {
-    const hydrationContext = {};
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
-        React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }))) : (React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }));
+        React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
     await ssrPrepass(app);
-    /**
-     * Dehydrate all the queries made during the prepass above and store
-     * them in the context object to be used for the next render pass.
-     * This prevents rendering the Suspense fallback in `renderToString`.
-     */
-    if (hydrationContext.queryClient) {
-        hydrationContext.dehydratedState = dehydrate(hydrationContext.queryClient);
-    }
     const body = renderToString(app);
     return isReactHydrationRequest
         ? generateWireSyntaxFromRenderedHtml(body)

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare const RenderCacheContext: import("react").Context<RenderCacheProviderProps>;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const RenderCacheContext = createContext({
+    cache: {},
+});

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheProvider.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare function RenderCacheProvider({ cache, children, }: RenderCacheProviderProps): JSX.Element;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheProvider.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+export function RenderCacheProvider({ cache, children, }) {
+    return (React.createElement(RenderCacheContext.Provider, { value: { cache } }, children));
+}

package/dist/esnext/foundation/RenderCacheProvider/hook.d.ts

@@ -0,0 +1,11 @@
+import type { QueryKey } from '../../types';
+import type { RenderCacheProviderProps, RenderCacheResult } from './types';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export declare function useRenderCache(): RenderCacheProviderProps;
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export declare function useRenderCacheData<T>(key: QueryKey, fetcher: () => Promise<T>): RenderCacheResult<T>;

package/dist/esnext/foundation/RenderCacheProvider/hook.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+import { hashKey } from '../../framework/cache';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export function useRenderCache() {
+    const context = useContext(RenderCacheContext);
+    if (!context) {
+        throw new Error('No RenderCache Context found');
+    }
+    return context;
+}
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export function useRenderCacheData(key, fetcher) {
+    const cacheKey = hashKey(key);
+    const { cache } = useRenderCache();
+    if (!cache[cacheKey]) {
+        let data;
+        let promise;
+        cache[cacheKey] = () => {
+            if (data !== undefined)
+                return data;
+            if (!promise) {
+                promise = fetcher().then((r) => (data = { data: r }), (e) => (data = { data: e }));
+            }
+            throw promise;
+        };
+    }
+    return cache[cacheKey]();
+}

package/dist/esnext/foundation/RenderCacheProvider/index.d.ts

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/index.js

@@ -0,0 +1 @@
+export { RenderCacheProvider } from './RenderCacheProvider';

package/dist/esnext/foundation/RenderCacheProvider/types.d.ts

@@ -0,0 +1,11 @@
+export declare type RenderCache = {
+    [key: string]: () => unknown;
+};
+export declare type RenderCacheProviderProps = {
+    /** A cache to hold all queries performed within a render request */
+    cache: RenderCache;
+    children?: React.ReactNode;
+};
+export interface RenderCacheResult<T> {
+    data: T;
+}

package/dist/esnext/foundation/RenderCacheProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.d.ts

@@ -1,8 +1,6 @@
 import { ReactElement } from 'react';
 import { ShopifyConfig } from '../../types';
-import { ReactQueryHydrationContext } from './types';
-export declare function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }: {
+export declare function ShopifyServerProvider({ children, shopifyConfig, }: {
     children: ReactElement;
     shopifyConfig: ShopifyConfig;
-    hydrationContext: ReactQueryHydrationContext;
 }): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyServerProvider.server.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { ShopifyProvider } from './ShopifyProvider';
-import { QueryProvider } from '../../foundation/useQuery';
-export function ShopifyServerProvider({ children, shopifyConfig, hydrationContext, }) {
-    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig },
-        React.createElement(QueryProvider, { hydrationContext: hydrationContext }, children)));
+export function ShopifyServerProvider({ children, shopifyConfig, }) {
+    return (React.createElement(ShopifyProvider, { shopifyConfig: shopifyConfig }, children));
 }

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,4 +1,3 @@
-import type { QueryClient } from 'react-query';
 import { ShopifyConfig } from '../../types';
 export declare type ShopifyProviderValue = ShopifyConfig;
 export declare type ShopifyProviderProps = {
@@ -8,7 +7,3 @@ export declare type ShopifyProviderProps = {
     children?: React.ReactNode;
     manager?: any;
 };
-export interface ReactQueryHydrationContext {
-    queryClient?: QueryClient;
-    dehydratedState?: any;
-}

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -1,15 +1,17 @@
-import type { UseQueryOptions, QueryKey, QueryFunction } from 'react-query';
-import { CacheOptions } from '../../types';
-export interface HydrogenUseQueryOptions<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> extends UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> {
+import type { CacheOptions, QueryKey } from '../../types';
+import type { RenderCacheResult } from '../RenderCacheProvider/types';
+export interface HydrogenUseQueryOptions {
     cache: CacheOptions;
 }
 /**
- * The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook is a wrapper around Suspense calls and
+ * global runtime's Cache if it exist.
+ * It supports Suspense calls on the server and on the client.
  */
 export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */
 key: QueryKey, 
 /** An asynchronous query function like `fetch` which returns data. */
-queryFn: QueryFunction<T>, 
+queryFn: () => Promise<T>, 
 /** Options including `cache` to manage the cache behavior of the sub-request. */
-queryOptions?: HydrogenUseQueryOptions<T, Error, T, QueryKey>): import("react-query").UseQueryResult<T, Error>;
+queryOptions?: HydrogenUseQueryOptions): RenderCacheResult<T>;

package/dist/esnext/foundation/useQuery/hooks.js

@@ -1,8 +1,10 @@
-import { useQuery as useReactQuery } from 'react-query';
 import { deleteItemFromCache, getItemFromCache, isStale, setItemInCache, } from '../../framework/cache';
 import { runDelayedFunction } from '../../framework/runtime';
+import { useRenderCacheData } from '../RenderCacheProvider/hook';
 /**
- * The `useQuery` hook is a wrapper around `useQuery` from `react-query`. It supports Suspense calls on the server and on the client.
+ * The `useQuery` hook is a wrapper around Suspense calls and
+ * global runtime's Cache if it exist.
+ * It supports Suspense calls on the server and on the client.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */
@@ -11,14 +13,10 @@ key,
 queryFn, 
 /** Options including `cache` to manage the cache behavior of the sub-request. */
 queryOptions) {
+    return useRenderCacheData(key, cachedQueryFnBuilder(key, queryFn, queryOptions));
+}
+function cachedQueryFnBuilder(key, queryFn, queryOptions) {
     const resolvedQueryOptions = {
-        /**
-         * Prevent react-query from from retrying request failures. This sometimes bites developers
-         * because they will get back a 200 GraphQL response with errors, but not properly check
-         * for errors. This leads to a failed `queryFn` and react-query keeps running it, leading
-         * to a much slower response time and a poor developer experience.
-         */
-        retry: false,
         ...(queryOptions !== null && queryOptions !== void 0 ? queryOptions : {}),
     };
     /**
@@ -27,7 +25,7 @@ queryOptions) {
     async function cachedQueryFn() {
         const cacheResponse = await getItemFromCache(key);
         async function generateNewOutput() {
-            return await queryFn({});
+            return await queryFn();
         }
         if (cacheResponse) {
             const [output, response] = cacheResponse;
@@ -64,5 +62,5 @@ queryOptions) {
         runDelayedFunction(async () => await setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }
-    return useReactQuery(key, cachedQueryFn, resolvedQueryOptions);
+    return cachedQueryFn;
 }

package/dist/esnext/foundation/useQuery/index.d.ts

@@ -1,2 +1 @@
 export { useQuery } from './hooks';
-export { QueryProvider } from './QueryProvider';

package/dist/esnext/foundation/useQuery/index.js

@@ -1,2 +1 @@
 export { useQuery } from './hooks';
-export { QueryProvider } from './QueryProvider';

package/dist/esnext/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/esnext/framework/cache.js

@@ -21,7 +21,7 @@ export function generateCacheControlHeader(options) {
 export function getCacheControlHeader({ dev }) {
     return dev ? 'cache-control-preview' : 'cache-control';
 }
-function hashKey(key) {
+export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**
      * TODO: Smarter hash

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js

@@ -16,6 +16,17 @@ export default () => {
             },
             build: {
                 sourcemap: true,
+                /**
+                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                 * We don't want this in our workers runtime, because `require` is not supported.
+                 */
+                rollupOptions: process.env.WORKER
+                    ? {
+                        output: {
+                            format: 'es',
+                        },
+                    }
+                    : {},
             },
             ssr: {
                 external: ['isomorphic-dompurify'],

package/dist/esnext/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -72,19 +72,7 @@ export default () => {
             }
         },
     };
-    // Mitigation for upcoming minor Vite update
-    // https://github.com/vitejs/vite/pull/5253
-    // TO-DO: When the vite package is updated with the above Vite PR,
-    // clean up this function and treat `options` param as objects
-    // from this point forward
-    // Timeline: Targetting for Vite 2.7
     function isSSR(options) {
-        if (typeof options === 'boolean') {
-            return options;
-        }
-        if (typeof options === 'object') {
-            return !!options.ssr;
-        }
-        return false;
+        return !!(options === null || options === void 0 ? void 0 : options.ssr);
     }
 };

package/dist/esnext/handle-event.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/esnext/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useProductOptions } from './useProductOptions';
 export * from './useProductOptions/types';
-export { useQuery, QueryProvider } from '../foundation/useQuery';
+export { useQuery } from '../foundation/useQuery';
 export { useMoney } from './useMoney';
 export { useMeasurement } from './useMeasurement';
 export { useParsedMetafields } from './useParsedMetafields';

package/dist/esnext/hooks/index.js

@@ -1,6 +1,6 @@
 export { useProductOptions } from './useProductOptions';
 export * from './useProductOptions/types';
-export { useQuery, QueryProvider } from '../foundation/useQuery';
+export { useQuery } from '../foundation/useQuery';
 export { useMoney } from './useMoney';
 export { useMeasurement } from './useMeasurement';
 export { useParsedMetafields } from './useParsedMetafields';

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

@@ -11,21 +11,12 @@ export function useShopQuery({ query, variables = {}, cache = {}, }) {
     if (isClient()) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
     }
-    const { storeDomain, storefrontToken, graphqlApiVersion } = useShop();
-    const body = query ? graphqlRequestBody(query, variables) : "";
-    const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
-    const request = new Request(url, {
-        method: 'POST',
-        headers: {
-            'X-Shopify-Storefront-Access-Token': storefrontToken,
-            'content-type': 'application/json',
-        },
-        body,
-    });
-    const { data } = useQuery([storeDomain, graphqlApiVersion, body], query
+    const body = query ? graphqlRequestBody(query, variables) : '';
+    const { request, key } = createShopRequest(body);
+    const { data } = useQuery(key, query
         ? fetchBuilder(request)
-        // If no query, avoid calling SFAPI & return nothing
-        : async () => ({ data: undefined, errors: undefined }), { cache });
+        : // If no query, avoid calling SFAPI & return nothing
+            async () => ({ data: undefined, errors: undefined }), { cache });
     /**
      * GraphQL errors get printed to the console but ultimately
      * get returned to the consumer.
@@ -42,3 +33,18 @@ export function useShopQuery({ query, variables = {}, cache = {}, }) {
     }
     return data;
 }
+function createShopRequest(body) {
+    const { storeDomain, storefrontToken, graphqlApiVersion } = useShop();
+    const url = `https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`;
+    return {
+        request: new Request(url, {
+            method: 'POST',
+            headers: {
+                'X-Shopify-Storefront-Access-Token': storefrontToken,
+                'content-type': 'application/json',
+            },
+            body,
+        }),
+        key: [storeDomain, graphqlApiVersion, body],
+    };
+}

package/dist/esnext/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

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

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/esnext/utilities/suspense.js

@@ -11,14 +11,8 @@ export function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.7.1";
+export declare const LIB_VERSION = "0.8.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '0.7.1';
+export const LIB_VERSION = '0.8.0';

package/dist/node/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/node/framework/cache.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
+exports.isStale = exports.deleteItemFromCache = exports.setItemInCache = exports.getItemFromCache = exports.hashKey = exports.getCacheControlHeader = exports.generateCacheControlHeader = void 0;
 const runtime_1 = require("./runtime");
 const DEFAULT_SUBREQUEST_CACHE_OPTIONS = {
     maxAge: 1,
@@ -33,6 +33,7 @@ function hashKey(key) {
      */
     return rawKey.map((k) => JSON.stringify(k)).join('');
 }
+exports.hashKey = hashKey;
 /**
  * Cache API is weird. We just need a full URL, so we make one up.
  */

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.js

@@ -18,6 +18,17 @@ exports.default = () => {
             },
             build: {
                 sourcemap: true,
+                /**
+                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                 * We don't want this in our workers runtime, because `require` is not supported.
+                 */
+                rollupOptions: process.env.WORKER
+                    ? {
+                        output: {
+                            format: 'es',
+                        },
+                    }
+                    : {},
             },
             ssr: {
                 external: ['isomorphic-dompurify'],

package/dist/node/framework/plugins/vite-plugin-react-server-components-shim.js

@@ -77,19 +77,7 @@ exports.default = () => {
             }
         },
     };
-    // Mitigation for upcoming minor Vite update
-    // https://github.com/vitejs/vite/pull/5253
-    // TO-DO: When the vite package is updated with the above Vite PR,
-    // clean up this function and treat `options` param as objects
-    // from this point forward
-    // Timeline: Targetting for Vite 2.7
     function isSSR(options) {
-        if (typeof options === 'boolean') {
-            return options;
-        }
-        if (typeof options === 'object') {
-            return !!options.ssr;
-        }
-        return false;
+        return !!(options === null || options === void 0 ? void 0 : options.ssr);
     }
 };

package/dist/node/handle-event.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/node/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

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

@@ -2,6 +2,6 @@
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.
  */
-export declare function wrapPromise(promise: Promise<any>): {
-    read: () => any;
+export declare function wrapPromise<T>(promise: Promise<T>): {
+    read: () => T;
 };

package/dist/node/utilities/suspense.js

@@ -14,14 +14,8 @@ function wrapPromise(promise) {
     }, (err) => {
         status = 'error';
         response = err;
-        throw err;
     });
     const read = () => {
-        /**
-         * TODO: This logic doesn't hold up when an error is thrown. For some reason.
-         * We instead throw the exception above in the suspender. We should revisit
-         * this and add a better server fetch implementation.
-         */
         switch (status) {
             case 'pending':
                 throw suspender;

package/dist/node/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "0.7.1";
+export declare const LIB_VERSION = "0.8.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.7.1';
+exports.LIB_VERSION = '0.8.0';

package/dist/worker/framework/cache.d.ts

@@ -1,5 +1,4 @@
-import type { QueryKey } from 'react-query';
-import type { CacheOptions } from '../types';
+import type { CacheOptions, QueryKey } from '../types';
 export declare function generateCacheControlHeader(options: CacheOptions): string;
 /**
  * Use a preview header during development.
@@ -9,6 +8,7 @@ export declare function generateCacheControlHeader(options: CacheOptions): strin
 export declare function getCacheControlHeader({ dev }: {
     dev?: boolean;
 }): "cache-control-preview" | "cache-control";
+export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple
  * containing the `JSON.parse` version of the response as well

package/dist/worker/framework/cache.js

@@ -21,7 +21,7 @@ export function generateCacheControlHeader(options) {
 export function getCacheControlHeader({ dev }) {
     return dev ? 'cache-control-preview' : 'cache-control';
 }
-function hashKey(key) {
+export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**
      * TODO: Smarter hash

package/dist/worker/handle-event.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@types/node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { RuntimeContext } from './framework/runtime';
 interface HydrogenFetchEvent {

package/dist/worker/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@types/node" />
-import type { ServerResponse } from 'http';
+import { ServerResponse } from 'http';
 import type { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import type { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { Metafield, Image, MediaContentType } from './graphql/types/types';
@@ -78,6 +78,7 @@ export interface Measurement {
     unit: string;
     value: number;
 }
+export declare type QueryKey = string | readonly unknown[];
 export interface CacheOptions {
     private?: boolean;
     maxAge?: number;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -68,6 +68,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-router-dom": "^5.1.7",
+    "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
     "cpy-cli": "3.1.1",
     "mkdirp": "^1.0.4",
@@ -80,10 +81,10 @@
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^5.2.0",
-    "vite": "^2.6.14"
+    "vite": "^2.7.0"
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^1.1.0",
+    "@vitejs/plugin-react": "^1.1.1",
     "connect": "^3.7.0",
     "es-module-lexer": "^0.9.0",
     "fast-glob": "^3.2.5",
@@ -95,9 +96,8 @@
     "node-fetch": "^2.6.1",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.0.9",
-    "react-query": "^3.18.1",
     "react-ssr-prepass": "^1.4.0",
     "vite-plugin-inspect": "^0.3.6"
   },
-  "gitHead": "34baabab8643e8f0754844760de8a481c9d67971"
+  "gitHead": "c07762e2d18d0b0fc5ee76aa688752dcc29e7d07"
 }

package/dist/esnext/foundation/useQuery/QueryProvider.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-import type { ReactQueryHydrationContext } from '../../foundation/ShopifyProvider/types';
-export declare function QueryProvider({ children, hydrationContext, }: {
-    children: ReactNode;
-    hydrationContext?: ReactQueryHydrationContext;
-}): JSX.Element;

package/dist/esnext/foundation/useQuery/QueryProvider.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { Hydrate } from 'react-query/hydration';
-export function QueryProvider({ children, hydrationContext, }) {
-    const queryClient = new QueryClient({
-        defaultOptions: { queries: { suspense: true } },
-    });
-    if (hydrationContext) {
-        hydrationContext.queryClient = queryClient;
-    }
-    return (React.createElement(QueryClientProvider, { client: queryClient },
-        React.createElement(Hydrate, { state: hydrationContext === null || hydrationContext === void 0 ? void 0 : hydrationContext.dehydratedState }, children)));
-}