TL;DR: You can now use your Gadget API client and React hooks to build Shopify admin and checkout UI extensions!
Starting today, it’s even easier to build Shopify app extensions with Gadget. We’ve introduced an easy way to fetch data from your app’s backend, without having to store all of your custom data as metafields.
Any Shopify app developer knows that user experience is the bedrock of a successful store. When Shopify introduced app extensions, suddenly app developers had a whole new suite of powerful tools and functionality ready to build upon and improve the user experience for both merchants and buyers alike.
Although you could always include Shopify app extensions in your Gadget apps, the option to fetch data from your backend in Gadget through an API client makes it that much easier. Here’s a quick guide on how to get started.
To build an Admin or Checkout UI extension, the first step is to create a new Shopify CLI app and connect that to your project in Gadget.
Here’s how you can get started:
Once your app is set up, accessing your Gadget backend data is a breeze using the API client within the extension.
Simply navigate into your extension code’s directory and install your Gadget app’s API client, and you’re good to go! Make sure network access is enabled in the extension TOML file if you are building a Checkout UI extension.
With the recent changes, your extension can now access the Gadget API and all the React hooks necessary for building with Shopify app extensions. For instance, you can use the <inline-code>useFindFirst<inline-code> hook to fetch data from your Gadget backend, making it easy to display information like product titles in your extension.
You can also fetch data directly from your GraphQL API endpoint. Make sure to enable network access within your <inline-code>shopify.extension.toml<inline-code> file, write your GraphQL query (or copy it from your Gadget app’s API reference docs), and make a <inline-code>POST<inline-code> request to fetch your data.
This also allows you to pass the Shopify session token to your Gadget backend, allowing you to get the current shop context in your Gadget actions using <inline-code>connections.shopify.current<inline-code>. This is less important for custom apps, but very helpful for Public Shopify applications that need to deal with multi-tenancy.
Metafields provide another method to query and write data within your extension. They serve as a bridge, allowing you to pass and set data seamlessly. Gadget offers a streamlined solution that enables fast synchronization, querying, and mutation of Shopify metafields within the backend of your app. Metafields are the only way to pass in custom data as input when working with Shopify Function extensions.
Regardless of your preferred method of building with Shopify app extensions, you now have the flexibility to incorporate them into your projects in Gadget as needed.