Webhook

Contains functions for verifying Shopify webhooks.

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

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

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

  // Webhook requests can trigger after an app is uninstalled
  // If the app is already uninstalled, the session may be undefined.
  if (!session) {
    throw new Response();
  }

  switch (topic) {
    case 'PRODUCTS_UPDATE':
      await admin.graphql(
        `#graphql
        mutation setMetafield($productId: ID!, $time: String!) {
          metafieldsSet(metafields: {
            ownerId: $productId
            namespace: "my-app",
            key: "webhook_received_at",
            value: $time,
            type: "string",
          }) {
            metafields {
              key
              value
            }
          }
        }
      `,
      {
        variables: {
          productId: payload.admin_graphql_api_id,
          time: new Date().toISOString(),
        },
      },
    );
  }

  return new Response();
};

authenticate.webhook

Verifies requests coming from Shopify webhooks.

AuthenticateWebhook

Returns: Promise<WebhookContext<ConfigArg, Resources, Topics>>

Params:

request: Request

export type AuthenticateWebhook< ConfigArg extends AppConfigArg, Resources extends ShopifyRestResources, Topics = string | number | symbol, > = (request: Request) => Promise<WebhookContext<ConfigArg, Resources, Topics>>;

WebhookContext

WebhookContextWithoutSession<Topics> | WebhookContextWithSession<ConfigArg, Resources, Topics>

WebhookContextWithoutSession

admin

apiVersion

The API version used for the webhook.

payload

The payload from the webhook request.

session

shop

The shop where the webhook was triggered.

subTopic

The sub-topic of the webhook. This is only available for certain webhooks.

topic

The topic of the webhook.

webhookId

A unique ID for the webhook. Useful to keep track of which events your app has already processed.

WebhookContextWithSession

admin

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

apiVersion

The API version used for the webhook.

payload

The payload from the webhook request.

session

A session with an offline token for the shop. Returned only if there is a session for the shop. Webhook requests can trigger after an app is uninstalled If the app is already uninstalled, the session may be undefined. Therefore, you should check for the session before using it.

shop

The shop where the webhook was triggered.

subTopic

The sub-topic of the webhook. This is only available for certain webhooks.

topic

The topic of the webhook.

webhookId

A unique ID for the webhook. Useful to keep track of which events your app has already processed.

Related

• Admin API context

Examples

Contains functions for verifying Shopify webhooks.

admin

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

export async function action({ request }: ActionFunctionArgs) {
  const { admin } = await authenticate.webhook(request);

  // Webhook requests can trigger after an app is uninstalled
  // If the app is already uninstalled, the session may be undefined.
  if (!session) {
    throw new Response();
  }

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

apiVersion

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const { apiVersion } = await authenticate.webhook(request);
  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.webhook(request);
  return new Response();
};

session

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const { session } = await authenticate.webhook(request);
  
  // Webhook requests can trigger after an app is uninstalled
  // If the app is already uninstalled, the session may be undefined.
  if (!session) {
    throw new Response();
  }

  // Handle webhook request
  console.log("Received webhook webhook");

  return new Response();
};

shop

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

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

subTopic

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

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

topic

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

export const action = async ({ request }: ActionFunctionArgs) => {
  const { topic } = await authenticate.webhook(request);

  switch (topic) {
    case "APP_UNINSTALLED":
      // Do something when the app is uninstalled.
      break;
  }

  return new Response();
};

webhookId

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

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