npm - @shopify/hydrogen - Versions diffs - 0.1.0 - Mend

@shopify/hydrogen 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (454) hide show

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

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+import type { ServerResponse } from 'http';
+import { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
+interface HydrogenFetchEvent {
+    /**
+     * Hydrogen only cares about a single property, since we pass `request` as a separate option.
+     */
+    waitUntil?: (callback: Promise<void>) => void;
+}
+export interface HandleEventOptions {
+    request: ServerComponentRequest;
+    entrypoint: any;
+    indexTemplate: string | ((url: string) => Promise<string>);
+    assetHandler?: (event: HydrogenFetchEvent, url: URL) => Promise<Response>;
+    cache?: Cache;
+    streamableResponse: ServerResponse;
+    dev?: boolean;
+}
+export default function handleEvent(event: HydrogenFetchEvent, { request, entrypoint, indexTemplate, assetHandler, cache, streamableResponse, dev, }: HandleEventOptions): Promise<Response | undefined>;
+export {};

package/dist/esnext/handle-event.js ADDED Viewed

@@ -0,0 +1,140 @@
+const EXPIRES_HEADER = 'Expires';
+const CACHE_TTL_IN_SECONDS = 60;
+export default async function handleEvent(event, { request, entrypoint, indexTemplate, assetHandler, cache, streamableResponse, dev, }) {
+    var _a, _b, _c;
+    if (cache) {
+        const response = await cache.match(request);
+        if (response && responseIsValid(response)) {
+            return response;
+        }
+    }
+    const url = new URL(request.url);
+    const isReactHydrationRequest = url.pathname === '/react';
+    try {
+        const template = typeof indexTemplate === 'function'
+            ? await indexTemplate(url.toString())
+            : indexTemplate;
+        /**
+         * If this is a request for an asset, and an asset handler is present, call it.
+         */
+        if (/\.(png|jpe?g|gif|css|js|svg|ico|map)$/i.test(url.pathname) &&
+            assetHandler) {
+            return assetHandler(event, url);
+        }
+        const { render, hydrate, stream } = entrypoint.default || entrypoint;
+        // @ts-ignore
+        if (dev && !(render && hydrate && stream)) {
+            throw new Error(`entry-server.jsx could not be loaded. This likely occurred because of a Vite compilation error.\n` +
+                `Please check your server logs for more information.`);
+        }
+        const isStreamable = streamableResponse && isStreamableRequest(url);
+        const context = {};
+        /**
+         * Stream back real-user responses, but for bots/etc,
+         * use `render` instead. This is because we need to inject <head>
+         * things for SEO reasons.
+         */
+        if (isStreamable) {
+            if (isReactHydrationRequest) {
+                hydrate(url, { context, request, response: streamableResponse });
+            }
+            else {
+                stream(url, { context, request, response: streamableResponse, template });
+            }
+            return;
+        }
+        const { body, bodyAttributes, htmlAttributes, componentResponse, ...head } = await render(url, { request, context, isReactHydrationRequest });
+        const headers = componentResponse.headers;
+        /**
+         * TODO: Set as part of cache-control headers when Oxygen support lands.
+         */
+        headers.set(EXPIRES_HEADER, new Date(Date.now() + CACHE_TTL_IN_SECONDS * 1000).toUTCString());
+        if (componentResponse.customBody) {
+            return new Response(await componentResponse.customBody, {
+                status: (_a = componentResponse.status) !== null && _a !== void 0 ? _a : 200,
+                headers,
+            });
+        }
+        let response;
+        if (isReactHydrationRequest) {
+            response = new Response(body, {
+                status: (_b = componentResponse.status) !== null && _b !== void 0 ? _b : 200,
+                headers,
+            });
+        }
+        else {
+            const html = template
+                .replace(`<div id="root"></div>`, `<div id="root" data-server-rendered="true">${body}</div>`)
+                .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
+                .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
+                .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&');
+            headers.append('content-type', 'text/html');
+            response = new Response(html, {
+                status: (_c = componentResponse.status) !== null && _c !== void 0 ? _c : 200,
+                headers,
+            });
+        }
+        if (cache) {
+            /**
+             * Put response into cache. If the Worker runtime requires `event.waitUntil` to keep the request
+             * alive while the cache operation completes, use it. Otherwise, assume queued microtasks will finish.
+             */
+            if (typeof event.waitUntil === 'function') {
+                event.waitUntil(cache.put(request, response.clone()));
+            }
+            else {
+                cache.put(request, response.clone());
+            }
+        }
+        return response;
+    }
+    catch (e) {
+        console.log(e.stack);
+        return new Response(e.message || e.toString(), {
+            status: 500,
+        });
+    }
+}
+/**
+ * Determine whether a current response is valid.
+ * This is necessary because the Oxygen Cache API does not yet
+ * support automatic expiration via cache-control headers.
+ * Eventually, a method like this may not be necessary.
+ */
+function responseIsValid(response) {
+    const expiration = response.headers.get(EXPIRES_HEADER);
+    if (!expiration)
+        return false;
+    return new Date(expiration) > new Date();
+}
+function isStreamableRequest(url) {
+    /**
+     * TODO: Add UA detection.
+     */
+    const isBot = url.searchParams.has('_bot');
+    return !isBot;
+}
+/**
+ * Generate the contents of the `head` tag, and update the existing `<title>` tag
+ * if one exists, and if a title is passed.
+ */
+function generateHeadTag(head) {
+    const headProps = ['base', 'meta', 'style', 'noscript', 'script', 'link'];
+    const { title, ...rest } = head;
+    const otherHeadProps = headProps
+        .map((prop) => rest[prop])
+        .filter(Boolean)
+        .join('\n');
+    return (_outerHtml, innerHtml) => {
+        let headHtml = otherHeadProps + innerHtml;
+        if (title) {
+            if (headHtml.includes('<title>')) {
+                headHtml = headHtml.replace(/(<title>(?:.|\n)*?<\/title>)/, title);
+            }
+            else {
+                headHtml += title;
+            }
+        }
+        return `<head>${headHtml}</head>`;
+    };
+}

package/dist/esnext/handle-worker-event.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { HandleEventOptions } from './handle-event';
+interface FetchEvent {
+    request: Request;
+    waitUntil?: (callback: Promise<void>) => void;
+}
+/**
+ * This is a wrapper around `handleEvent` that upgrades Request to ServerComponentRequest,
+ * so the rest of the application downstream has access to things like `request.cookies`, etc.
+ */
+export default function handleWorkerEvent(event: FetchEvent, options: HandleEventOptions): Promise<Response | undefined>;
+export {};

package/dist/esnext/handle-worker-event.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { ServerComponentRequest } from './foundation/Hydration/ServerComponentRequest.server';
+import handleEvent from './handle-event';
+/**
+ * This is a wrapper around `handleEvent` that upgrades Request to ServerComponentRequest,
+ * so the rest of the application downstream has access to things like `request.cookies`, etc.
+ */
+export default async function handleWorkerEvent(event, options) {
+    const request = new ServerComponentRequest(event.request);
+    /**
+     * Note: We need to pass `request` as a separate option since Cloudflare (and other Worker
+     * runtimes, presumably) does not like when `event` is mutated.
+     */
+    return handleEvent(event, { ...options, request });
+}

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

@@ -0,0 +1,5 @@
+export * from './useProductOptions';
+export * from './useQuery';
+export * from './useMoney';
+export * from './useMeasurement';
+export * from './useParsedMetafields';

package/dist/esnext/hooks/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './useProductOptions';
+export * from './useQuery';
+export * from './useMoney';
+export * from './useMeasurement';
+export * from './useParsedMetafields';

package/dist/esnext/hooks/useMeasurement/hooks.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Measurement } from '../../types';
+export interface UseMeasurementValue {
+    localizedString: string;
+    amount?: string;
+    unitName?: string;
+    parts: Intl.NumberFormatPart[];
+    original: Measurement;
+}
+export declare function useMeasurement(measurement: Measurement, options?: Omit<Intl.NumberFormatOptions, 'unit'>): UseMeasurementValue;

