Skip to main content

Flow
object

Contains functions for verifying Shopify Flow extensions.

See the Flow documentation for more information.

Verifies requests coming from Shopify Flow extensions.

Request
required

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

Set a metafield on a customer after a flow call

/app/routes/**.ts

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

Use the admin object in the context to interact with the Admin API.

Was this section helpful?

Flow admin context

/app/routes/flow.tsx

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

Get the request's POST payload.

Was this section helpful?

Flow payload

/app/routes/flow.tsx

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

Anchor to example-shopify-session-for-the-flow-requestShopify session for the Flow request

Use the session associated with this request.

Was this section helpful?

Shopify session for the Flow request

/app/routes/flow.tsx

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

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

console.log(session.id)

return new Response();
};