I’m working on a Shopify app built with Remix and TypeScript, and I’m facing an issue with webhooks. Here’s the scenario:
- When I create a new store and install the app for the first time, the webhook works fine.
- If I update or add new webhook events to the app, and the app is still running, webhooks don’t trigger for the existing store.
- I’ve tried uninstalling and reinstalling the app with the command npm run dev – --reset, but the webhook still does not work on the current store.
- However, if I create a new store and install the app on that store using the same npm run dev – --reset command, webhooks work perfectly fine.
- When I quit running the app (stop the process) and then rerun the app, the webhook stops working on the current store, even though the app is up and running again.
shopify.server.ts:
import “@shopify/shopify-app-remix/adapters/node”;
import {
AppDistribution,
DeliveryMethod,
shopifyApp,
LATEST_API_VERSION,
} from “@shopify/shopify-app-remix/server”;
import { PrismaSessionStorage } from “@shopify/shopify-app-session-storage-prisma”;
import { restResources } from “@shopify/shopify-api/rest/admin/2024-10”;
import prisma from “./db.server”;
const shopify = shopifyApp({
apiKey: process.env.SHOPIFY_API_KEY,
apiSecretKey: process.env.SHOPIFY_API_SECRET || “”,
apiVersion: LATEST_API_VERSION,
scopes: process.env.SCOPES?.split(“,”),
appUrl: process.env.SHOPIFY_APP_URL || “”,
authPathPrefix: “/auth”,
sessionStorage: new PrismaSessionStorage(prisma),
distribution: AppDistribution.AppStore,
restResources,
webhooks: {
APP_UNINSTALLED: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: “/webhooks”,
},
ORDERS_CREATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: “/webhooks”,
},
CARTS_CREATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: “/webhooks”,
},
},
hooks: {
afterAuth: async ({ session }) => {
shopify.registerWebhooks({ session });
},
},
…(process.env.SHOP_CUSTOM_DOMAIN
? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
: {}),
});
export default shopify;
export const apiVersion = LATEST_API_VERSION;
export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
export const authenticate = shopify.authenticate;
export const unauthenticated = shopify.unauthenticated;
export const login = shopify.login;
export const registerWebhooks = shopify.registerWebhooks;
export const sessionStorage = shopify.sessionStorage;
webhooks.tsx:
import { authenticate } from “../shopify.server”;
import db from “../db.server”;
export const action = async ({ request }: any) => {
const { topic, shop, session } = await authenticate.webhook(request);
switch (topic) {
case “APP_UNINSTALLED”:
if (session) {
await db.session.deleteMany({ where: { shop } });
}
break;
case “ORDERS_CREATE”:
console.log(‘Order create webhook triggered’);
break;
case “CARTS_CREATE”:
console.log(‘Cart created webhook triggered’);
break;
case “CUSTOMERS_DATA_REQUEST”:
case “CUSTOMERS_REDACT”:
case “SHOP_REDACT”:
default:
throw new Response(“Unhandled webhook topic”, { status: 404 });
}
// Positive result
throw new Response();
};
Has anyone encountered this issue, or does anyone know how to ensure the webhook works on an existing store after app updates? Any guidance on why this might happen or how to resolve it without creating a new store would be greatly appreciated!