Use Gadget as middleware between an existing service and Shopify

Time to build: ~10 minutes

Requirements
‍Before starting this tutorial you need the following:
→ a Shopify Partners account
→ a development store

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!

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.

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

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.

• Go to the Shopify Partners dashboard
• Click on the link to the Apps page

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 the Create App button

• Click the Create app manually button and enter a name for your Shopify app

• Go to the Connections page in your Gadget app

• Copy the API key and API secret key from your newly created Shopify app and paste the values into the Gadget connections page
• 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
• Click Connect on the Gadget Connections page to move to scope and model selection

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

• Click Confirm at the bottom of the page

We have successfully created our connection!

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.

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

• Add "axios": "*" as a dependency
• Click the Run yarn button to load the module

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

• Click on the Create tile on the Shopify Order model's 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

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.

This snippet will run every time an order is created. The logger statements will show up in Gadget's built-in Logs 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.

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.