@shopify/hydrogen 1.0.0-alpha.21 → 1.0.1

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

@@ -1,34 +1,173 @@
-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()) {
+import { useShop } from '../../foundation/useShop';
+import { getLoggerWithContext } from '../../utilities/log';
+import { graphqlRequestBody } from '../../utilities';
+import { useServerRequest } from '../../foundation/ServerRequestProvider';
+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';
+import { parseJSON } from '../../utilities/parse';
+// Check if the response body has GraphQL errors
+// https://spec.graphql.org/June2018/#sec-Response-Format
+const shouldCacheResponse = ([body]) => {
+    try {
+        return !parseJSON(body)?.errors;
+    }
+    catch {
+        // If we can't parse the response, then assume
+        // an error and don't cache the response
+        return false;
+    }
+};
+/**
+ * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
+ */
+export function useShopQuery({ query, variables = {}, cache, preload = false, }) {
+    /**
+     * If no query is passed, we no-op here to allow developers to obey the Rules of Hooks.
+     */
+    if (!query) {
+        return { data: undefined, errors: undefined };
+    }
+    if (!META_ENV_SSR) {
         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,
-        }),
-    });
+    const serverRequest = useServerRequest(); // eslint-disable-line react-hooks/rules-of-hooks
+    const log = getLoggerWithContext(serverRequest);
+    const body = query ? graphqlRequestBody(query, variables) : '';
+    const { url, requestInit } = useCreateShopRequest(body); // eslint-disable-line react-hooks/rules-of-hooks
+    let text;
+    let data;
+    let useQueryError;
+    try {
+        text = fetchSync(url, {
+            ...requestInit,
+            cache,
+            preload,
+            shouldCacheResponse,
+        }).text();
+        try {
+            data = JSON.parse(text);
+        }
+        catch (error) {
+            useQueryError = new Error('Unable to parse response:\n' + text);
+        }
+    }
+    catch (error) {
+        // Pass-through thrown promise for Suspense functionality
+        if (error?.then) {
+            throw error;
+        }
+        useQueryError = error;
+    }
+    /**
+     * The fetch request itself failed, so we handle that differently than a GraphQL error
+     */
+    if (useQueryError) {
+        const errorMessage = createErrorMessage(useQueryError);
+        log.error(errorMessage);
+        log.error(useQueryError);
+        if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
+            throw new Error(errorMessage);
+        }
+        else {
+            // in non-dev environments, we probably don't want super-detailed error messages for the user
+            throw new Error(`The fetch attempt failed; there was an issue connecting to the data source.`);
+        }
+    }
     /**
      * 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);
+    if (data?.errors) {
+        const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
+        for (const error of errors) {
+            if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
+                throw new Error(error.message);
+            }
+            else {
+                log.error('GraphQL Error', error);
+            }
         }
-        console.error(`GraphQL errors: ${data.errors.length}`);
+        log.error(`GraphQL errors: ${errors.length}`);
+    }
+    if (__HYDROGEN_DEV__ &&
+        (log.options().showUnusedQueryProperties ||
+            serverRequest.ctx.hydrogenConfig?.__EXPERIMENTAL__devTools) &&
+        query &&
+        data?.data) {
+        const fileLine = new Error('').stack
+            ?.split('\n')
+            .find((line) => line.includes('.server.'));
+        const [, functionName, fileName] = fileLine?.match(/^\s*at (\w+) \(([^)]+)\)/) || [];
+        injectGraphQLTracker({
+            query,
+            data,
+            onUnusedData: ({ queryName, properties }) => {
+                const footer = `Examine the list of fields above to confirm that they are being used.\n`;
+                const header = `Potentially overfetching fields in GraphQL query.\n`;
+                let info = `Query \`${queryName}\``;
+                if (fileName) {
+                    info += ` in file \`${fileName}\` (function \`${functionName}\`)`;
+                }
+                const n = 6;
+                const shouldTrim = properties.length > n + 1;
+                const shownProperties = shouldTrim
+                    ? properties.slice(0, n)
+                    : properties;
+                const hiddenInfo = shouldTrim
+                    ? `  ...and ${properties.length - shownProperties.length} more\n`
+                    : '';
+                const warning = header +
+                    info +
+                    `:\n• ${shownProperties.join(`\n• `)}\n` +
+                    hiddenInfo +
+                    footer;
+                if (log.options().showUnusedQueryProperties) {
+                    log.warn(warning);
+                    sendMessageToClient('browser-console', { type: 'warn', data: warning });
+                }
+                if (serverRequest.ctx.hydrogenConfig?.__EXPERIMENTAL__devTools) {
+                    sendMessageToClient('dev-tools', { type: 'warn', data: warning });
+                }
+            },
+        });
     }
     return data;
 }
+function useCreateShopRequest(body) {
+    const { storeDomain, storefrontToken, storefrontApiVersion } = useShop();
+    const request = useServerRequest();
+    const buyerIp = request.getBuyerIp();
+    const extraHeaders = getStorefrontApiRequestHeaders({
+        buyerIp,
+        storefrontToken,
+    });
+    return {
+        key: [storeDomain, storefrontApiVersion, body],
+        url: `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,
+        requestInit: {
+            body,
+            method: 'POST',
+            headers: {
+                'X-SDK-Variant': 'hydrogen',
+                'X-SDK-Version': storefrontApiVersion,
+                'content-type': 'application/json',
+                ...extraHeaders,
+            },
+        },
+    };
+}
+function createErrorMessage(fetchError) {
+    if (fetchError instanceof Response) {
+        return `An error occurred while fetching from the Storefront API. ${
+        // 403s to the SF API (almost?) always mean that your Shopify credentials are bad/wrong
+        fetchError.status === 403
+            ? `You may have a bad value in 'hydrogen.config.js'`
+            : `${fetchError.statusText}`}`;
+    }
+    else {
+        return `Failed to connect to the Storefront API: ${fetchError.message}`;
+    }
+}

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

@@ -1 +1 @@
-export * from './hooks';
+export { useShopQuery } from './hooks';

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

@@ -1 +1 @@
-export * from './hooks';
+export { useShopQuery } from './hooks';

package/dist/esnext/index.d.ts

@@ -1,9 +1,42 @@
+/**
+ * Export all client components from here to ensure they're available in both import
+ * paths. This is because we transform `@shopify/hydrogen` to `@shopify/hydrogen/client`
+ * inside client components during the client build only, but when the same components
+ * run during SSR, they reference this path.
+ */
+export * from './client';
+/**
+ * The following are exported from this file because they are intended to be available
+ * *only* on the server.
+ */
 export * from './foundation/';
