React is a great tool for building amazing web and mobile experiences. Today, we’re excited to announce a set of rich, strongly typed React hooks for working with your Gadget applications.

The React bindings work with the existing generated Javascript client that we provide for each of your projects, and add a natural way to run queries and mutations within React components. The React bindings join an already impressive roster of features supported by the client, including strong types based on your application schema, automatic authentication, data hydration and caching.

Let’s take a look at an example. Say we have a Blog application with a <inline-code>Post<inline-code> model. Using the existing Javascript client, we could get a list of posts like so:

In a React application however, we need a data fetching pattern that provides a better user experience by displaying a spinner when the data is loading, or displaying errors when a network call fails. Using the Gadget generated client, our code becomes:

The <inline-code>@gadgetinc/react<inline-code> package shares the same strong TypeScript types that the generated Javascript client supports as well, allowing you to explicitly select fields from your models and get autocomplete and warning squiggles in your editor. It also supports sorting, filtering, and traversing relationships across models, so you can select fields of the Post’s author, or its images, or sort to get the most recent posts right in your call to <inline-code>useFindMany<inline-code>.

For example, we can make an explicit selection when querying the posts list, and we’ll get an error if we try to access a property we didn’t select:

And, with or without an explicit selection, we get editor autocomplete when accessing fields of the selected records:

The <inline-code>@gadgetinc/react<inline-code> package includes hooks for everything you can do in with your app's API, like <inline-code>useFindOne<inline-code>, <inline-code>useAction<inline-code>, <inline-code>useBulkAction<inline-code>, and more.