@shopify/shopify-app-remix 1.2.1 → 2.0.0

package/README.md

@@ -8,13 +8,15 @@
 This package makes it easy to use [Remix](https://remix.run/) to build Shopify apps.
 It builds on the `@shopify/shopify-api` package and exposes a `shopifyApp` function. You can use `shopifyApp` to configure your app and then authenticate requests from Shopify.
 
+Visit the [`shopify.dev` documentation](https://shopify.dev/docs/api/shopify-app-remix) for more details on the Remix app package.
+
 ## Requirements
 
-To follow these usage guides, you will need to:
+To use this package, you will need to have:
 
-- have a Shopify Partner account and development store
-- have an app already set up on your partner account
-- have a JavaScript package manager such as [yarn](https://yarnpkg.com) installed
+- a Shopify Partner account and development store
+- an app already set up on your partner account
+- a JavaScript package manager such as [yarn](https://yarnpkg.com) installed
 
 ## Getting started
 
@@ -24,11 +26,11 @@ The easiest way to get started with developing Shopify apps is using the [Shopif
 It helps you set up your environment for developing and publishing your apps and extensions.
 
 We strongly recommend using the CLI to create and manage your Remix apps and extensions!
-See the [getting started documentation](https://shopify.dev/docs/apps/getting-started/create) to create your app using the Shopify CLI.
+Refer to the [getting started documentation](https://shopify.dev/docs/apps/getting-started/create) to create your app using the Shopify CLI.
 
 ### Using a plain Remix app
 
-This package works with any Remix app. If you're starting an app from scratch, you can create a brand new Remix app that uses the indie-stack:
+This package works with any Remix app. If you're starting an app from scratch, then you can create a brand new Remix app that uses the indie-stack:
 
 ```bash
 npx create-remix@latest --template remix-run/indie-stack
@@ -41,11 +43,18 @@ Now let's install this package:
 npm install @shopify/shopify-app-remix
 ```
 
-Create `app/shopify.server.js`. We will use this file to configure our Shopify app:
+Next, you'll need to set up some routes and headers so you can embed your app in the Shopify admin.
+You can find more details on all the steps described here in the [package documentation](https://shopify.dev/docs/api/shopify-app-remix).
+
+Create `app/shopify.server.js`. We will use this file to configure our Shopify app by calling the [`shopifyApp` function](https://shopify.dev/docs/api/shopify-app-remix/latest/entrypoints/shopifyapp):
 
 ```ts
 // app/shopify.server.js
+// Note that you don't need to import the node adapter if you're running on a different runtime.
 import '@shopify/shopify-app-remix/server/adapters/node';
+// Memory storage makes it easy to set an app up, but should never be used in production.
+import {MemorySessionStorage} from '@shopify/shopify-app-session-storage-memory';
+
 import {LATEST_API_VERSION, shopifyApp} from '@shopify/shopify-app-remix';
 
 const shopify = shopifyApp({
@@ -54,21 +63,11 @@ const shopify = shopifyApp({
   appUrl: process.env.SHOPIFY_APP_URL!,
   scopes: ['read_products'],
   apiVersion: LATEST_API_VERSION,
+  sessionStorage: new MemorySessionStorage(),
 });
 export default shopify;
 ```
 
-A description of these config options:
-
-| option        | description                                                                                                                                                    |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| apiKey        | The Client ID for your app. Copy it from your app in the Shopify partners dashboard. This is public.                                                           |
-| apiSecretKey  | The API Secret for your app. Copy it from your app in the Shopify partners dashboard. This is private. Do not commit this.                                     |
-| appUrl        | This is the URL for your app.                                                                                                                                  |
-| scopes        | What permissions your app needs. [More information](https://shopify.dev/docs/api/usage/access-scopes).                                                         |
-| apiVersion    | What versions of the [Admin API's](https://shopify.dev/docs/api/) do you want to use. If you are creating anew app use LATEST_API_VERSION.                     |
-| restResources | What version of the [Shopify Admin REST API](https://shopify.dev/docs/api/admin-rest) do you want to use. If you are creating anew app use LATEST_API_VERSION. |
-
 This will require some environment variables. So let's create an `.env` file:
 
 ```env
@@ -77,45 +76,34 @@ SHOPIFY_API_SECRET="[Copy from partners dashboard]"
 SHOPIFY_APP_URL="[The tunnel URL you are using to run your app]"
 ```
 
-`shopifyApp` needs to reserve a [splat route](https://remix.run/docs/en/main/guides/routing#splats). The default is `apps/routes/auth/$.tsx`, but you can configure this route using the `authPathPrefix option`:
-
-```ts
-// app/shopify.server.js
-import {shopifyApp} from '@shopify/shopify-app-remix';
-
-const shopify = shopifyApp({
-  // ...
-  authPathPrefix: '/auth',
-});
-```
-
-Now let's create the [splat route](https://remix.run/docs/en/main/guides/routing#splats) for auth. It should export a loader that uses `shopifyApp` to authenticate:
+`shopifyApp` needs to reserve a [splat route](https://remix.run/docs/en/main/guides/routing#splats) for auth.
+It should export a loader that uses `shopifyApp` to authenticate:
 
 ```ts
 // app/routes/auth/$.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return null;
 }
 ```
 
-Next, set up the `AppProvider` component in your app's routes. To do this pass the `process.env.SHOPIFY_API_KEY` to the frontend via the loader.
+Next, set up the [`AppProvider` component](https://shopify.dev/docs/api/shopify-app-remix/latest/entrypoints/appprovider) in your app's routes. To do this pass the `process.env.SHOPIFY_API_KEY` to the frontend via the loader.
 
 Here is an example:
 
 ```ts
 // root.tsx
-import {LoaderArgs} from '@remix-run/node';
+import {LoaderFunctionArgs} from '@remix-run/node';
 import {AppProvider} from '@shopify/shopify-app-remix/react';
 
 import shopify from '~/shopify.server';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   await shopify.authenticate.admin(request);
 
   return json({
@@ -142,7 +130,7 @@ export default function App() {
 }
 ```
 
-This component will set up [Polaris](https://polaris.shopify.com/components/utilities/app-provider) and [App Bridge](https://shopify.dev/tools/app-bridge). If your app is not embedded, set the `isEmbeddedApp` prop to `false`.
+This component will set up [Polaris](https://polaris.shopify.com/components/utilities/app-provider) and [App Bridge](https://shopify.dev/tools/app-bridge). If your app isn't embedded, set the `isEmbeddedApp` prop to `false`.
 
 Now that your app is ready to respond to requests, it will also need to add the required `Content-Security-Policy` header directives, as per [our documentation](https://shopify.dev/docs/apps/store/security/iframe-protection).
 To do that, this package provides the `shopify.addDocumentResponseHeaders` method.
@@ -166,263 +154,26 @@ export default function handleRequest(
 }
 ```
 
-## Setting up for your runtime
+### Running your app
 
-By default, this package will work with the runtimes supported by [Remix adapters](https://remix.run/docs/en/1.17.1/other-api/adapter#official-adapters) because it relies on the same [Web Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
-
-Since Node.js doesn't fully implement that API, apps will need to import an extra adapter to set it up before using this package's exports.
-
-In the [Getting Started](#getting-started) section above, you'll notice that the example runs
-
-```ts
-import '@shopify/shopify-app-remix/server/adapters/node';
-```
-
-before calling `shopifyApp`.
-If you're running on a runtime other than Node, you can simply omit that line.
-
-## Loading your app in admin
-
-To load your app within the Shopify Admin, you need to:
+To run your app and load it within the Shopify Admin, you need to:
 
 1. Update your app's URL in your Partners Dashboard app setup page to `http://localhost:8080`
 1. Update your app's callback URL to `http://localhost:8080/api/auth/callback` in that same page
 1. Go to **Test your app** in Partners Dashboard and select your development store
 
-## Authenticating admin requests
-
-`shopifyApp` provides methods for authenticating admin requests.
-To authenticate admin requests you can call `shopify.authenticate.admin(request)` in a loader or an action:
-
-```ts
-// app/routes/**/*.tsx
-export const loader = async ({request}: LoaderArgs) => {
-  await shopify.authenticate.admin(request);
-
-  return null;
-};
-```
-
-If there is a session for this user, this loader will return null.
-If there is no session for the user, the loader will throw the appropriate redirect Response.
-
-> **Note**: If you are authenticating more than one route, we recommend using [Remix layout routes](https://remix.run/docs/en/1.18.1/file-conventions/routes-files#layout-routes) to automatically authenticate them.
-
-## Authenticating cross-origin admin requests
-
-If your Remix server is authenticating an admin extension, a request from the extension to Remix will be cross-origin. Here `shopify.authenticate.admin` provides a cors function to add the required cross-origin headers:
-
-```ts
-export const loader = async ({request}: LoaderArgs) => {
-  const {cors} = await shopify.authenticate.admin(request);
-
-  return cors(json({my: 'data'}));
-};
-```
-
-### Headers
-
-It's important to note that the authentication functions in this package rely on throwing `Response` objects, which must be handled in your Remix routes using them.
+## Next steps
 
-To do that, you can set up a [Remix `ErrorBoundary`](https://remix.run/docs/en/main/guides/errors).
-We provide some abstractions for the error and headers boundaries to make it easier for apps to set those up.
+Once your app is up and running, you can start using this package to interact with Shopify APIs, webhooks and more.
 
-```ts
-// app/routes/**/*.tsx
-import {boundary} from '@shopify/shopify-app-remix';
-
-export function ErrorBoundary() {
-  return boundary.error(useRouteError());
-}
-
-export const headers = (headersArgs) => {
-  return boundary.headers(headersArgs);
-};
-```
-
-> **Note**: You can also add this to a layout if you want to authenticate more than one route.
-
-### Using the Shopify admin GraphQL API
+Here are some guides to help you set up your app:
 
-To access the [Shopify Admin GraphQL API](https://shopify.dev/docs/api/admin-graphql) pass a request from a loader or an action to `shopify.authenticate.admin`.
-This will either redirect the merchant to install your app or it will give you access to API functions.
-E.g:
-
-```ts
-// routes/**/*.tsx
-import shopify from '../shopify.server';
-import {ActionArgs, json} from '@remix-run/node';
-
-export async function action({request}: ActionArgs) {
-  const {admin} = await shopify.authenticate.admin(request);
-
-  const response = await admin.graphql(
-    `#graphql
-    mutation populateProduct($input: ProductInput!) {
-      productCreate(input: $input) {
-        product {
-          id
-        }
-      }
-    }`,
-    {
-      variables: {
-        input: {
-          title: 'New product',
-          variants: [{price: 100}],
-        },
-      },
-    },
-  );
-  const parsedResponse = await response.json();
-
-  return json({data: parsedResponse.data});
-}
-```
+- [Interacting with Shopify Admin](https://shopify.dev/docs/api/shopify-app-remix/latest/guide-admin)
+- [Subscribing to webhooks](https://shopify.dev/docs/api/shopify-app-remix/latest/guide-webhooks)
 
-### Using the Shopify admin REST API
-
-`shopify.authenticate.admin` can returns methods for interacting with [Shopify Admin REST API](https://shopify.dev/docs/api/admin-rest). To access the [Shopify Admin REST API](https://shopify.dev/docs/api/admin-rest) first configure `shopifyApp` with the REST resources you would like to use:
-
-```ts
-// app/routes/**/*.tsx
-import {restResources} from '@shopify/shopify-api/rest/admin/2023-04';
-
-const shopify = shopifyApp({
-  restResources,
-  // ...etc
-});
-```
-
-Next pass a request to `shopify.authenticate.admin` in a loader or an action. This will either redirect the merchant to install your app or it will give you access to API functions. E.g:
-
-```ts
-// app/routes/**/*.tsx
-export const loader = async ({request}: LoaderArgs) => {
-  const {admin, session} = await shopify.authenticate.admin(request);
-  const data = await admin.rest.resources.Product.count({session});
-
-  return json(data);
-};
-```
-
-## Authenticating webhook requests
-
-Your app must respond to [mandatory webhook topics](https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks). In addition, your app can register [optional webhook topics](https://shopify.dev/docs/api/admin-rest/2023-04/resources/webhook#event-topics).
-
-To setup webhooks first we need to configure `shopifyApp` with 2 pieces:
-
-1. The webhooks you want to subscribe to. In this example we subscribe to the `APP_UNINSTALLED` topic.
-2. The code to register the `APP_UNINSTALLED` topic after a merchant installs you app. Here `shopifyApp` provides an `afterAuth` hook.
-
-```ts
-// shopify.server.js
-import {shopifyApp, DeliveryMethod} from '@shopify/shopify-app-remix';
-
-const shopify = shopifyApp({
-  apiKey: '1707326264fde5037c658n120626ce3f',
-  // ...etc
-  webhooks: {
-    APP_UNINSTALLED: {
-      deliveryMethod: DeliveryMethod.Http,
-      callbackUrl: '/webhooks',
-    },
-  },
-  hooks: {
-    afterAuth: async ({session}) => {
-      shopify.registerWebhooks({session});
-    },
-  },
-});
-```
-
-Next you must add a route for each `callbackUrl` you pass. It should use the `shopify.authenticate.webhook` function to authenticate the request. For example:
-
-To do this, your app must authenticate the request.
-
-```ts
-// routes/webhooks.tsx
-import {ActionArgs} from '@remix-run/node';
-
-import shopify from '../shopify.server';
-import db from '../db.server';
-
-export const action = async ({request}) => {
-  const {topic, shop, session} = await authenticate.webhook(request);
-
-  switch (topic) {
-    case 'APP_UNINSTALLED':
-      if (session) {
-        await db.session.deleteMany({where: {shop}});
-      }
-      break;
-    case 'CUSTOMERS_DATA_REQUEST':
-    case 'CUSTOMERS_REDACT':
-    case 'SHOP_REDACT':
-    default:
-      throw new Response('Unhandled webhook topic', {status: 404});
-  }
-
-  throw new Response();
-};
-```
-
-## Authenticating public requests
-
-Your Remix app may need to authenticate requests coming from a public context. An example of this would be a checkout extension. Here is how:
-
-```ts
-// e.g: routes/api.public.notes.tsx
-import shopify from '../shopify.server';
-import {LoaderArgs, json} from '@remix-run/node';
-import {getNotes} from '~/models/notes';
-
-export const loader = async ({request}: LoaderArgs) => {
-  const {sessionToken, cors} = await shopify.authenticate.public(request);
-
-  // E.g: Get notes using the shops admin domain
-  return cors(json(await getNotes(sessionToken.iss)));
-};
-```
-
-This can be useful if your app exposes checkout or theme extensions and those extensions need to access data from your app.
-
-**Note:** These requests will be cross-origin. So you must use the cross-origin helper returned from `shopify.authenticate.public`.
-
-## Session Storage
-
-When calling `shopifyApp`, you must pass in a `sesionStorage` to store sessions.
-You can change this by passing a different Session Adaptor to `shopifyApp`.
-To make this easy Shopify offers [some production ready session adaptors](https://github.com/Shopify/shopify-app-js/tree/main/packages).
-
-In this example we'll swap the default session adaptor for [Prisma](https://www.prisma.io/).
-
-Let's pass the [Prisma app session storage](https://github.com/Shopify/shopify-app-js/blob/main/packages/shopify-app-session-storage-prisma/README.md) adaptor to `shopifyApp`:
-
-```ts
-// app/shopify.server.js
-import {shopifyApp} from '@shopify/shopify-app-remix';
-import {PrismaSessionStorage} from '@shopify/shopify-app-session-storage-prisma';
-import {PrismaClient} from '@prisma/client';
-
-const prisma = new PrismaClient();
-const storage = new PrismaSessionStorage(prisma);
-
-const shopify = shopifyApp({
-  sessionStorage: storage,
-  // ...
-});
-```
-
-Note that this requires a `schema.prisma` file as defined in the README for [Prisma app session storage](https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma).
-Remember to [set up your migrations](https://www.prisma.io/docs/concepts/components/prisma-migrate/get-started) after creating the schema file!
+You can also authenticate requests from surfaces other than the admin.
+To see all supported methods, see [the `shopify.authenticate` object documentation](https://shopify.dev/docs/api/shopify-app-remix/latest/authenticate).
 
 ## Gotchas / Troubleshooting
 
-### Navigating to other pages breaks
-
-In Remix apps, you can navigate to a different page either by adding an `<a>` tag, or using the `<Link>` component from `@remix-run/react`.
-
-In Shopify Remix apps you should avoid using `<a>`.
-Use `<Link> `from `@remix-run/react` instead.
-This ensures that your user remains authenticated.
+If you're experiencing unexpected behaviors when using this package, check our [app template's documentation](https://github.com/Shopify/shopify-app-template-remix#gotchas--troubleshooting) for the solution to common issues.

package/build/cjs/react/components/AppProvider/AppProvider.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('react');
 var polaris = require('@shopify/polaris');
 var englishI18n = require('@shopify/polaris/locales/en.json');
 var _const = require('../../const.js');
@@ -14,13 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
 
 /**
- * Sets up the Polaris AppProvider and injects the App Bridge script.
+ * Sets up the Polaris `AppProvider` and injects the App Bridge script.
+ *
+ * This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component
+ * from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`
+ * component.
  *
  * {@link https://polaris.shopify.com/components/utilities/app-provider}
  * {@link https://shopify.dev/tools/app-bridge}
  *
  * @example
- * Wrap your app in the `AppProvider` component and pass in your API key.
+ * <caption>Set up AppProvider.</caption>
+ * <description>Wrap your app in the `AppProvider` component and pass in your API key.</description>
  * ```ts
  * import {authenticate} from '~/shopify.server';
  * import {AppProvider} from '@shopify/shopify-app-remix/react';
@@ -35,7 +39,34 @@ var englishI18n__default = /*#__PURE__*/_interopDefaultLegacy(englishI18n);
  *   const { apiKey } = useLoaderData();
  *
  *   return (
- *     <AppProvider apiKey={apiKey}>
+ *     <AppProvider isEmbeddedApp apiKey={apiKey}>
+ *       <Outlet />
+ *     </AppProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * <caption>Localize Polaris components.</caption>
+ * <description>Pass in a different locale for Polaris to translate its components.</description>
+ * ```ts
+ * import {authenticate} from '~/shopify.server';
+ * import {AppProvider} from '@shopify/shopify-app-remix/react';
+ *
+ * export async function loader({ request }) {
+ *   await authenticate.admin(request);
+ *
+ *   return json({
+ *     apiKey: process.env.SHOPIFY_API_KEY,
+ *     polarisTranslations: require("@shopify/polaris/locales/fr.json"),
+ *   });
+ * }
+ *
+ * export default function App() {
+ *   const { apiKey, polarisTranslations } = useLoaderData();
+ *
+ *   return (
+ *     <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
  *       <Outlet />
  *     </AppProvider>
  *   );

package/build/cjs/server/authenticate/admin/billing/request.js

@@ -11,7 +11,8 @@ function requestBillingFactory(params, request, session) {
   return async function requestBilling({
     plan,
     isTest,
-    returnUrl
+    returnUrl,
+    ...overrides
   }) {
     const {
       api,
@@ -30,7 +31,8 @@ function requestBillingFactory(params, request, session) {
         session,
         isTest,
         returnUrl,
-        returnObject: true
+        returnObject: true,
+        ...overrides
       });
     } catch (error) {
       if (error instanceof shopifyApi.HttpResponseError && error.response.code === 401) {

package/build/cjs/server/authenticate/public/appProxy/authenticate.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var factory = require('../../../clients/admin/factory.js');
+var factory$1 = require('../../../clients/storefront/factory.js');
 
 function authenticateAppProxyFactory(params) {
   const {
@@ -42,7 +43,8 @@ function authenticateAppProxyFactory(params) {
       const context = {
         liquid,
         session: undefined,
-        admin: undefined
+        admin: undefined,
+        storefront: undefined
       };
       return context;
     }
@@ -52,6 +54,10 @@ function authenticateAppProxyFactory(params) {
       admin: factory.adminClientFactory({
         params,
         session
+      }),
+      storefront: factory$1.storefrontClientFactory({
+        params,
+        session
       })
     };
     return context;

package/build/cjs/server/authenticate/public/factory.js

@@ -11,7 +11,7 @@ function authenticatePublicFactory(params) {
   } = params;
   const authenticateCheckout = authenticate$1.authenticateCheckoutFactory(params);
   const authenticatePublic = (request, options) => {
-    logger.deprecated('2.0.0', 'authenticate.public() will be deprecated in v2. Use authenticate.public.checkout() instead.');
+    logger.deprecated('3.0.0', 'authenticate.public() will be deprecated in v3. Use authenticate.public.checkout() instead.');
     return authenticateCheckout(request, options);
   };
   authenticatePublic.checkout = authenticateCheckout;

package/build/cjs/server/authenticate/webhooks/authenticate.js

@@ -2,11 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function authenticateWebhookFactory({
-  api,
-  config,
-  logger
-}) {
+var factory = require('../../clients/admin/factory.js');
+require('@shopify/shopify-api/runtime');
+var handleClientError = require('../admin/helpers/handle-client-error.js');
+require('@remix-run/server-runtime');
+
+function authenticateWebhookFactory(params) {
+  const {
+    api,
+    config,
+    logger
+  } = params;
   return async function authenticate(request) {
     if (request.method !== 'POST') {
       logger.debug('Received a non-POST request for a webhook. Only POST requests are allowed.', {
@@ -44,24 +50,36 @@ function authenticateWebhookFactory({
     if (!session) {
       return webhookContext;
     }
-    const restClient = new api.clients.Rest({
-      session,
-      apiVersion: check.apiVersion
-    });
-    const graphqlClient = new api.clients.Graphql({
-      session,
-      apiVersion: check.apiVersion
-    });
-    Object.entries(api.rest).forEach(([name, resource]) => {
-      Reflect.set(restClient, name, resource);
-    });
+    let admin;
+    if (config.future.v3_webhookAdminContext) {
+      admin = factory.adminClientFactory({
+        params,
+        session,
+        handleClientError: handleClientError.handleClientErrorFactory({
+          request
+        })
+      });
+    } else {
+      const restClient = new api.clients.Rest({
+        session,
+        apiVersion: check.apiVersion
+      });
+      const graphqlClient = new api.clients.Graphql({
+        session,
+        apiVersion: check.apiVersion
+      });
+      Object.entries(api.rest).forEach(([name, resource]) => {
+        Reflect.set(restClient, name, resource);
+      });
+      admin = {
+        rest: restClient,
+        graphql: graphqlClient
+      };
+    }
     return {
       ...webhookContext,
       session,
-      admin: {
-        rest: restClient,
-        graphql: graphqlClient
-      }
+      admin: admin
     };
   };
 }

package/build/cjs/server/boundary/index.js

@@ -13,10 +13,10 @@ const boundary = {
    * A function that handles errors or thrown responses.
    *
    * @example
-   * Catching errors in a route
+   * <caption>Catching errors in a route</caption>
    * ```ts
-   * // app/routes/admin/widgets.ts
-   * import { boundary } from "@shopify/shopify-app-remix";
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
    *
    * export function ErrorBoundary() {
    *   return boundary.error(useRouteError());
@@ -28,10 +28,10 @@ const boundary = {
    * A function that sets the appropriate document repsonse headers.
    *
    * @example
-   * Catching errors in a route
+   * <caption>Catching errors in a route</caption>
    * ```ts
-   * // app/routes/admin/widgets.ts
-   * import { boundary } from "@shopify/shopify-app-remix";
+   * // /app/routes/admin/widgets.ts
+   * import { boundary } from "@shopify/shopify-app-remix/server";
    *
    * export const headers = (headersArgs) => {
    *   return boundary.headers(headersArgs);

package/build/cjs/server/clients/storefront/factory.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var runtime = require('@shopify/shopify-api/runtime');
+
+function storefrontClientFactory({
+  params,
+  session
+}) {
+  const {
+    api
+  } = params;
+  return {
+    graphql: async (query, options = {}) => {
+      const client = new api.clients.Storefront({
+        session,
+        apiVersion: options.apiVersion
+      });
+      const apiResponse = await client.query({
+        data: {
+          query,
+          variables: options === null || options === void 0 ? void 0 : options.variables
+        },
+        tries: options.tries,
+        extraHeaders: options.headers
+      });
+      return new Response(JSON.stringify(apiResponse.body), {
+        headers: runtime.flatHeaders(apiResponse.headers)
+      });
+    }
+  };
+}
+
+exports.storefrontClientFactory = storefrontClientFactory;