package/dist/esnext/hooks/useMeasurement/hooks.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useShop } from '../../foundation';
+import { getMeasurementAsParts, getMeasurementAsString } from '../../utilities';
+export function useMeasurement(measurement, options = {}) {
+    const { locale } = useShop();
+    return useMemo(() => {
+        return {
+            localizedString: getMeasurementAsString(measurement, locale, options),
+            parts: getMeasurementAsParts(measurement, locale, options),
+            original: measurement,
+        };
+    }, [locale, measurement, options]);
+}

package/dist/esnext/hooks/useMeasurement/index.d.ts ADDED Viewed

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

package/dist/esnext/hooks/useMeasurement/index.js ADDED Viewed

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

package/dist/esnext/hooks/useMoney/hooks.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { CurrencyCode, MoneyV2 } from '../../graphql/types/types';
+export declare type UseMoneyValue = {
+    currencyCode: CurrencyCode;
+    currencyName?: string;
+    currencySymbol?: string;
+    currencyNarrowSymbol?: string;
+    amount: string;
+    parts: Intl.NumberFormatPart[];
+    localizedString: string;
+};
+export declare function useMoney(money: MoneyV2): UseMoneyValue;

package/dist/esnext/hooks/useMoney/hooks.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { useShop } from '../../foundation/ShopifyProvider';
+export function useMoney(money) {
+    const { locale } = useShop();
+    const options = useMemo(() => ({
+        style: 'currency',
+        currency: money.currencyCode,
+    }), [money.currencyCode]);
+    const amount = parseFloat(money.amount);
+    const value = useMemo(() => new Intl.NumberFormat(locale, options).format(amount), [amount, locale, options]);
+    const baseParts = new Intl.NumberFormat(locale, options).formatToParts(amount);
+    const nameParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'name',
+    }).formatToParts(amount);
+    const narrowParts = new Intl.NumberFormat(locale, {
+        ...options,
+        currencyDisplay: 'narrowSymbol',
+    }).formatToParts(amount);
+    const parts = useMemo(() => {
+        var _a, _b, _c;
+        return ({
+            currencyCode: money.currencyCode,
+            currencyName: (_a = nameParts.find((part) => part.type === 'currency')) === null || _a === void 0 ? void 0 : _a.value,
+            currencySymbol: (_b = baseParts.find((part) => part.type === 'currency')) === null || _b === void 0 ? void 0 : _b.value,
+            currencyNarrowSymbol: (_c = narrowParts.find((part) => part.type === 'currency')) === null || _c === void 0 ? void 0 : _c.value,
+            amount: money.amount,
+            parts: baseParts.filter((part) => part.type !== 'currency'),
+            localizedString: value,
+        });
+    }, [baseParts, money.amount, money.currencyCode, nameParts, narrowParts, value]);
+    return parts;
+}

