[shopify-app-remix] Allow to add dynamic webhooks in afterAuth()

[zirkelc]

Overview

The shopifyApp() function accepts webhooks on initialization. These webhooks can then be registered in afterAuth():

const shopify = shopifyApp({
  apiKey: 'abcde1234567890',
  // ...etc
  webhooks: {
    APP_UNINSTALLED: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: '/webhooks',
    },
  },
  hooks: {
    afterAuth: async ({session}) => {
      shopify.registerWebhooks({session});
    },
  },
});

This works for static webhook where the callback URL or AWS event source is static and available on initialization. In my case, the webhook callback URLs depend on values that I first receive after authorization when I have a valid session.

In this case, I cannot use the static webhooks object on shopifyApp(). Instead, I create a second shopifyApp() object inside the afterAuth which I use to register the webhooks:

const shopify = shopifyApp({
  apiKey: 'abcde1234567890',
  // ...etc
  webhooks: {
    APP_UNINSTALLED: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: '/webhooks',
    },
  },
  hooks: {
    afterAuth: async ({session}) => {
       // get app id and tenant id from API
       // ...

       // format dynamic callback url
       const callbackUrl = formatCallbackUrl(appId, tenantId);

        const webhookFactory = shopifyApp({
          ...config,
          webhooks: {
            APP_UNINSTALLED: {
              deliveryMethod: DeliveryMethod.Http,
              callbackUrl: callbackUrl,
            },
        });

        const result = await webhookFactory.registerWebhooks({ session });
    },
  },
});

It would be nice if there were another option to add webhooks to the shopifyApp() instance after it was created. For example, the instance could a expose the webhooks object so that we can add additional webhooks in afterAuth() OR the shopify.registerWebhooks() function could accept an optional object with webhooks to register:

const shopify = shopifyApp({
  apiKey: 'abcde1234567890',
  // ...etc
  webhooks: {
    APP_UNINSTALLED: {
      deliveryMethod: DeliveryMethod.Http,
      callbackUrl: '/webhooks',
    },
  },
  hooks: {
    afterAuth: async ({session}) => {
      // Add webhooks to object
      shopify.webhooks = {  
        ...shopify.webhooks,
        APP_UNINSTALLED: {
              deliveryMethod: DeliveryMethod.Http,
              callbackUrl: "dynamic-url",
          },
      };
      shopify.registerWebhooks({session});

      // OR

      // pass additional webhooks to function
      shopify.registerWebhooks({session, webhooks: { 
         APP_UNINSTALLED: {
             deliveryMethod: DeliveryMethod.Http,
             callbackUrl: "dynamic-url",
         }
      }});
    },
  },
});

[lizkenyon]

Hi there 👋

Thank you for this! There are some webhook changes coming down the pipe, and we are looking to make some improvements in this area. I am going to flag this with the rest of the team, and we will be keeping this in consideration!

[github-actions]

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.

[zirkelc]

Hi @lizkenyon

is there any roadmap for these webhooks changes? :-)

[lizkenyon]

Hi

I added this ticket to our work backlog. There are some things ahead of this, so transparently we won't be starting on this immediately.

With the release of subscribing to webhooks in the shopify.app.toml file, it makes sense for us to have a high DX way for dynamically subscribing shops to webhooks. We will update this ticket with an idea of the what the API for this will look like when we start working on it.