Combining Contentful GraphQL and Postgres via Hasura
Tags: contentful, hasura, graphql, bread
Published: 2020-09-22 14:19:25

---
title: Combining Contentful GraphQL and Postgres via Hasura
published: true
description: Need to use a database to store user data alongside content? I’ll show you how to use Hasura to do just that! 
tags: Contentful, Hasura, GraphQL, Bread
canonical_url: https://www.contentful.com/blog/2020/09/17/combining-contentful-graphql-postgres-hasura
cover_image: https://images.ctfassets.net/fo9twyrwpveg/18c1LEW1kAm77cuHJ1SyJe/9a125c4cd37818df8692fecaffca2ee9/xTGj43Qx.png?fm=webp&q=90&w=1028
series: Shy's Contentful GraphQL Posts
---

GraphQL enables you to use schema stitching to create a single GraphQL schema from multiple underlying GraphQL APIs. We’ve talked in the abstract about  how useful [schema stitching](https://www.contentful.com/blog/2019/01/23/combining-apis-graphql-schema-stitching-part-1/) can be, and we showcased how you can create your own [stitching proxy from scratch](https://www.contentful.com/blog/2019/01/30/combining-apis-graphql-schema-stitching-part-2/). In this post, I’m going to create a simple program that demonstrates how to merge a Contentful and Postgres database to achieve scheme stitching via [Hasura](https://hasura.io/ "Hasura Website")’s remote schema relationships. 

I’ve been baking a lot during lockdown. If you’ve tuned into any of our [livestreams](https://www.contentful.com/blog/2020/08/07/its-the-summer-of-graphql-livestreams-contentful/) over the past few weeks, you would have seen that I stored all of my recipes in Contentful. For this example, I’m going to set up a database using Hasura that’ll enable users to set some of my recipes as their favorites. This will enable me to make a GraphQL query that’ll return an individual user’s favorite recipes and pull in the relevant content — all in a single query. 

# The setup: Contentful and Hasura

If you’d prefer to learn about this topic by watching a video, checkout the livestream we hosted with Praveen from Hasura. This post assumes some familiarity with our GraphQL API, and we’ve made it easy to get familiar! My colleague Stefan posted an excellent course to help you learn how to [get started with Contentful and GraphQL](https://www.contentful.com/developers/videos/learn-graphql/). 

Before you get started, make sure that you have Contentful and Hasura accounts. 

Once you’re in Contentful, set up a content model to track all the delicious carbs. You’ll need fields for the title, image, slug and recipe. Make sure to create a few entries while you're here. Head over to Hasura once that’s done. 

![Content Model](https://images.ctfassets.net/fo9twyrwpveg/WDj9KSYqStLjT7a6xoKyp/9f088aeb0ee7673541dc2b79bf5dd6f0/iTfcc2bZ.png?fm=webp&q=90&w=614)

If you're making your Hasura account for the first time, you’ll be guided through the process of creating a new database in Heroku as you create your account.  

![Hasura Console](https://images.ctfassets.net/fo9twyrwpveg/26C279yghAz2T44awMKbM1/748ea0c42abd83a61345c68adbe21842/fezcKWlG.png?fm=webp&q=90&w=614)

Hasura will take care of initializing your database and setting up all of the metadata they’ll need to provide you a GraphQL endpoint to that database. Once this is complete, you’ll see a launch console button that will open up the Hausra interface. This interface will contain an embedded version of GraphiQL. GraphiQL allows you to explore and inspect the GraphQL schema with an in-browser IDE. 

![GraphiQL](https://images.ctfassets.net/fo9twyrwpveg/5365s2KhQdSHygsGogGQgD/2c90c25c4e345fe859a87669da6ebdb7/second.png?fm=webp&q=90&w=614)

# Stitching Postgres with Contentful

Visit the data tab in the interface to create tables and start establishing the scheme for the database. In our livestream with Praveen, he compared the data interface to a modern version of PG Admin. Create a new table to track your users and an additional table to track what those users pick as their favorite recipes. In my user table, I’m storing only an email address, and we could use a service like the twilio verify API to handle user login.

![Hasura Config](https://images.ctfassets.net/fo9twyrwpveg/5365s2KhQdSHygsGogGQgD/2c90c25c4e345fe859a87669da6ebdb7/second.png?fm=webp&q=90&w=614)

![Hasura second Config Page](https://images.ctfassets.net/fo9twyrwpveg/26V3SowTSRZBiZRd78fSpn/603c8e512ab4f8d338f4851fc75691bc/NFo8TTfW.png?fm=webp&q=90&w=614)

In the Hasura GraphQL panel, you’ll be able to query the table for those fields. At this point, there is no data to query so first. Let’s insert a row with a GraphQL mutation. 

![GraphiQl with a mutation query](https://images.ctfassets.net/fo9twyrwpveg/26V3SowTSRZBiZRd78fSpn/603c8e512ab4f8d338f4851fc75691bc/NFo8TTfW.png?fm=webp&q=90&w=614)

Set the ID of the created user to the side for now. We’ll need that in just a second. 

With both a content model in Contentful and a table configured on Hasura, it’s time to merge the services. Head into the remote schemas section of Hasura to add Contentful. Using the API keys from Contentful, set the URL as `https://graphql.contentful.com/content/v1/spaces/{SPACE}` replacing `{SPACE}` with your space ID and adding an authorization header with your access token. 

![Establishing Remote Relationship](https://images.ctfassets.net/fo9twyrwpveg/26V3SowTSRZBiZRd78fSpn/603c8e512ab4f8d338f4851fc75691bc/NFo8TTfW.png?fm=webp&q=90&w=614)

To confirm this has been successful, the documentation for the GraphQL instance of Contentful will be viewable in the GraphQL implementation inside Hasura. Make sure to grab an ID of one of the breads. We use it later to establish our users' favorite recipe. 

![GraphiQL Query](https://images.ctfassets.net/fo9twyrwpveg/26V3SowTSRZBiZRd78fSpn/603c8e512ab4f8d338f4851fc75691bc/NFo8TTfW.png?fm=webp&q=90&w=614)

To establish the connection between our database comments and our bread from Contentful, add a remote schema relationship. To do so, first modify the favorite table inside Hasura to include a new column named bread ID. Click on the relationship tab and hit the `Add a remote schema relationship` button. Map the ID of the bread content type to the newly created bread_id column in Hasura. Hit save and Hasura will create the remote relationship. 

![Establishing Remote Relationship](https://images.ctfassets.net/fo9twyrwpveg/3BeVh365TQkYwXwxQT5gHh/37631331edb2ce85aa7aca4b5d38f92d/Screen_Shot_2020-08-21_at_3.26.03_PM.png?fm=webp&q=90&w=614)

Now that the relationship has been created, we can create a new mutation for our favorite table. Using the user_id and bread_id from before create a mutation that sets them as a favorite. If we created the front end for this project, we could create a button that would run this mutation for us.  

![Another Mutation](https://images.ctfassets.net/fo9twyrwpveg/1jjCbG6UVSHVr71IBMx8wL/3ea3f97271687d353c73d35d2ef15cd2/qK3tIugn.png?fm=webp&q=90&w=614)

That’s everything necessary to tie the Contentful and Hasura APIs with schema stitching. Inside GraphQL, we’re now able to write a single query that takes a user ID and returns all of their favorite recipes, with the user data being stored by Hasura and the content being provided by Contentful.

![Confirming Remote Relationship](https://images.ctfassets.net/fo9twyrwpveg/1jjCbG6UVSHVr71IBMx8wL/3ea3f97271687d353c73d35d2ef15cd2/qK3tIugn.png?fm=webp&q=90&w=614)

Going forward you could build an entire application on this project using Hasura, Contentful and Postgres. Everything needed for the backend and the relationships between all of the data has been configured, so all that’s left is to create a front end that takes advantage of the single Hasura provided GraphQL endpoint. 

Want to see this tutorial in video format? Checkout our [livestream ](https://www.youtube.com/watch?v=9lxt8GOakew&list=PLAaQpb7XfX3BWoAku4pYf3VEJhiKjq5ZA&index=2) with Praveen from Hasura, where he walks us through creating a combined GraphQL API using Hasura and Contentful.