package/dist/esnext/hooks/useMoney/index.d.ts ADDED Viewed

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

package/dist/esnext/hooks/useMoney/index.js ADDED Viewed

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

package/dist/esnext/hooks/useParsedMetafields/hooks.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { GraphQLConnection, ParsedMetafield } from '../../types';
+import { Metafield } from '../../graphql/types/types';
+export declare function useParsedMetafields(metafields: GraphQLConnection<Partial<Metafield>> | undefined): ParsedMetafield[];

package/dist/esnext/hooks/useParsedMetafields/hooks.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { flattenConnection, parseMetafieldValue } from '../../utilities';
+export function useParsedMetafields(metafields) {
+    return useMemo(() => {
+        if (metafields == null) {
+            return [];
+        }
+        return flattenConnection(metafields).map((metafield) => {
+            return {
+                ...metafield,
+                value: parseMetafieldValue(metafield),
+            };
+        });
+    }, [metafields]);
+}

package/dist/esnext/hooks/useParsedMetafields/index.d.ts ADDED Viewed

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

package/dist/esnext/hooks/useParsedMetafields/index.js ADDED Viewed

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

package/dist/esnext/hooks/useProductOptions/helpers.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Variant, SelectedOptions, OptionWithValues } from './types';
+export declare function getAllOptionValues(variants: Variant[], option: string): string[];
+export declare function getSelectedVariant(variants: Variant[], choices: SelectedOptions): Variant | undefined;
+export declare function getOptions(variants: Variant[]): OptionWithValues[];

