Choose a version:

Unauthenticated storefront

Allows interacting with the Storefront API on requests that didn't come from Shopify.

Caution

This should only be used for Requests that do not originate from Shopify. You must do your own authentication before using this method. This function doesn't perform any validation and shouldn't rely on unvalidated user input.

Anchor to unauthenticated.storefront
unauthenticated.storefront(
shop
)

Creates an unauthenticated Storefront context.

Anchor to unauthenticated.storefront-parametersParameters

Anchor to shop shop string required

Anchor to unauthenticated.storefront-returnsReturns

Promise<>

UnauthenticatedStorefrontContext

session
The session for the given shop. This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice. This will always be an offline session. You can use this to get shop specific data.
```
Session
```
storefront
Method for interacting with the Shopify GraphQL Storefront API for the given store.
```
StorefrontContext
```

StorefrontContext

Provides utilities that apps can use to make requests to the Storefront API.

graphql
Method for interacting with the Shopify Storefront GraphQL API If you're getting incorrect type hints in the Shopify template, follow [these instructions](https://github.com/Shopify/shopify-app-template-remix/tree/main#incorrect-graphql-hints).
```
GraphQLClient
```

GraphQLClient

query
```
string
```
options
```
GraphQLQueryOptions
```

returns

Promise<Response>

GraphQLQueryOptions

apiVersion
```
ApiVersion
```
headers
```
{ [key: string]: any; }
```
tries
```
number
```
variables
```
QueryVariables
```

QueryVariables

[key: string]
```
any
```

Examples

app/routes/**\/.ts

import { LoaderArgs, json } from "@remix-run/node";

import { unauthenticated } from "../shopify.server";

import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderArgs) => {

const shop = getShopFromExternalRequest(request);

const { session } = await unauthenticated.storefront(shop);

return json(await getMyAppData({shop: session.shop));

};

Examples

Description

Get your app's shop-specific data using the returned offline `session` object.

app/routes/**\/.ts

import { LoaderArgs, json } from "@remix-run/node";
import { unauthenticated } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderArgs) => {
  const shop = getShopFromExternalRequest(request);
  const { session } = await unauthenticated.storefront(shop);
  return json(await getMyAppData({shop: session.shop));
};

Description

Use `storefront.graphql` to make query / mutation requests.

Example

import { ActionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";

export async function action({ request }: ActionArgs) {
  const { storefront } = await authenticate.storefront(request);

  const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);

  const productData = await response.json();
  return json({ data: productData.data });
}

Anchor to RelatedRelated

Interact with the Storefront API.API context

Was this page helpful?