TL;DR: The Gadget framework v1.1 introduces realtime queries for Shopify storefronts, better local dev tooling, and overall improvements to the platform.

‍

Get access to all the latest features and improvements when you upgrade your Gadget apps to framework v1.1. This update comes packed with a number of changes — here’s what's new:

• Run live queries from your app’s imperative API client (ie. in the Shopify storefront)
• Use the new <inline-code>ggt add<inline-code> command to add models, fields, actions, and routes for a better local development experience
• Build with Node v20.12
• Reduce your API client bundle by ~30%
• Improvements to folderization for models and actions

You can upgrade your Gadget app by going to Settings → General → Framework Version → Upgrade, select your version, read through the changelog, and hit the Upgrade and run yarn button. For detailed steps, read our docs.

Now let’s dig into these updates.

Realtime subscriptions with live queries in the imperative API client

In Gadget, you don’t need to make any changes to your backend to use realtime queries, as they now are supported in your app’s imperative API client with zero setup! With this update, all you need to do is pass in a <inline-code>live: true<inline-code> flag to your model read queries, such as <inline-code>findMany<inline-code> or <inline-code>findOne<inline-code>, and realtime querying is enabled.

Before today, realtime queries in Gadget were only available for use when using Gadget’s React hooks to read data for app frontends. This meant they weren’t available when using the imperative API client to call your actions and routes, most notably in the Shopify storefront. With this limitation, building any frontend experiences that needed to accurately reflect the state of data in the backend was a challenge. In a pinch, developers could write custom code and error handling in order to manually poll their backend, but that could negatively impact performance and ultimately results in more code that needs to be maintained.

Now with Gadget, developers have access to realtime queries out of the box. Also known as subscriptions or change events, realtime queries will instantly update the frontend to reflect when a record is created, updated, or deleted in your database. They are an efficient alternative to polling your backend for changes.

Adding <inline-code>live: true<inline-code> to a read action call will return an <inline-code>AsyncIterator<inline-code> that can be looped over with a for await…of loop. You can then add code inside the loop to react to backend and database updates instantly, without needing to worry about manually polling for changes.

This addition to the imperative API client means you can use realtime subscriptions in the Shopify storefront. You could use it to show the number of people currently viewing a product, display the live count of the number of variants offered at a discount, or have a live recommendation for the most recently purchased item or variant for a store or product.

‍Read our docs for more information.

An even better local development experience: `ggt add`

The Gadget CLI tool, <inline-code>ggt<inline-code>, has always allowed you to write your Gadget code locally, but you still needed to open up the Gadget web editor to add new models, fields, actions, or HTTP routes.

Switching contexts in the middle of development is a bummer, so we are introducing the <inline-code>ggt add<inline-code> command that lets you add these resources to your Gadget applications, all from your local environment!

For example, if you were building a blog application, you could run the following commands.

Add a new <inline-code>post<inline-code> model with a title string field:

‍

Add a <inline-code>body<inline-code> string field to that model:

‍

Add a <inline-code>publish<inline-code> action to the post model:

‍

Add a <inline-code>publishAll<inline-code> global action:

‍

Check out our ggt reference for more examples.

And more

Want to keep all your Shopify data models in a single (collapsible) folder? This update also brings improved folderization and the ability to namespace your models and actions so you have more control over the structure of of your Gadget project and API. Read our model and action namespace docs for more information.

In addition to these changes, your app will automatically be migrated to Node 20.12 when you upgrade to Gadget framework v1.1. You can find all of the latest Node changes included on their blog.

Thanks to under-the-hood improvements and optimizations, your Gadget API client size will also shrink by ~25-30% after migrating to v1.1. This will improve the loading speed for all your apps on Gadget, without you having to lift a finger (well, one finger, to click upgrade framework version).

If you have any questions about upgrading to v1.1 or any of the included features, you can always connect with us on our community Discord.