package/dist/esnext/hooks/useProductOptions/helpers.js ADDED Viewed

@@ -0,0 +1,33 @@
+export function getAllOptionValues(variants, option) {
+    return Array.from(new Set(variants.map((variant) => variant.selectedOptions.find((selection) => selection.name == option)
+        .value)));
+}
+export function getSelectedVariant(variants, choices) {
+    /**
+     * Ensure the user has selected all the required options, not just some.
+     */
+    if (!variants.length ||
+        variants[0].selectedOptions.length !== Object.keys(choices).length) {
+        return;
+    }
+    return variants.find((variant) => {
+        return Object.entries(choices).every(([name, value]) => {
+            return variant.selectedOptions.some((option) => option.name === name && option.value === value);
+        });
+    });
+}
+export function getOptions(variants) {
+    const map = variants.reduce((memo, variant) => {
+        variant.selectedOptions.forEach(({ name, value }) => {
+            memo[name] = memo[name] || new Set();
+            memo[name].add(value);
+        });
+        return memo;
+    }, {});
+    return Object.keys(map).map((option) => {
+        return {
+            name: option,
+            values: Array.from(map[option]),
+        };
+    });
+}

package/dist/esnext/hooks/useProductOptions/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useProductOptions, ProductOptionsHookValue } from './useProductOptions';
2	+ export * from './types';

package/dist/esnext/hooks/useProductOptions/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { useProductOptions } from './useProductOptions';
2	+ export * from './types';

package/dist/esnext/hooks/useProductOptions/types.d.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { ProductProviderFragmentFragment } from '../../components/ProductProvider/ProductProviderFragment';
+import { CurrencyCode, SellingPlanAllocationConnection, SellingPlanConnection, SellingPlan, UnitPriceMeasurement } from '../../graphql/types/types';
+import { GraphQLConnection } from '../../types';
+export declare type VariantsConnection = GraphQLConnection<Variant>;
+interface OptionSet {
+    name: string;
+    value: string;
+}
+export interface Variant {
+    availableForSale: boolean;
+    compareAtPriceV2?: Money;
+    id: string;
+    image?: {
+        originalSrc: string;
+        altText: string;
+    };
+    unitPrice: Money;
+    unitPriceMeasurement: UnitPriceMeasurement;
+    priceV2: Money;
+    selectedOptions: OptionSet[];
+    sellingPlanAllocations?: SellingPlanAllocationConnection;
+    title: string;
+    metafields: ProductProviderFragmentFragment['variants']['edges'][0]['node']['metafields'];
+}
+export declare type SelectedOptions = Record<string, string>;
+export declare type SelectVariantCallback = (variant: Variant) => void;
+export declare type SelectOption = (name: string, value: string) => void;
+export declare type SelectOptionCallback = (name: string, value: string) => void;
+export interface OptionWithValues {
+    name: string;
+    values: string[];
+}
+export declare type SellingPlanGroupsConnection = GraphQLConnection<SellingPlanGroup>;
+export interface SellingPlanGroup {
+    id: string;
+    name: string;
+    options: {
+        name: string;
+        values: string[];
+    }[];
+    sellingPlans: SellingPlanConnection;
+}
+export interface FlattenedSellingPlanGroup extends Omit<SellingPlanGroup, 'sellingPlans'> {
+    sellingPlans: SellingPlan[];
+}
+interface Money {
+    amount: string;
+    currencyCode: CurrencyCode;
+}
+export {};

package/dist/esnext/hooks/useProductOptions/types.js ADDED Viewed

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

package/dist/esnext/hooks/useProductOptions/useProductOptions.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { FlattenedSellingPlanGroup, SellingPlanGroupsConnection, OptionWithValues, SelectedOptions, Variant, VariantsConnection } from './types';
+import { SellingPlan, SellingPlanAllocation } from '../../graphql/types/types';
+export interface ProductOptionsHookValue {
+    variants: Variant[];
+    options: OptionWithValues[];
+    selectedVariant?: Variant;
+    setSelectedVariant: (variant: Variant) => void;
+    selectedOptions: SelectedOptions;
+    setSelectedOption: (name: string, value: string) => void;
+    setSelectedOptions: (options: {
+        [key: string]: string;
+    }) => void;
+    isOptionInStock: (name: string, value: string) => boolean;
+    setSelectedSellingPlan: (sellingPlan: SellingPlan) => void;
+    selectedSellingPlan?: SellingPlan;
+    selectedSellingPlanAllocation?: SellingPlanAllocation;
+    sellingPlanGroups: FlattenedSellingPlanGroup[];
+}
+export declare function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }: {
+    variants?: VariantsConnection;
+    sellingPlanGroups?: SellingPlanGroupsConnection;
+    initialVariantId?: string;
+}): ProductOptionsHookValue;

