createStorefrontApiClient()
Creates a GraphQL client for the Shopify Storefront API.
import { createStorefrontApiClient } from '@shopify/storefront-api-client';
const client = createStorefrontApiClient({
storeDomain: 'your-store.myshopify.com',
apiVersion: '2024-01',
publicAccessToken: 'your-public-token',
});
Parameters
Your Shopify store domain (e.g., 'your-store.myshopify.com')
Storefront API version (e.g., '2024-01')
Public access token for public storefront access. Either publicAccessToken or privateAccessToken is required.
Private access token for server-side access. Either publicAccessToken or privateAccessToken is required.Private tokens should never be exposed to client-side code
Optional client identifier included in request headers
Number of retry attempts for failed requests
Custom fetch implementation (useful for Node.js environments)
Custom logger for request/response logging
Return Value
Returns a StorefrontApiClient object with the following properties:
config
StorefrontApiClientConfig
The client configuration
Public access token (if using public access)
Private access token (if using private access)
Make a GraphQL request and return the dataconst { data, errors, extensions } = await client.request(query, {
variables: { id: 'gid://shopify/Product/123' }
});
Make a GraphQL request and return the raw responseconst response = await client.fetch(query, {
variables: { id: 'gid://shopify/Product/123' }
});
Make a streaming GraphQL request (for @defer directive)const stream = client.requestStream(query);
for await (const chunk of stream) {
console.log(chunk.data);
}
Get the current request headersconst headers = client.getHeaders();
Get the API URL, optionally for a different API versionconst url = client.getApiUrl('2024-04');
Usage Examples
Public Access (Client-Side)
Use public access tokens for client-side applications:
const client = createStorefrontApiClient({
storeDomain: 'your-store.myshopify.com',
apiVersion: '2024-01',
publicAccessToken: 'your-public-token',
});
const PRODUCT_QUERY = `
query GetProduct($id: ID!) {
product(id: $id) {
id
title
description
priceRange {
minVariantPrice {
amount
currencyCode
}
}
}
}
`;
const { data } = await client.request(PRODUCT_QUERY, {
variables: { id: 'gid://shopify/Product/123' }
});
Private Access (Server-Side)
Use private access tokens for server-side operations:
const client = createStorefrontApiClient({
storeDomain: 'your-store.myshopify.com',
apiVersion: '2024-01',
privateAccessToken: process.env.STOREFRONT_PRIVATE_TOKEN!,
customFetchApi: fetch, // Required in Node.js < 18
});
const CART_CREATE_MUTATION = `
mutation CreateCart($input: CartInput!) {
cartCreate(input: $input) {
cart {
id
checkoutUrl
}
}
}
`;
const { data } = await client.request(CART_CREATE_MUTATION, {
variables: {
input: {
lines: [
{ merchandiseId: 'gid://shopify/ProductVariant/123', quantity: 1 }
]
}
}
});
Streaming Responses with @defer
const DEFERRED_QUERY = `
query GetProducts {
products(first: 10) {
edges {
node {
id
title
... @defer {
description
images(first: 5) {
edges {
node {
url
}
}
}
}
}
}
}
}
`;
const stream = client.requestStream(DEFERRED_QUERY);
for await (const response of stream) {
console.log('Received chunk:', response.data);
}
With TypeScript Codegen
For full type safety, use with @shopify/api-codegen-preset:
import { createStorefrontApiClient } from '@shopify/storefront-api-client';
import type { GetProductQuery, GetProductQueryVariables } from './storefrontTypes';
const client = createStorefrontApiClient({
storeDomain: 'your-store.myshopify.com',
apiVersion: '2024-01',
publicAccessToken: 'your-public-token',
});
const { data } = await client.request<GetProductQuery, GetProductQueryVariables>(
PRODUCT_QUERY,
{ variables: { id: 'gid://shopify/Product/123' } }
);
// data is fully typed!
console.log(data?.product?.title);