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()

Authenticates requests coming to the app from Shopify app proxies.

Request
required

Promise< | <ConfigArg, Resources> >
Was this section helpful?

Authenticate and fetch product information

/app/routes/**.ts

import type {LoaderFunctionArgs} from '@remix-run/node';

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}}`);
};

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 "@remix-run/node";
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 json({ data: productData.data });
}

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}}");
}

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 "@remix-run/node";
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 json(
await getMyAppModelData({shop: session.shop})
);
};

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 }: ActionFunctionArgs) {
const { storefront } = await authenticate.public.appProxy(request);

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

return json(await response.json());
}