package/dist/esnext/hooks/useProductOptions/useProductOptions.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { flattenConnection } from '../../utilities';
+import { getOptions, getSelectedVariant } from './helpers';
+export function useProductOptions({ variants: variantsConnection, sellingPlanGroups: sellingPlanGroupsConnection, initialVariantId, }) {
+    const variants = useMemo(() => (variantsConnection ? flattenConnection(variantsConnection) : []), [variantsConnection]);
+    const options = useMemo(() => getOptions(variants), [variants]);
+    /**
+     * Track the state of the selectedVariant within the hook. If a `selectedVariantId`
+     * is passed, use that as an initial value.
+     */
+    const [selectedVariant, setSelectedVariant] = useState(initialVariantId
+        ? variants.find((variant) => variant.id === initialVariantId)
+        : undefined);
+    /**
+     * Track the state of selectedOptions within the hook. If a `selectedVariantId`
+     * is passed, use that to select initial options.
+     */
+    const [selectedOptions, setSelectedOptions] = useState(selectedVariant
+        ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+            memo[optionSet.name] = optionSet.value;
+            return memo;
+        }, {})
+        : {});
+    /**
+     * Allow the developer to select an option.
+     */
+    function setSelectedOption(name, value) {
+        const newSelectedOptions = {
+            ...selectedOptions,
+            [name]: value,
+        };
+        setSelectedOptions(newSelectedOptions);
+    }
+    useEffect(() => {
+        /**
+         * When selected options change, select the correct variant.
+         */
+        const variant = getSelectedVariant(variants, selectedOptions);
+        if (variant) {
+            setSelectedVariant(variant);
+        }
+    }, [variants, selectedOptions]);
+    const isOptionInStock = useCallback((option, value) => {
+        const proposedVariant = getSelectedVariant(variants, {
+            ...selectedOptions,
+            ...{ [option]: value },
+        });
+        return proposedVariant ? proposedVariant.availableForSale : true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = useMemo(() => sellingPlanGroupsConnection
+        ? flattenConnection(sellingPlanGroupsConnection).map((sellingPlanGroup) => ({
+            ...sellingPlanGroup,
+            sellingPlans: flattenConnection(sellingPlanGroup.sellingPlans),
+        }))
+        : [], [sellingPlanGroupsConnection]);
+    /**
+     * Track the state of the selectedSellingPlan within the hook. If a `initialSellingPlanId`
+     * is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+     * that is also a requirement.
+     */
+    const [selectedSellingPlan, setSelectedSellingPlan] = useState(undefined);
+    const selectedSellingPlanAllocation = useMemo(() => {
+        if (selectedVariant && selectedSellingPlan) {
+            if (!selectedVariant.sellingPlanAllocations) {
+                throw new Error(`You must include sellingPlanAllocations in your variants in order to calculate selectedSellingPlanAllocation`);
+            }
+            return flattenConnection(selectedVariant.sellingPlanAllocations).find((allocation) => allocation.sellingPlan.id === selectedSellingPlan.id);
+        }
+    }, [selectedVariant, selectedSellingPlan]);
+    return {
+        variants,
+        options,
+        selectedVariant,
+        setSelectedVariant,
+        selectedOptions,
+        setSelectedOption,
+        setSelectedOptions,
+        isOptionInStock,
+        selectedSellingPlan,
+        selectedSellingPlanAllocation,
+        setSelectedSellingPlan,
+        sellingPlanGroups,
+    };
+}

package/dist/esnext/hooks/useQuery/QueryProvider.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+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/hooks/useQuery/QueryProvider.js ADDED Viewed

@@ -0,0 +1,13 @@
+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)));
+}

