Integrating third party APIs is much harder than it should be. Developers can spend weeks or months authenticating against third party endpoints, setting up webhooks and building out nightly reconciliation jobs.

That’s why we’re excited to announce the launch of Connections,  an instant, production ready integration to third party ecommerce platforms, starting with Shopify. The Shopify Connection allows you to quickly connect any Shopify store via OAuth, and access data from any of Shopify's Admin API endpoints. Instead of wiring up webhooks, managing shop installs, and setting up nightly reconciliation processes manually, Gadget developers are now able to setup up a two-way data sync between their app and a Shopify store, with just a couple of clicks.

Here’s how it works:

• Add a Shopify Connection to your Gadget app from the Connections screen
• Select the API scopes you need from the merchant
• Select the Shopify models you want to import to your app 
• Enter your Shopify API credentials, and hit ‘Submit’
• Watch the data flow

‍

Note: For now, Gadget only connects to Custom Shopify apps, which are installed on individual Shopify stores. We’ll support public apps (that can be listed on the Shopify App Store) in Q1 2022.

Unlike event-driven integration platforms, Gadget Connections offer a lot more than just a simple way to react to a webhook. Connected models are a two-way data sync between your Gadget app and the store. And because a copy of the data is stored in your Gadget database, you can extend, query or change the behavior of the data to fit your needs. Every time you connect to a Shopify store, Gadget gives you:

• A copy each of the Shopify models you selected, inside your Gadget app, with the types, validations and associations built-in
• A CRUD API for each table, pre-configured to populate your models with data coming from the appropriate Shopify webhooks
• The ability to decorate connected models by adding your own fields directly within Gadget. 
• The ability to add or extend existing API actions using the model’s built-in statemachine
• The ability to write data back to the same Shopify store, using a client package that we set up in your Gadget app automatically
• No rate limits
  

Let’s look at an example. If I set up a Gadget application that requests the Shopify Product model, I’ll see new models created in Gadget representing Shopify Product and its associations:

‍
Gadget also generates a CRUD API for my Shopify Product model, represented in a state machine. The CRUD actions in this state machine are automatically wired up to the appropriate webhooks on Shopify’s end. 

So, if the Shopify store fires a <inline-code>product/create<inline-code> webhook, we’ll run your Create action which uses the incoming params from the webhook to create a record in your database. If Shopify fires the <inline-code>product/update<inline-code> webhook, Gadget will run your Update action which updates the record with the incoming params.

What’s special about these actions is that they are yours. You can add Preconditions which will determine when the API action is allowed to run, or Effects which will extend what the Action does when an API call is made.

For example, I can quickly teach Gadget to run a tagging script that reads the incoming webhook, and cross-references the content against a set of keywords stored in a separate Gadget model. When there’s a match, I mark the word as a tag and send it back to Shopify.

module.exports = async ({ api, record, params, logger, connections }) => {
  if (record.changed("body")) {
    // get a unique list of words used in the record's description
    let newTags = [...new Set(record.body.split(" "))]

    // filter down to only those words which are allowed
    const allowedTags = (await api.allowedTags.findMany()).map(tag => tag.keyword)
    const finalTags = newTags.filter(tag => allowedTags.includes(tag))
    logger.info({newTags, allowedTags, finalTags}, "applying new tags")

    const shopify = connections.shopify.forShop('[STORE-URL]')
    await shopify.product.update(params.id, {tags: finalTags.join(',')})
  }
};

We’re really excited to see what you all build with the Shopify Connection.