Flow

Contains functions for verifying Shopify Flow extensions. See the [Flow documentation](https://shopify.dev/docs/apps/flow/actions/endpoints) for more information.

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

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

export const action = async ({request}: ActionFunctionArgs) => {
  const {admin, payload} = await authenticate.flow(request);

  const customerId = payload.properties.customer_id;

  const response = await admin.graphql(
    `#graphql
    mutation setMetafield($customerId: ID!, $time: String!) {
      metafieldsSet(metafields: {
        ownerId: $customerId
        namespace: "my-app",
        key: "last_flow_update",
        value: $time,
        type: "string",
      }) {
        metafields {
          key
          value
        }
      }
    }
    `,
    {
      variables: {
        customerId,
        time: new Date().toISOString(),
      },
    },
  );
  const body = await response.json();

  console.log('Updated value', body.data!.metafieldsSet!.metafields![0].value);

  return new Response();
};

authenticate.flow

Verifies requests coming from Shopify Flow extensions.

AuthenticateFlow

Returns: Promise<FlowContext<Resources>>

Params:

request: Request

export type AuthenticateFlow< Resources extends ShopifyRestResources = ShopifyRestResources, > = (request: Request) => Promise<FlowContext<Resources>>;

FlowContext

session

A session with an offline token for the shop. Returned only if there is a session for the shop.

payload

The payload from the Flow request.

admin

An admin context for the Flow request. Returned only if there is a session for the shop.

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

Related

• Admin API context
• Flow action endpoints

Examples

Contains functions for verifying Shopify Flow extensions. See the [Flow documentation](https://shopify.dev/docs/apps/flow/actions/endpoints) for more information.

session

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const { session, admin } = await authenticate.flow(request);

  const products = await admin?.rest.resources.Product.all({ session });
  // Use products

  return new Response();
};

payload

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const { payload } = await authenticate.flow(request);
  return new Response();
};

admin

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

export async function action({ request }: ActionFunctionArgs) {
  const { admin } = await authenticate.flow(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 });
}