package/dist/esnext/hooks/useQuery/hooks.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { UseQueryOptions, QueryKey } from 'react-query';
+/**
+ * useQuery is a wrapper around `fetch` which supports Suspense calls on the server
+ * and on the client. It is backed by `react-query`, and it accepts options to that package's
+ * `useQuery` hook.
+ *
+ * If the `init` object contains `accept` or `content-type` headers indicating JSON,
+ * the response will be converted to JSON. Otherwise, it will be read as text.
+ *
+ * @see https://react-query.tanstack.com/reference/useQuery
+ */
+export declare function useQuery<T>(url: string, init?: RequestInit, queryOptions?: UseQueryOptions<T, Error, T, QueryKey>): import("react-query").UseQueryResult<T, Error>;

package/dist/esnext/hooks/useQuery/hooks.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { useQuery as useReactQuery, } from 'react-query';
+/**
+ * useQuery is a wrapper around `fetch` which supports Suspense calls on the server
+ * and on the client. It is backed by `react-query`, and it accepts options to that package's
+ * `useQuery` hook.
+ *
+ * If the `init` object contains `accept` or `content-type` headers indicating JSON,
+ * the response will be converted to JSON. Otherwise, it will be read as text.
+ *
+ * @see https://react-query.tanstack.com/reference/useQuery
+ */
+export function useQuery(url, init, queryOptions) {
+    return useReactQuery(
+    /**
+     * TODO: Add better key generation, taking into account headers, etc.
+     */
+    [url, init === null || init === void 0 ? void 0 : init.body], async () => {
+        const response = await fetch(url, init);
+        if (!response.ok) {
+            throw new Error(`[useQuery] error: ${response.status} ${response.statusText}`);
+        }
+        const headers = new Headers(init === null || init === void 0 ? void 0 : init.headers);
+        const isJsonRequest = headers.get('accept') === 'application/json' ||
+            headers.get('content-type') === 'application/json';
+        const method = isJsonRequest ? 'json' : 'text';
+        return response[method]();
+    }, queryOptions);
+}

package/dist/esnext/hooks/useQuery/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './hooks';
2	+ export * from './QueryProvider';

package/dist/esnext/hooks/useQuery/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './hooks';
2	+ export * from './QueryProvider';

package/dist/esnext/hooks/useShopQuery/hooks.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { ASTNode } from 'graphql';
+export interface UseShopQueryResponse<T> {
+    data: T;
+    errors: any;
+}
+export declare function useShopQuery<T>({ query, variables, }: {
+    query: ASTNode | string;
+    variables?: Record<string, any>;
+}): UseShopQueryResponse<T>;

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

@@ -0,0 +1,34 @@
+import { useShop } from '../../foundation/ShopifyProvider/hooks';
+import { print } from 'graphql';
+import { useQuery } from '../useQuery';
+import { isClient } from '../../utilities';
+import { LIB_VERSION } from '../../version';
+export function useShopQuery({ query, variables = {}, }) {
+    if (isClient()) {
+        throw new Error('Shopify Storefront API requests should only be made from the server.');
+    }
+    const { storeDomain, storefrontToken, graphqlApiVersion } = useShop();
+    const { data } = useQuery(`https://${storeDomain}/api/${graphqlApiVersion}/graphql.json`, {
+        method: 'POST',
+        headers: {
+            'content-type': 'application/json',
+            'user-agent': `Hydrogen ${LIB_VERSION}`,
+            'X-Shopify-Storefront-Access-Token': storefrontToken,
+        },
+        body: JSON.stringify({
+            query: typeof query === 'string' ? query : print(query),
+            variables,
+        }),
+    });
+    /**
+     * GraphQL errors get printed to the console but ultimately
+     * get returned to the consumer.
+     */
+    if (data === null || data === void 0 ? void 0 : data.errors) {
+        for (const error of data.errors) {
+            console.error('GraphQL Error', error);
+        }
+        console.error(`GraphQL errors: ${data.errors.length}`);
+    }
+    return data;
+}

package/dist/esnext/hooks/useShopQuery/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './hooks';

package/dist/esnext/hooks/useShopQuery/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './hooks';