# App proxy

The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.

## authenticate.public.appProxy

Authenticates requests coming from Shopify app proxies.

### AuthenticateAppProxy

#### Returns: Promise<AppProxyContext | AppProxyContextWithSession>

#### Params:

- request: Request
export type AuthenticateAppProxy = (
  request: Request,
) => Promise<AppProxyContext | AppProxyContextWithSession>;


### AppProxyContext

### session

value: `undefined`

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

value: `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.

### storefront

value: `undefined`

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

### liquid

value: `LiquidResponseFunction`

  - LiquidResponseFunction: export type LiquidResponseFunction = (
  body: string,
  initAndOptions?: number | (ResponseInit & Options),
) => Response;
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

value: `boolean`


### AppProxyContextWithSession

### session

value: `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

value: `AdminApiContext<Resources>`

  - AdminApiContext: 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;
}
Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.

### storefront

value: `StorefrontContext`

  - StorefrontContext: 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;
}
Method for interacting with the Shopify Storefront Graphql API for the store that made the request.

### liquid

value: `LiquidResponseFunction`

  - LiquidResponseFunction: export type LiquidResponseFunction = (
  body: string,
  initAndOptions?: number | (ResponseInit & Options),
) => Response;
A utility for creating a Liquid Response.

### AdminApiContext

### rest

value: `RestClientWithResources<Resources>`

  - RestClientWithResources: RemixRestClient & {resources: Resources}
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

value: `GraphQLClient`

Methods for interacting with the Shopify Admin GraphQL API











### StorefrontContext

### graphql

value: `GraphQLClient`

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






## Related

- [Admin API context](https://shopify.dev/docs/api/shopify-app-remix/apis/admin-api)
- [Storefront API context](https://shopify.dev/docs/api/shopify-app-remix/apis/storefront-api)

## Examples

The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.


### session

Get your app's data using an offline session for the shop that made the request.```typescript
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));
};
```


### admin

Use the `admin` object to interact with the REST or GraphQL APIs.```typescript
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 });
}
```


### storefront

Use the `storefront` object to interact with the GraphQL API.```typescript
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());
}
```


### liquid

Use the `liquid` helper to render a `Response` with Liquid content.```typescript
import {authenticate} from "~/shopify.server"

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

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

## Examples

The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.


### session

Get your app's data using an offline session for the shop that made the request.```typescript
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));
};
```


### admin

Use the `admin` object to interact with the REST or GraphQL APIs.```typescript
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 });
}
```


### storefront

Use the `storefront` object to interact with the GraphQL API.```typescript
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());
}
```


### liquid

Use the `liquid` helper to render a `Response` with Liquid content.```typescript
import {authenticate} from "~/shopify.server"

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

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