Metafields are an important part of developing on Shopify. They allow you to extend Shopify’s data model to store additional information on resources like orders, customers, products, shop, and more.

In spite of their importance and popularity, working with metafields can be a real challenge for developers. For starters, the data is stored in a separate resource on Shopify’s end (the “metafield object”), whereas you almost certainly want the data right on the resource you are extending with that metafield. And on top of that, Shopify’s API rate limits make this additional resource hopping even more cumbersome to navigate.

To simplify this experience, Gadget now offers developers a faster and easier way to sync, query and mutate Shopify metafields in their backend. Simply drop the metafield’s namespace and key on the desired resource and let Gadget take care of the rest.

How it works

Let’s imagine a scenario where a Shopify merchant has asked us to build them a custom report, in the form of a table, that pulls the spiciest products from their inventory, sorts them based on spiciness and displays them in a table. We notice that the merchant is manually entering the spiciness of each product as a metafield on the product, with the following specifications:

Namespace: <inline-code>gadget_app<inline-code>

Key: <inline-code>spiciness<inline-code>

Metafield type: <inline-code>number_integer<inline-code>

In order to build this table, we’ll not only need the product and order data from Shopify, but also the metafield values stored under this namespace and key. To pull the data in Gadget, we simply go to the Connections screen and add a new Shopify Connection. We select the product and orders models and enter our Shopify API credentials. Gadget immediately produces a copy of both models in our backend, and wires up a CRUD API that will populate our models as data is synced or webhooks are received from Shopify. 

Before we start syncing any data, we need to decide where to store the desired metafield values in Gadget. A natural place to do this would be on the product model itself, allowing us to skip unnecessary hops when reading or writing data to our Gadget backend. To do this, we simply go to the newly created Shopify Product model in Gadget and decorate it by adding a field. We give the field a name and a <inline-code>Number<inline-code> type so that it can accept the incoming data from Shopify. Once that’s done, we’re presented with a form that lets us link this Gadget field to a specific Shopify metafield using the namespace and key provided by Shopify. Enter the namespace and key, hit “Register Webhooks”, and Gadget automatically registers for webhooks on that metafield moving forward. It’s as easy as that!

Here's what the form looks like when it's completed correctly in Gadget:

We’re now ready to sync data. To do this, we go back to the Connections screen in Gadget and hit the “Sync” button. Gadget will artfully work around Shopify’s rate limits and fetch all of the product and order records available, as well as any metafield data we’ve instructed Gadget to store. We can look at the <inline-code>Data<inline-code> section of the Product model to make sure that both the product and metafield values are being synced correctly.

We now have all of our data, joined together as desired, in our Gadget backend. Because Gadget instantly creates a CRUD API for every model in our backend, we have the ability to query data from these tables without worrying about Shopify’s rate limits. To build a table that sorts and displays products with a spiciness score > 5, we can run the following GraphQL query:

query {
  shopifyProducts(
    filter: { spiciness: { greaterThan: 5 } }
    sort: { spiciness: Ascending }
  ) {
    edges {
      node {
        title
        id
        spiciness
        handle
      }
    }
  }
}

And just like that, we have the data we need to power this custom table. We didn’t waste time integrating Shopify, or working on strategies to manage rate limits. We simply specified the data we wanted, and where we wanted it, and Gadget did all the heavy lifting for us.

Metafield support is now live on all Gadget projects. To learn more about metafields and how to mutate them, read our documentation.

‍