Choose a version:

Storefront API

Contains objects used to interact with the Storefront API.

This object is returned as part of different contexts, such as appProxy, and unauthenticated.storefront.

Anchor to storefrontstorefront

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

Anchor to graphql graphql <StorefrontOperations> required: Method for interacting with the Shopify Storefront GraphQL API

If you're getting incorrect type hints in the Shopify template, follow these instructions.

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

Examples

app/routes/**\/.ts

import { json } from "react-router";

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

export async function action({ request }: ActionFunctionArgs) {

const { storefront } = await authenticate.public.appProxy(request);

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

return (await response.json());

}

Examples

Description

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

app/routes/**\/.ts

import { json } from "react-router";
import { authenticate } from "../shopify.server";

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

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

  return (await response.json());
}

Handling GraphQL errors

Description

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

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

import { ActionFunctionArgs } from "react-router";
import { authenticate } from "../shopify.server";

export const action = async ({ request }: ActionFunctionArgs) => {
  const { storefront } = await authenticate.public.appProxy(request);

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

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

/app/shopify.server.ts

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

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

Anchor to RelatedRelated

Authenticate requests from Shopify app proxies.App proxy context

Interact with the Storefront API on non-Shopify requests.Unauthenticated context

Was this page helpful?