TLDR: See changes to your database as they happen, and get low-latency notifications to keep your frontend updated using realtime queries.

Modern apps need instant access to timely and accurate information. With the constant flux of data in web apps, users expect real-time updates without having to refresh their pages. This introduces a challenge for developers: we need a way to ensure our apps are always up-to-date without compromising on performance.

Enter Gadget's new realtime queries, an easy way to ensure your frontend is able to reflect backend changes instantly.

Put polling in the past

Without realtime data, developers are required to set up workarounds like polling the database on a schedule to see if data has changed over time, a method that tends to be slow and unreliable due to the limitations of those requests. Depending on the window you choose for polling your database, there’s always a risk that the data your end users are seeing is out of date.

Polling your database every few seconds also quickly becomes expensive, as some server somewhere needs to execute that query over and over. Without realtime queries, not only do you run the risk of delivering outdated information, but you have to pay for it too!

Instant, live, and always-on

Ditch the traditional change polling and refresh buttons. With a one line change, you can now subscribe to your backend via WebSocket, and instantly update your UI as data changes. You can show the latest changes to users instantly, because any record creation, update, or deletion in the backend will trigger an immediate re-fetch of data in the frontend.

To turn on live querying, pass the <inline-code>live: true<inline-code> option to the hooks from the <inline-code>@gadgetinc/react<inline-code> library:

Realtime queries are supported in <inline-code>@gadgetinc/react<inline-code> as of version 0.14.9. Existing Gadget users can update their version using the Command Palette by pressing CMD+P, then entering > to start the command mode, then entering: <inline-code>yarn upgrade @gadgetinc/react@latest<inline-code> to upgrade their package version.

Dive deeper into data

Gadget's realtime queries also allow you to dive deeper into nested data. For instance, if you select related records in your queries, changes made to those records will also push updates and trigger re-renders in your component. You can also combine live queries with the select option to specify which fields you want to render, making sure you're always presenting the most relevant, up-to-date information to your users.

Realtime queries are available on both single records and collections of records in Gadget.

How to use realtime queries

To get started, all you need to do is add the live: true option to one of the supported React hooks For example, we could render an up-to-date view of a user’s top 5 most recent unfinished todos in a todo application:

Once this is in place, any relevant changes to the backend to-dos will trigger a re-render of your frontend components, providing an always up-to-date view. This includes new to-dos being created, to-dos getting marked as completed, or to-dos being deleted.

Realtime queries are a necessity in modern app building. With Gadget's out-of-the-box support, building dynamic and real-time applications has never been easier. 

If you have questions about using realtime queries in your next app build you can read about it in our docs, or join the Gadget Discord to connect with other Shopify app developers.