Skip to main content

App proxy
object

App proxies take requests to Shopify links, and redirect them to external links. The authenticate.public.appProxy function validates requests made to app proxies, and returns a context to enable querying Shopify APIs.

Note

If the store has not installed the app, store-related properties such as admin or storefront will be undefined

Anchor to authenticate.public.appProxy
authenticate.public.appProxy(
request
)

Authenticates requests coming to the app from Shopify app proxies.

Anchor to authenticate.public.appProxy-parametersParameters

Anchor to request
request
Request
required

Anchor to authenticate.public.appProxy-returnsReturns

Promise< | >
Was this section helpful?

Authenticate and fetch product information

/app/routes/**.ts

import type {LoaderFunctionArgs} from 'react-router';

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

export const loader = async ({request}: LoaderFunctionArgs) => {
const {storefront, liquid} = await authenticate.public.appProxy(request);

if (!storefront) {
return new Response();
}

const response = await storefront.graphql(
`#graphql
query productTitle {
products(first: 1) {
nodes {
title
}
}
}`,
);
const body = await response.json();

const title = body.data.products.nodes[0].title;

return liquid(`Found product ${title} from {{shop.name}}`);
};

Anchor to examplesExamples

Anchor to example-adminadmin

Anchor to example-interacting-with-the-admin-apiInteracting with the Admin API

Use the admin object to interact with the admin GraphQL API.

Was this section helpful?

Interacting with the Admin API

app/routes/**\/.ts

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

export async function action({ request }: ActionFunctionArgs) {
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 ({ data: productData.data });
}

Anchor to example-liquidliquid

Anchor to example-rendering-liquid-contentRendering liquid content

Use the liquid helper to render a Response with Liquid content using the shop's theme. See the Liquid reference for all the features it enables.

Anchor to example-rendering-liquid-content-without-a-layoutRendering liquid content without a layout

Set the layout option to false to render the Liquid content without a theme.

Anchor to example-rendering-a-form-in-a-liquid-responseRendering a form in a Liquid response

Handle form submissions through an app proxy.

Was this section helpful?

Rendering liquid content

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

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

export async function loader({ request }) {
const {liquid} = await authenticate.public.appProxy(request);

return liquid("Hello {{shop.name}}");
}

Anchor to example-sessionsession

Anchor to example-using-the-session-objectUsing the session object

Get the session for the shop that initiated the request to the app proxy.

Was this section helpful?

Using the session object

app/routes/**\/.ts

import { json } from "react-router";
import { authenticate } from "../shopify.server";
import { getMyAppModelData } from "~/db/model.server";

export const loader = async ({ request }) => {
// Get the session for the shop that initiated the request to the app proxy.
const { session } =
await authenticate.public.appProxy(request);

// Use the session data to make to queries to your database or additional requests.
return (
await getMyAppModelData({shop: session.shop})
);
};

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 "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(
`#graphql
query blogIds {
blogs(first: 10) {
edges {
node {
id
}
}
}
}`
);

return (await response.json());
}

Anchor to relatedRelated

Interact with the Admin API.Admin API context
Interact with the Storefront API.Storefront API context
Use the shop's theme to render a template.Liquid reference