Choose a version:

Unauthenticated storefront

Allows interacting with the Storefront API when working outside of Shopify requests. This enables apps to integrate with 3rd party services and perform background tasks.

Caution

This function doesn't perform any validation and shouldn't rely on raw user input.

When using this function, consider the following:

Anchor to Background tasksBackground tasks

Apps should ensure that the shop domain is authenticated when enqueueing jobs.

Anchor to 3rd party service requests3rd party service requests

Apps must obtain the shop domain from the 3rd party service in a secure way.

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
```

Session

Stores App information from logged in merchants so they can make authenticated requests to the Admin API.

id
The unique identifier for the session.
```
string
```
shop
The Shopify shop domain, such as `example.myshopify.com`.
```
string
```
state
The state of the session. Used for the OAuth authentication code flow.
```
string
```
isOnline
Whether the access token in the session is online or offline.
```
boolean
```
scope
The desired scopes for the access token, at the time the session was created.
```
string
```
expires
The date the access token expires.
```
Date
```
accessToken
The access token for the session.
```
string
```
onlineAccessInfo
Information on the user for the session. Only present for online sessions.
```
OnlineAccessInfo
```
isActive
Whether the session is active. Active sessions have an access token that is not expired, and has has the given scopes if scopes is equal to a truthy value.
```
(scopes: string | string[] | AuthScopes, withinMillisecondsOfExpiry?: number) => boolean
```
isScopeChanged
Whether the access token includes the given scopes if they are provided.
```
(scopes: string | string[] | AuthScopes) => boolean
```
isScopeIncluded
Whether the access token includes the given scopes.
```
(scopes: string | string[] | AuthScopes) => boolean
```

isExpired

Whether the access token is expired.

(withinMillisecondsOfExpiry?: number) => boolean

toObject
Converts an object with data into a Session.
```
() => SessionParams
```
equals
Checks whether the given session is equal to this session.
```
(other: Session) => boolean
```
toPropertyArray
Converts the session into an array of key-value pairs.
```
(returnUserData?: boolean) => [string, string | number | boolean][]
```

OnlineAccessInfo

associated_user
The user associated with the access token.
```
OnlineAccessUser
```
associated_user_scope
The effective set of scopes for the session.
```
string
```
expires_in
How long the access token is valid for, in seconds.
```
number
```

OnlineAccessUser

account_owner
Whether the user is the account owner.
```
boolean
```
collaborator
Whether the user is a collaborator.
```
boolean
```
email
The user's email address.
```
string
```
email_verified
Whether the user has verified their email address.
```
boolean
```
first_name
The user's first name.
```
string
```
id
The user's ID.
```
number
```
last_name
The user's last name.
```
string
```
locale
The user's locale.
```
string
```

AuthScopes

A class that represents a set of access token scopes.

has
Checks whether the current set of scopes includes the given one.
```
(scope: string | string[] | AuthScopes) => boolean
```
equals
Checks whether the current set of scopes equals the given one.
```
(otherScopes: string | string[] | AuthScopes) => boolean
```
toString
Returns a comma-separated string with the current set of scopes.
```
() => string
```
toArray
Returns an array with the current set of scopes.
```
(returnOriginalScopes?: boolean) => any[]
```

SessionParams

[key: string]
```
any
```
accessToken
The access token for the session.
```
string
```
expires
The date the access token expires.
```
Date
```
id
The unique identifier for the session.
```
string
```
isOnline
Whether the access token in the session is online or offline.
```
boolean
```
onlineAccessInfo
Information on the user for the session. Only present for online sessions.
```
OnlineAccessInfo | StoredOnlineAccessInfo
```
scope
The scopes for the access token.
```
string
```
shop
The Shopify shop domain.
```
string
```
state
The state of the session. Used for the OAuth authentication code flow.
```
string
```

StoredOnlineAccessInfo

Omit<OnlineAccessInfo, 'associated_user'> & {
  associated_user: Partial<OnlineAccessUser>;
}

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<StorefrontOperations>
```

GraphQLClient

query
```
Operation extends keyof Operations
```

options

GraphQLQueryOptions<Operation, Operations>

returns

interface Promise<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Attaches a callback for only the rejection of the Promise.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of the callback.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}, interface Promise<T> {}, Promise: PromiseConstructor, interface Promise<T> {
    readonly [Symbol.toStringTag]: string;
}, interface Promise<T> {
    /**
     * Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The
     * resolved value cannot be modified from the callback.
     * @param onfinally The callback to execute when the Promise is settled (fulfilled or rejected).
     * @returns A Promise for the completion of the callback.
     */
    finally(onfinally?: (() => void) | undefined | null): Promise<T>;
}

GraphQLQueryOptions

apiVersion
The version of the API to use for the request.
```
ApiVersion
```
headers
Additional headers to include in the request.
```
Record<string, any>
```
signal
An optional AbortSignal to cancel the request.
```
AbortSignal
```
tries
The total number of times to try the request if it fails.
```
number
```
variables
The variables to pass to the operation.
```
ApiClientRequestOptions<Operation, Operations>
```

ApiVersion

October24
```
2024-10
```
January25
```
2025-01
```
April25
```
2025-04
```
July25
```
2025-07
```
October25
```
2025-10
```
January26
```
2026-01
```
April26
```
2026-04
```
Unstable
```
unstable
```

Examples

app/routes/**\/.ts

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

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

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

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

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 { LoaderFunctionArgs, json } from "@remix-run/node";
import { unauthenticated } from "../shopify.server";
import { getMyAppData } from "~/db/model.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  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.

app/routes/**\/.ts

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

export async function action({ request }: ActionFunctionArgs) {
  const shop = getShopFromExternalRequest(request);
  const { storefront } = await unauthenticated.storefront(shop);

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

  return json(await response.json());
}

Handling GraphQL errors

Description

Catch `GraphqlQueryError` errors to see error messages from the API.

/app/routes/**\/*.ts

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const shop = getShopFromExternalRequest(request);
  const { storefront } = await unauthenticated.storefront(shop);

  try {
    const response = await storefront.graphql(
      `#graphql
      query incorrectQuery {
        products(first: 10) {
          nodes {
            not_a_field
          }
        }
      }`,
    );

    return json({ data: await response.json() });
  } catch (error) {
    if (error instanceof GraphqlQueryError) {
      // { errors: { graphQLErrors: [
      //   { message: "Field 'not_a_field' doesn't exist on type 'Product'" }
      // ] } }
      return json({ errors: error.body?.errors }, { status: 500 });
    }
    return json({ message: "An error occurred" }, { status: 500 });
  }
}

/app/shopify.server.ts

import { shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
  // ...
});
export default shopify;
export const unauthenticated = shopify.unauthenticated;

Anchor to RelatedRelated

Interact with the Storefront API.API context

Was this page helpful?

Anchor to Background tasksBackground tasks

Anchor to 3rd party service requests3rd party service requests

Anchor to unauthenticated.storefrontunauthenticated.storefront(shopshop)

Anchor to unauthenticated.storefront-parametersParameters

Anchor to unauthenticated.storefront-returnsReturns

UnauthenticatedStorefrontContext

Session

OnlineAccessInfo

OnlineAccessUser

AuthScopes

SessionParams

StoredOnlineAccessInfo

StorefrontContext

GraphQLClient

GraphQLQueryOptions

ApiVersion

Anchor to RelatedRelated

Anchor to unauthenticated.storefront
unauthenticated.storefront(
shop
)