Use Gadget as middleware between an existing service and Shopify

Time to build: ~10 minutes

Requirements

Before starting this tutorial you need the following:

Gadget makes it easy to send Shopify data to an ERP or other existing systems. Integrating with Shopify is a lot of work, so many builders use Gadget as an in-between step. If you need to sync data with Shopify, react to webhooks, or handle authorization, Gadget can be used as middleware that moves data to and from an existing service.

In this tutorial, you will use Gadget to build a middleware application that forwards new orders to an existing service.

You can fork this Gadget project and try it out yourself.

You will still need to set up the Shopify Connection after forking. Continue reading if you want to learn how to connect Gadget to a Shopify store!

Fork on Gadget

Create a Gadget app and connect to Shopify

Our first step will be to set up a Gadget project and connect our backend to a Shopify store via the Shopify connection. Create a new Gadget application.

Create a new Gadget app

To connect our Gadget backend to a Shopify store we have two options. The recommended option if you are new to Gadget and Shopify is to create a custom app via the Shopify Partners dashboard. You can also create a custom application on your Shopify store Admin page. Both of these types of custom apps have a slightly different workflow for connecting, which are detailed below:

Connect to Shopify through the Partners dashboard

Requirements

To complete this connection, you will need a Shopify Partners account as well as a store or development store

Our first step is going to be setting up a custom Shopify application in the Partners dashboard.

Both the Shopify store Admin and the Shopify Partner Dashboard have an Apps section. Ensure that you are on the Shopify Partner Dashboard before continuing.

Click on Apps link in Shopify Partners Dashboard
  • Click the Create App button
Click on Create app button
  • Click the Create app manually button and enter a name for your Shopify app
Shopify's app creation landing page in the Partners Dashboard
  • Go to the Connections page in your Gadget app
The Gadget homescreen, with the Connections link highlighted
  • Copy the API key and API secret key from your newly created Shopify app and paste the values into the Gadget connections page
  • Screenshot of the Partners card selected on the Connections page

Now we get to select what Shopify scopes we give our application access to, while also picking what Shopify data models we want to import into our Gadget app.

  • Enable the read and write scopes for the Shopify Orders API, and select the underlying Order model that we want to import into Gadget
Screeshot of the selected Order read and write scopes, and selected Order model
  • Click Confirm at the bottom of the page

We have successfully created our connection!

Now we want to connect our Gadget app to our custom app in the Partners dashboard.

  • In your Shopify app in the Partners dashboard, click on App setup in the side nav bar so you can edit the App URL and Allowed redirection URL(s) fields
  • Copy the App URL and Allowed redirection URL from the Gadget Connections page and paste them into your custom Shopify App
  • Screenshot of the App URL and Allowed redirection URL(s) that are available on the Connections page after selecting models and scopes
  • Click Connect on the Gadget Connections page to move to scope and model selection

Gadget will copy the selected Shopify models, their types, validations and associations into your Gadget backend. These models are ready to process webhooks as soon as you install the app on a Shopify store.

Order, Shop models imported from Shopify

Add axios npm module

We're going to use axios to forward order data to an existing server.

  • Open the package.json file in the Files explorer
The package.json file in the Files explorer in Gadget
  • Add "axios": "*" as a dependency
  • Click the Run yarn button to load the module
Screenshot of the package.json file with the 'Run yarn' button visible in the top right corner of the file

You will see an installation page open. Once the dependency is installed, you are ready to add your code.

Forward data to an existing service

Now that we have set up our connection to a Shopify store and the axios module installed, we can add some custom code to forward any new orders to our existing service.

  • Go to the Behavior page for the Shopify Order model
Behaviour button for Shopify Order model
  • Click on the Create tile on the Shopify Order model's Actions panel
Select the Create action on the actions panel
  • Add a new Success effect by clicking on the Add Success Effects input box and selecting the Run Code Snippet option
  • Create a new file called forwardToService.ts
  • Click on the Go to file button to open up the file editor
Gif that displays creating a new code file called forwardToService.ts as a success effect in the Create action panel

The following snippet will forward new order information to an existing backend service that was also built using Gadget. You will get a simple response with the id of the order that was forwarded.

TypeScript
1/**
2 * Effect code for Create on Shopify Order
3 * @param { import("gadget-server").CreateShopifyOrderActionContext } context - Everything for running this effect, like the api client, current record, params, etc
4 */
5
6const axios = require("axios");
7
8module.exports = async ({ api, record, params, logger }) => {
9 try {
10 const response = await axios({
11 method: "post",
12 // send a request to a requestbin.io instance
13 // you can replace this url with your own service's url
14 url: "https://eo8l1h133a8wqhs.m.pipedream.net",
15 data: { order: record },
16 });
17 logger.info(response.data);
18 } catch (error) {
19 logger.error({ error });
20 }
21};

This snippet will run every time an order is created. The logger statements will show up in Gadget's built-in Log Viewer tool so you can verify the ids of orders that were successfully forwarded and get response details for failed requests.

You can make a test order on your development store to test your app. You should see a message like the one below in your Gadget app Logs tool.

A screenshot of the Gadget Logs tool displaying a success response.

That is all that is required to use Gadget as middleware! In this example, Gadget gives you hands-off data sync and webhook handling with the Shopify connection, while allowing you to continue to use your existing service.

Next steps

There are many good use cases for Gadget as a middleware service. For example, you could add a code effect that makes an API call on a shop install to set up an account in another system.

There are also other ways to interact with your Gadget app outside of webhook-triggered code effects:

Don't want to automatically forward data to an existing service?

Gadget also automatically generates a CRUD API for each model that can be queried to pull information into an application - see the API Reference for more detail.

Need to do some custom processing before querying your data?

You can build a custom HTTP route or a global action to run custom code.