-export * from './components/';
-export * from './hooks/';
-export * from './graphql/graphql-constants';
-export { flattenConnection } from './utilities';
-export { Helmet } from 'react-helmet-async';
-export * from './components/LocalizationProvider';
-export * from './components/CartProvider/CartServerProvider.server';
-export * from './hooks/useShopQuery';
+export * from './hooks/useShopQuery/hooks';
+export * from './foundation/useQuery/hooks';
+export * from './foundation/useServerProps';
+export { FileRoutes } from './foundation/FileRoutes/FileRoutes.server';
+export { Route } from './foundation/Route/Route.server';
+export { Router } from './foundation/Router/Router.server';
+export { log, type Logger } from './utilities/log';
+export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
+export { ShopifyProvider } from './foundation/ShopifyProvider/ShopifyProvider.server';
+export { generateCacheControlHeader, CacheNone, CacheShort, CacheLong, CacheCustom, } from './foundation/Cache/strategies';
+export { useRequestContext } from './foundation/useRequestContext';
+export { useServerAnalytics } from './foundation/Analytics/hook';
+export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
+export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
+export { useSession } from './foundation/useSession/useSession';
+export { useLocalization } from './hooks/useLocalization/useLocalization';
+export { Cookie } from './foundation/Cookie/Cookie';
+/**
+ * Export server-only CartQuery here instead of `CartProvider.client` to prevent
+ * it from being bundled with other client components
+ */
+export { CartQuery } from './components/CartProvider/cart-queries';
+/**
+ * Override the client version of `fetchSync` with the server version.
+ */
+export { fetchSync } from './foundation/fetchSync/server/fetchSync';
+export { type HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server';
+export { type HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server';
+export { type HydrogenRouteProps } from './types';
+export { type ResourceGetter as HydrogenApiRoute, RequestOptions as HydrogenApiRouteOptions, } from './utilities/apiRoutes';

package/dist/esnext/index.js

@@ -1,11 +1,38 @@
+/**
+ * Export all client components from here to ensure they're available in both import
+ * paths. This is because we transform `@shopify/hydrogen` to `@shopify/hydrogen/client`
+ * inside client components during the client build only, but when the same components
+ * run during SSR, they reference this path.
+ */
+export * from './client';
+/**
+ * The following are exported from this file because they are intended to be available
+ * *only* on the server.
+ */
 export * from './foundation/';
-export * from './components/';
-export * from './hooks/';
-export * from './graphql/graphql-constants';
-export { flattenConnection } from './utilities';
-export { Helmet } from 'react-helmet-async';
-// This is exported here because it contains a Server Component
-export * from './components/LocalizationProvider';
-export * from './components/CartProvider/CartServerProvider.server';
-// Exported here because users shouldn't be making `useShopQuery` calls from the client
-export * from './hooks/useShopQuery';
+export * from './hooks/useShopQuery/hooks';
+export * from './foundation/useQuery/hooks';
+export * from './foundation/useServerProps';
+export { FileRoutes } from './foundation/FileRoutes/FileRoutes.server';
+export { Route } from './foundation/Route/Route.server';
+export { Router } from './foundation/Router/Router.server';
+export { log } from './utilities/log';
+export { LocalizationProvider } from './components/LocalizationProvider/LocalizationProvider.server';
+export { ShopifyProvider } from './foundation/ShopifyProvider/ShopifyProvider.server';
+export { generateCacheControlHeader, CacheNone, CacheShort, CacheLong, CacheCustom, } from './foundation/Cache/strategies';
+export { useRequestContext } from './foundation/useRequestContext';
+export { useServerAnalytics } from './foundation/Analytics/hook';
+export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server';
+export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const';
+export { useSession } from './foundation/useSession/useSession';
+export { useLocalization } from './hooks/useLocalization/useLocalization';
+export { Cookie } from './foundation/Cookie/Cookie';
+/**
+ * Export server-only CartQuery here instead of `CartProvider.client` to prevent
+ * it from being bundled with other client components
+ */
+export { CartQuery } from './components/CartProvider/cart-queries';
+/**
+ * Override the client version of `fetchSync` with the server version.
+ */
+export { fetchSync } from './foundation/fetchSync/server/fetchSync';

package/dist/esnext/node.d.ts

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

package/dist/esnext/node.js

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

package/dist/esnext/platforms/node.d.ts

@@ -0,0 +1,9 @@
+import '../utilities/web-api-polyfill';
+import connect from 'connect';
+declare type CreateServerOptions = {
+    cache?: Cache;
+};
+export declare function createServer({ cache, }?: CreateServerOptions): Promise<{
+    app: connect.Server;
+}>;
+export {};

package/dist/esnext/platforms/node.js

@@ -0,0 +1,41 @@
+import '../utilities/web-api-polyfill';
+import path from 'path';
+// @ts-ignore
+// eslint-disable-next-line node/no-missing-import
+import entrypoint from '__SERVER_ENTRY__';
+// @ts-ignore
+// eslint-disable-next-line node/no-missing-import
+import indexTemplate from '__INDEX_TEMPLATE__?raw';
+import { hydrogenMiddleware } from '../framework/middleware';
+// @ts-ignore
+import serveStatic from 'serve-static';
+// @ts-ignore
+import compression from 'compression';
+import bodyParser from 'body-parser';
+import connect from 'connect';
+import { InMemoryCache } from '../framework/cache/in-memory';
+const handleRequest = entrypoint;
+export async function createServer({ cache = new InMemoryCache(), } = {}) {
+    // @ts-ignore
+    globalThis.Oxygen = { env: process.env };
+    const app = connect();
+    app.use(compression());
+    app.use(serveStatic(path.resolve(__dirname, '../client'), {
+        index: false,
+    }));
+    app.use(bodyParser.raw({ type: '*/*' }));
+    app.use(hydrogenMiddleware({
+        getServerEntrypoint: () => handleRequest,
+        indexTemplate,
+        cache,
+    }));
+    return { app };
+}
+if (require.main === module) {
+    createServer().then(({ app }) => {
+        const port = process.env.PORT || 8080;
+        app.listen(port, () => {
+            console.log(`Hydrogen server running at http://localhost:${port}`);
+        });
+    });
+}

package/dist/esnext/platforms/worker-event.js

@@ -0,0 +1,3 @@
+import moduleEntry from './worker';
+// @ts-ignore
+addEventListener('fetch', (event) => event.respondWith(moduleEntry.fetch(event.request, globalThis, event)));

package/dist/esnext/platforms/worker.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    var globalThis: {
+        Oxygen: {
+            env: any;
+        };
+        [key: string]: any;
+    };
+}
+declare const _default: {
+    fetch(request: Request, env: unknown, context: {
+        waitUntil: (promise: Promise<any>) => void;
+    }): Promise<Response>;
+};
+export default _default;

package/dist/esnext/platforms/worker.js

@@ -0,0 +1,25 @@
+// @ts-ignore
+// eslint-disable-next-line node/no-missing-import
+import entrypoint from '__SERVER_ENTRY__';
+// @ts-ignore
+// eslint-disable-next-line node/no-missing-import
+import indexTemplate from '__INDEX_TEMPLATE__?raw';
+const handleRequest = entrypoint;
+export default {
+    async fetch(request, env, context) {
+        if (!globalThis.Oxygen) {
+            globalThis.Oxygen = { env };
+        }
+        try {
+            return (await handleRequest(request, {
+                indexTemplate,
+                cache: await caches.open('oxygen'),
+                context,
+                buyerIpHeader: 'oxygen-buyer-ip',
+            }));
+        }
+        catch (error) {
+            return new Response(error.message || error.toString(), { status: 500 });
+        }
+    },
+};

package/dist/esnext/shared-types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'http';
+export interface RuntimeContext {
+    waitUntil: (fn: Promise<any>) => void;
+}
+export interface RequestHandlerOptions {
+    indexTemplate: string | ((url: string) => Promise<string | {
+        default: string;
+    }>);
+    cache?: Cache;
+    streamableResponse?: ServerResponse;
+    dev?: boolean;
+    context?: RuntimeContext;
+    nonce?: string;
+    buyerIpHeader?: string;
+}
+export interface RequestHandler {
+    (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
+}
+export declare type ShopifyConfig = {
+    defaultLanguageCode?: string;
+    defaultCountryCode?: string;
+    storeDomain: string;
+    storefrontToken: string;
+    storefrontApiVersion: string;
+    multipassSecret?: string;
+};

package/dist/esnext/shared-types.js

@@ -0,0 +1,4 @@
+// These types are shared in ESM and CJS builds.
+// Do not import anything from subfolders here to avoid
+// affecting the files generated in the CJS build.
+export {};