App proxyobject
object
The function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.
Authenticates requests coming from Shopify app proxies.
- Anchor to requestrequestRequestrequired
Promise< | >
AuthenticateAppProxy
- request
Request
Promise<AppProxyContext | AppProxyContextWithSession>export type AuthenticateAppProxy = (
request: Request,
) => Promise<AppProxyContext | AppProxyContextWithSession>;AppProxyContext
- session
No session is available for the shop that made this request. This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
undefined - admin
No session is available for the shop that made this request. Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.
undefined - storefront
No session is available for the shop that made this request. Therefore no method for interacting with the Storefront API is available.
undefined - liquid
A utility for creating a Liquid Response.
LiquidResponseFunction
export interface AppProxyContext extends Context {
/**
* No session is available for the shop that made this request.
*
* This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
*/
session: undefined;
/**
* No session is available for the shop that made this request.
* Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.
*/
admin: undefined;
/**
* No session is available for the shop that made this request.
* Therefore no method for interacting with the Storefront API is available.
*/
storefront: undefined;
}LiquidResponseFunction
- body
string - initAndOptions
number | (ResponseInit & Options)
Responseexport type LiquidResponseFunction = (
body: string,
initAndOptions?: number | (ResponseInit & Options),
) => Response;Options
- layout
boolean
interface Options {
layout?: boolean;
}AppProxyContextWithSession
- session
The session for the shop that made the request. This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice. Use this to get shop or user-specific data.
Session - admin
Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.
AdminApiContext<Resources> - storefront
Method for interacting with the Shopify Storefront Graphql API for the store that made the request.
StorefrontContext - liquid
A utility for creating a Liquid Response.
LiquidResponseFunction
export interface AppProxyContextWithSession<
Resources extends ShopifyRestResources = ShopifyRestResources,
> extends Context {
/**
* The session for the shop that made the request.
*
* This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.
*
* Use this to get shop or user-specific data.
*
* @example
* <caption>Using the session object.</caption>
* <description>Get your app's data using an offline session for the shop that made the request.</description>
* ```ts
* // app/routes/**\/.ts
* import { json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
* import { getMyAppModelData } from "~/db/model.server";
*
* export const loader = async ({ request }) => {
* const { session } = await authenticate.public.appProxy(request);
* return json(await getMyAppModelData({shop: session.shop));
* };
* ```
*/
session: Session;
/**
* Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.
*
* @example
* <caption>Interacting with the Admin API.</caption>
* <description>Use the `admin` object to interact with the REST or GraphQL APIs.</description>
* ```ts
* // app/routes/**\/.ts
* import { json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
*
* export async function action({ request }: ActionArgs) {
* const { admin } = await authenticate.public.appProxy(request);
*
* const response = await admin.graphql(
* `#graphql
* mutation populateProduct($input: ProductInput!) {
* productCreate(input: $input) {
* product {
* id
* }
* }
* }`,
* { variables: { input: { title: "Product Name" } } }
* );
*
* const productData = await response.json();
* return json({ data: productData.data });
* }
* ```
*/
admin: AdminApiContext<Resources>;
/**
* Method for interacting with the Shopify Storefront Graphql API for the store that made the request.
*
* @example
* <caption>Interacting with the Storefront API.</caption>
* <description>Use the `storefront` object to interact with the GraphQL API.</description>
* ```ts
* // app/routes/**\/.ts
* import { json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
*
* export async function action({ request }: ActionArgs) {
* const { admin } = await authenticate.public.appProxy(request);
*
* const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);
*
* return json(await response.json());
* }
* ```
*/
storefront: StorefrontContext;
}AdminApiContext
- rest
Methods for interacting with the Shopify Admin REST API There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.
RestClientWithResources<Resources> - graphql
Methods for interacting with the Shopify Admin GraphQL API
GraphQLClient
export interface AdminApiContext<
Resources extends ShopifyRestResources = ShopifyRestResources,
> {
/**
* Methods for interacting with the Shopify Admin REST API
*
* There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.
*
* {@link https://shopify.dev/docs/api/admin-rest}
*
* @example
* <caption>Using REST resources.</caption>
* <description>Getting the number of orders in a store using REST resources.</description>
*
* ```ts
* // /app/shopify.server.ts
* import { shopifyApp } from "@shopify/shopify-app-remix/server";
* import { restResources } from "@shopify/shopify-api/rest/admin/2023-07";
*
* const shopify = shopifyApp({
* restResources,
* // ...etc
* });
* export default shopify;
* export const authenticate = shopify.authenticate;
* ```
*
* ```ts
* // /app/routes/**\/*.ts
* import { LoaderArgs, json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
*
* export const loader = async ({ request }: LoaderArgs) => {
* const { admin, session } = await authenticate.admin(request);
* return json(admin.rest.resources.Order.count({ session }));
* };
* ```
*
* @example
* <caption>Performing a GET request to the REST API.</caption>
* <description>Use `admin.rest.<method>` to make custom requests to the API.</description>
*
* ```ts
* // /app/shopify.server.ts
* import { shopifyApp } from "@shopify/shopify-app-remix/server";
* import { restResources } from "@shopify/shopify-api/rest/admin/2023-04";
*
* const shopify = shopifyApp({
* restResources,
* // ...etc
* });
* export default shopify;
* export const authenticate = shopify.authenticate;
* ```
*
* ```ts
* // /app/routes/**\/*.ts
* import { LoaderArgs, json } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
*
* export const loader = async ({ request }: LoaderArgs) => {
* const { admin, session } = await authenticate.admin(request);
* const response = await admin.rest.get({ path: "/customers/count.json" });
* const customers = await response.json();
* return json({ customers });
* };
* ```
*/
rest: RestClientWithResources<Resources>;
/**
* Methods for interacting with the Shopify Admin GraphQL API
*
* {@link https://shopify.dev/docs/api/admin-graphql}
* {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}
*
* @example
* <caption>Querying the GraphQL API.</caption>
* <description>Use `admin.graphql` to make query / mutation requests.</description>
* ```ts
* import { ActionArgs } from "@remix-run/node";
* import { authenticate } from "../shopify.server";
*
* export async function action({ request }: ActionArgs) {
* const { admin } = await authenticate.admin(request);
*
* const response = await admin.graphql(
* `#graphql
* mutation populateProduct($input: ProductInput!) {
* productCreate(input: $input) {
* product {
* id
* }
* }
* }`,
* { variables: { input: { title: "Product Name" } } }
* );
*
* const productData = await response.json();
* return json({ data: productData.data });
* }
* ```
*/
graphql: GraphQLClient;
}RestClientWithResources
RemixRestClient & {resources: Resources}StorefrontContext
- 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
export interface StorefrontContext {
/**
* 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).
*
* {@link https://shopify.dev/docs/api/storefront}
*
* @example
* <caption>Querying the GraphQL API.</caption>
* <description>Use `storefront.graphql` to make query / mutation requests.</description>
* ```ts
* 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 });
* }
* ```
*/
graphql: GraphQLClient;
}Was this section helpful?
Anchor to examplesExamples
Anchor to example-sessionsession
Anchor to example-using-the-session-objectUsing the session object
Get your app's data using an offline session for the shop that made the request.
Was this section helpful?
Using the session object
app/routes/**\/.ts
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { getMyAppModelData } from "~/db/model.server";
export const loader = async ({ request }) => {
const { session } = await authenticate.public.appProxy(request);
return json(await getMyAppModelData({shop: session.shop));
};
examples
Using the session object
description
Get your app's data using an offline session for the shop that made the request.
app/routes/**\/.ts
import { json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; import { getMyAppModelData } from "~/db/model.server"; export const loader = async ({ request }) => { const { session } = await authenticate.public.appProxy(request); return json(await getMyAppModelData({shop: session.shop)); };
Anchor to example-interacting-with-the-admin-apiInteracting with the Admin API
Use the admin object to interact with the REST or GraphQL APIs.
Was this section helpful?
Interacting with the Admin API
app/routes/**\/.ts
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export async function action({ request }: ActionArgs) {
const { admin } = await authenticate.public.appProxy(request);
const response = await admin.graphql(
`#graphql
mutation populateProduct($input: ProductInput!) {
productCreate(input: $input) {
product {
id
}
}
}`,
{ variables: { input: { title: "Product Name" } } }
);
const productData = await response.json();
return json({ data: productData.data });
}
examples
Interacting with the Admin API
description
Use the `admin` object to interact with the REST or GraphQL APIs.
app/routes/**\/.ts
import { json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; export async function action({ request }: ActionArgs) { const { admin } = await authenticate.public.appProxy(request); const response = await admin.graphql( `#graphql mutation populateProduct($input: ProductInput!) { productCreate(input: $input) { product { id } } }`, { variables: { input: { title: "Product Name" } } } ); const productData = await response.json(); return json({ data: productData.data }); }
Anchor to example-storefrontstorefront
Anchor to example-interacting-with-the-storefront-apiInteracting with the Storefront API
Use the storefront object to interact with the GraphQL API.
Was this section helpful?
Interacting with the Storefront API
app/routes/**\/.ts
import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export async function action({ request }: ActionArgs) {
const { admin } = await authenticate.public.appProxy(request);
const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`);
return json(await response.json());
}
examples
Interacting with the Storefront API
description
Use the `storefront` object to interact with the GraphQL API.
app/routes/**\/.ts
import { json } from "@remix-run/node"; import { authenticate } from "../shopify.server"; export async function action({ request }: ActionArgs) { const { admin } = await authenticate.public.appProxy(request); const response = await storefront.graphql(`{blogs(first: 10) { edges { node { id } } } }`); return json(await response.json()); }
Anchor to example-liquidliquid
Anchor to example-rendering-liquid-contentRendering liquid content
Use the liquid helper to render a Response with Liquid content.
Was this section helpful?
Rendering liquid content
app/routes/**\/.ts
import {authenticate} from "~/shopify.server"
export async function loader({ request }) {
const {liquid} = authenticate.public.appProxy(request);
return liquid("Hello {{shop.name}}")
}
examples
Rendering liquid content
description
Use the `liquid` helper to render a `Response` with Liquid content.
app/routes/**\/.ts
import {authenticate} from "~/shopify.server" export async function loader({ request }) { const {liquid} = authenticate.public.appProxy(request); return liquid("Hello {{shop.name}}") }
