Adding Relay support to Hasura!
Tags: relay, hasura, javascript
Published: 2020-07-09 04:58:52

---
title: Adding Relay support to Hasura!
published: true
date: 2020-06-09 16:21:59 UTC
tags: Relay, Hasura, JavaScript
canonical_url: https://hasura.io/blog/adding-relay-support-to-hasura/
---

<!--kg-card-begin: html-->

🚀 Hasura now has [Relay support](https://github.com/hasura/graphql-engine/releases/tag/v1.3.0-beta.1) and we'd love [your feedback!](https://discordapp.com/invite/hasura) Get an auto-generated Relay backend on top of your database.

<!--kg-card-end: html-->

**[Relay](https://relay.dev/)** 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](https://en.wikipedia.org/wiki/MD5#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](https://relay.dev/docs/en/experimental/a-guided-tour-of-relay).

## 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.

![](https://hasura.io/blog/content/images/2020/06/Screen-Shot-2020-06-06-at-1.29.17-PM.png)

If you have any questions or feedback, please [join us on Discord](https://discordapp.com/invite/hasura) or [tweet us](https://twitter.com/hasurahq) your thoughts. Happy exploring!

![](https://hasura.io/blog/content/images/2020/06/binoculars.gif)

For a more detailed breakdown of Relay and its benefits, check out our [deep-dive on Relay](https://hasura.io/blog/deep-dive-into-relay-graphql-client/).