Storefront APIobject
object
Contains objects used to interact with the Storefront API.
This object is returned as part of different contexts, such as , and unauthenticated.storefront.
Anchor to storefrontstorefront
Provides utilities that apps can use to make requests to the Storefront API.
- Anchor to graphqlgraphqlGraphQLClientrequired
Method for interacting with the Shopify Storefront GraphQL API
If you're getting incorrect type hints in the Shopify template, follow these instructions.
Was this section helpful?
Anchor to examplesExamples
Anchor to example-graphqlgraphql
Anchor to example-querying-the-graphql-apiQuerying the GraphQL API
Use storefront.graphql to make query / mutation requests.
Was this section helpful?
Querying the GraphQL API
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 });
}
Examples
Querying the GraphQL API
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 }); }
