Webmasters Gallery

Hasura is one of my favorite ways to create a managed GraphQL API for my applications. I find it easy and straightforward as well as suitable for a wide range of use cases. However, since working with Hasura, I’ve seen the same question come up again and again: how should we make an array? Given the fact that array and map are not provided in the type dropdown for rows, what’s the best way to accomplish this?

Truthfully, the concept of an array can be captured by Hasura a few different ways, and what follows is a breakdown of methods to approach this. My personal preference is the last option we’re going to cover, JSONB, but we’ll walk through other options in case you’d like to take another path, as every option has slightly different benefits.

Method 1: Literal arrays, manually

Hasura doesn’t offer “array” as a type, but we can create an array of strings by selecting “Text” and adding square brackets at the end, like this:

What we get is text[], and we’ll be prompted to create arrays in one of two ways:

[“one”, “two”] 
// or 
{“one”, “two”}

Method 2: Create a relationship

We can also create a relationship with another table that’s a series of text elements. To do so, create a row that has the type of text.

We’ll also create a new table via the “Add Table” button in the sidebar, and we’ll create a very simple row, with a unique key for the type we need — text, integer, or whatever is necessary for the data.

Now, click the “Relationships” tab. In the table, select the “Array Relationship” option, give it a name, and reference the original table that was created.

The id of the first table should have a relationship with the id of the second table we just created.

Once it’s saved, you should see the array relationship reflected in the table in the same relationships tab, with an arrow denoting the direction of the relationship.

users.gameId → favoriteGames.id

Now we can look up the array in the “GraphiQL” tab:

Method 3: JSONB

What follows is one of my favorite ways to create an array in Hasura. I like it because it can be really performant. We can use the “JSONB” type and create an array by selecting JSONB from the dropdown. Then we will be prompted in a similar fashion as the text[] option:

When it’s filled out, it will look like this:

From there, not only can we add the arrays to your query as above, but we can also search by tag through multiple indexes, and their GraphiQL tab makes it easy to explore. Check out when I filter the tags by what contains “animation”:

query MyQuery {
  codesamples(where: {tags: {_contains: "animation"}}) {
    userId
    name
    id
  }
}

However, a lookup like this is not necessarily performant out of the box, especially when there are large amounts of data. Luckily, we can define what fields we would like to index. From the “Data” tab at the top, select the “SQL” group in the side panel, and in that area we can define what fields we would like to index in order to maintain a performant lookup. In this example, we’ll create an index on the “tags” field:

create index codesample_gin on codesamples using gin(tags)

This will run the query, and index this lookup, making it more performant in the future.

Wrapping up

Hasura has a wonderful developer experience to set up quick and easy-to-use GraphQL APIs. For those who are interested in setting up arrays with Hasura, I hope this article is helpful.

Thanks to Adron Hall from Hasura who proofed this post.

---

The post Creating Arrays in Hasura appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.