App proxy

[App proxies](/docs/apps/online-store/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`

Authenticate and fetch product information

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

authenticate.public.appProxy

Authenticates requests coming to the app from Shopify app proxies.

AuthenticateAppProxy

Returns: Promise<AppProxyContext | AppProxyContextWithSession>

Params:

request: Request

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.

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.

storefront

No session is available for the shop that made this request. Therefore no method for interacting with the Storefront API is available.

liquid

A utility for creating a Liquid Response.

LiquidResponseFunction

Returns: Response

Params:

body: string

initAndOptions: number | (ResponseInit & Options)

export type LiquidResponseFunction = ( body: string, initAndOptions?: number | (ResponseInit & Options), ) => Response;

Options

layout

Whether to use the shop's theme layout around the Liquid content.

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.

admin

Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.

storefront

Method for interacting with the Shopify Storefront Graphql API for the store that made the request.

liquid

A utility for creating a Liquid Response.

Session

Stores App information from logged in merchants so they can make authenticated requests to the Admin API.

id

The unique identifier for the session.

shop

The Shopify shop domain, such as `example.myshopify.com`.

state

The state of the session. Used for the OAuth authentication code flow.

isOnline

Whether the access token in the session is online or offline.

scope

The desired scopes for the access token, at the time the session was created.

expires

The date the access token expires.

accessToken

The access token for the session.

onlineAccessInfo

Information on the user for the session. Only present for online sessions.

isActive

Whether the session is active. Active sessions have an access token that is not expired, and has the given scopes.

isScopeChanged

Whether the access token has the given scopes.

isExpired

Whether the access token is expired.

toObject

Converts an object with data into a Session.

equals

Checks whether the given session is equal to this session.

toPropertyArray

Converts the session into an array of key-value pairs.

OnlineAccessInfo

expires_in

How long the access token is valid for, in seconds.

associated_user_scope

The effective set of scopes for the session.

associated_user

The user associated with the access token.

OnlineAccessUser

id

The user's ID.

first_name

The user's first name.

last_name

The user's last name.

email

The user's email address.

email_verified

Whether the user has verified their email address.

account_owner

Whether the user is the account owner.

locale

The user's locale.

collaborator

Whether the user is a collaborator.

AuthScopes

A class that represents a set of access token scopes.

has

Checks whether the current set of scopes includes the given one.

equals

Checks whether the current set of scopes equals the given one.

toString

Returns a comma-separated string with the current set of scopes.

toArray

Returns an array with the current set of scopes.

SessionParams

[key: string]

id

The unique identifier for the session.

shop

The Shopify shop domain.

state

The state of the session. Used for the OAuth authentication code flow.

isOnline

Whether the access token in the session is online or offline.

scope

The scopes for the access token.

expires

The date the access token expires.

accessToken

The access token for the session.

onlineAccessInfo

Information on the user for the session. Only present for online sessions.

StoredOnlineAccessInfo

Omit<OnlineAccessInfo, 'associated_user'> & { associated_user: Partial<OnlineAccessUser>; }

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.

graphql

Methods for interacting with the Shopify Admin GraphQL API

RestClientWithResources

RemixRestClient & {resources: Resources}

RemixRestClient

session

get

Performs a GET request on the given path.

post

Performs a POST request on the given path.

put

Performs a PUT request on the given path.

delete

Performs a DELETE request on the given path.

GetRequestParams

path

The path to the resource, relative to the API version root.

type

The type of data expected in the response.

data

The request body.

query

Query parameters to be sent with the request.

extraHeaders

Additional headers to be sent with the request.

tries

The maximum number of times the request can be made if it fails with a throttling or server error.

DataType

JSON

GraphQL

URLEncoded

HeaderParams

Headers to be sent with the request.

Record<string, string | number | string[]>

PostRequestParams

GetRequestParams & { data: Record<string, any> | string; }

GraphQLClient

Returns: interface Promise<T> { /** * Attaches callbacks for the resolution and/or rejection of the Promise. * @param onfulfilled The callback to execute when the Promise is resolved. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of which ever callback is executed. */ then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>; /** * Attaches a callback for only the rejection of the Promise. * @param onrejected The callback to execute when the Promise is rejected. * @returns A Promise for the completion of the callback. */ catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>; }, interface Promise<T> {}, Promise: PromiseConstructor, interface Promise<T> { readonly [Symbol.toStringTag]: string; }, interface Promise<T> { /** * Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The * resolved value cannot be modified from the callback. * @param onfinally The callback to execute when the Promise is settled (fulfilled or rejected). * @returns A Promise for the completion of the callback. */ finally(onfinally?: (() => void) | undefined | null): Promise<T>; }

Params:

query: Operation extends keyof Operations

options: GraphQLQueryOptions<Operation, Operations>

export type GraphQLClient<Operations extends AllOperations> = < Operation extends keyof Operations, >( query: Operation, options?: GraphQLQueryOptions<Operation, Operations>, ) => Promise<GraphQLResponse<Operation, Operations>>;

GraphQLQueryOptions

variables

The variables to pass to the operation.

apiVersion

The version of the API to use for the request.

headers

Additional headers to include in the request.

tries

The total number of times to try the request if it fails.

ApiVersion

October22

January23

April23

July23

October23

January24

April24

Unstable

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

Examples

session

Using the session object

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

admin

Interacting with the Admin API

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

storefront

Interacting with the Storefront API

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

liquid

Rendering liquid content

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

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

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

Rendering liquid content without a layout

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

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

  return liquid(
    "Hello {{shop.name}}",
    { layout: false }
  );
}

Rendering a form in a Liquid response

import { redirect } from "@remix-run/node";
import { authenticate } from "~/shopify.server";

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

  return liquid(`
    <form method="post" action="/apps/proxy/my-action">
      <input type="text" name="field" />
      <button type="submit">Submit</button>
    </form>
  `);
}

export async function action({ request }) {
  await authenticate.public.appProxy(request);

  const formData = await request.formData();
  const field = formData.get("field")?.toString();

  // Perform actions here
  if (field) {
    console.log("Field:", field);
  }

  // Return to the form page
  return redirect("/apps/proxy/my-action");
}