Adding Relay support to Hasura

🚀Hasura now has Relay support and we'd love your feedback! Get an auto-generated Relay backend on top of your database.

Relay is a JavaScript framework for declaratively fetching and managing GraphQL data. It's exceptionally good at:

Minimizing developer errors
Maximizing performance

In both cases, the Relay compiler plays a starring role. During build time, it composes your GraphQL fragments into optimized and efficient batches to reduce round-trips to the server.

These fragments are colocated with their views, so that each component describes exactly what data it needs. This declarative approach has several benefits:

It's hard to over-fetch data (which would hurt performance), or under-fetch data (which might cause errors).
Components can only access data they've asked for. This data masking prevents implicit data dependency bugs.
Components only re-render when the exact data they're using is updated, preventing unnecessary re-renders.

While it's busy composing fragments together, the compiler also applies transforms to your queries to remove redundancies and shorten query strings. This improves performance due to smaller upload bytes.

To get even shorter strings, you can enable persisted queries while running the compiler. This will convert your query strings into md5 hashes. Not only does this boost performance, but it lets you allow-list queries on the server, improving security.

Relay also provides type safety. The compiler automatically generates Flow (or TypeScript) types, which you can import into your component for type checking during build time.

To learn more about these and other Relay features, like local state management, passing arguments to fragments, and fetching data as early as possible, check out the Relay docs.

Relay & Hasura

To enable all these client-side benefits, Relay has a particular server specification. If you're not using Hasura, you have to implement these manually. The server must provide:

A mechanism for refetching an object: The convention is a Node interface with a globally unique id field, as well as a root field called node, which allows fetching data by this id. This is great for performance on the client side, but kind of hard to implement on the server side, since you have to make sure id's are globally unique, objects can be re-fetched via their id's, etc.
A description of how to page through connections: Connections are Relay's way of standardizing pagination. They allow us to communicate more info between the client and the server, such as cursors and page info, so that we can paginate in a predictable pattern. On the client side, Relay saves you a ton of work by keeping track of the details of pagination and merging results automatically. But on the server side, you still need to implement the spec.

By using Hasura, you save a ton of work on the server side as well, because you get an auto-generated Relay backend, which sets up the server spec for you automatically.

To check it out, find the "Relay API" toggle on your Hasura console to get your Relay endpoint.