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.

Setting up your Admin/Checkout UI extension

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:

1. Open your local terminal and run the command <inline-code>npm init @shopify/app@latest<inline-code> if you’re using npm, or <inline-code>yarn create @shopify/app<inline-code> if you prefer yarn.
2. Choose the option <inline-code>Start by adding your first extension<inline-code>.
3. Once the app is created, navigate into the app's root directory using the <inline-code>cd<inline-code> command.
4. Run the command <inline-code>npm run generate extension<inline-code> (for npm users) or yarn generate extension (for yarn users) to create your extension.
5. Confirm your intention by selecting Yes, and create it as a new app. This creates a new app in your Shopify Partner dashboard.
6. Name your app, then select the type of extension you wish to build and provide a name for it.
7. Update the shopify.app.toml file under the <inline-code>access_scopes<inline-code> section by adding <inline-code>use_legacy_install_flow = true<inline-code>.
8. Push the configuration changes to your Shopify Partner's app using the command <inline-code>shopify app config push<inline-code>.
9. Head over to Gadget, create a new project, and connect it to Shopify using the app you created earlier through the CLI.

Accessing data from your Gadget backend

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.

Fetching data with hooks

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.

Direct HTTP requests

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: your data bridge

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.

‍

Want to learn more about building Shopify extensions in Gadget? Read our documentation or ask questions in our developer Discord.