Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins
Tags: remotejoins, remoteschemas, graphqlmesh
Published: 2020-12-21 15:34:31

---
title: Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins
published: true
date: 2020-12-18 13:47:18 UTC
tags: RemoteJoins, RemoteSchemas, GraphQLMesh
canonical_url: https://hasura.io/blog/creating-data-graph-graphql-mesh-hasura-remote-joins/
---

 ![Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins](https://hasura.io/blog/content/images/2020/12/graphql_mesh_remote_joins.png)

This post is a part of our [Remote Joins](https://hasura.io/blog/remote-joins-a-graphql-api-to-join-database-and-other-data-sources/) series. Remote Joins in Hasura allows you to join data across tables and remote data sources. Data Federation using Hasura Remote Joins is now available from v1.3.0 stable release.  
Try it out on [Hasura Cloud](https://cloud.hasura.io) and let us know what you think!

![Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins](https://hasura.io/blog/content/images/2020/12/graphql_mesh_remote_joins-1.png)<figcaption>Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins</figcaption>

Data is typically sourced from different services. GraphQL Mesh allows you to use GraphQL query language to access data in remote APIs. The remote APIs can be Swagger/openapi, oData, gRPC, SOAP and others.  
GraphQL Mesh can be used as a gateway to other services, or run as a local GraphQL schema that aggregates data from remote APIs.

What we are going to explore in this example is the ability to add this API source that GraphQL Mesh creates as a Remote Schema in Hasura. Going one step further we will try to establish relationships between Hasura's GraphQL API and APIs sourced via GraphQL Mesh.

GraphQL Mesh can be used as

- SDK in Node.js code
- Gateway to serve GraphQL API

We will look at using Mesh as a Gateway that exposes an endpoint that can be added as a Remote Schema in Hasura.

## Initialise a GraphQL Mesh project

We can initialise a new project using `yarn`.

```
yarn init -y
yarn add graphql @graphql-mesh/cli @graphql-mesh/openapi

```

We are setting up the mesh CLI and adding the `openapi` client.

Create a config file `.meshrc.yml` to specify the data source and let's add the Currency Open API.

```
sources:
  - name: CurrencyOpenAPI
    handler:
      openapi:
        source: <path-to-open-api-schema.json>
```

[Download the Open API Spec](https://raw.githubusercontent.com/praveenweb/openapi-swagger-remote-schema/master/openapi.json) for this example and replace the source path appropriately. This is a spec for API served at `https://api.exchangerate-api.com/v4`.

## Run GraphQL Mesh

Run the GraphQL Mesh instance with the following command:

```
yarn mesh serve

```

This will run a GraphQL API at `http://localhost:4000`.

To add this as a remote schema to the Hasura Cloud project, we will have to deploy this on a public endpoint. I'm going to make use of Codesandbox to try this out.

<!--kg-card-begin: html--><iframe src="https://codesandbox.io/embed/stupefied-mclaren-00e5c?fontsize=14&amp;hidenavigation=1&amp;theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="stupefied-mclaren-00e5c" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe><!--kg-card-end: html-->

You can create a new Sandbox/fork the above with Node.js and put in the mesh config file over there.

In your Hasura Cloud project, add the graphql endpoint from codesandbox. In the above example, it would be [`https://00e5c.sse.codesandbox.io/graphql`](https://00e5c.sse.codesandbox.io/graphql). Replace this if necessary with your own forked sandbox URL.

Alright, now we have configured GraphQL Mesh to serve a GraphQL API over an existing OpenAPI spec.

![Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins](https://hasura.io/blog/content/images/2020/12/remote-schema-graphql-mesh.png)<figcaption>Add GraphQL Mesh Endpoint as Remote Schema</figcaption>

## Try out the GraphQL Query

```
query {
  getLatestBaseCurrency(baseCurrency: "USD") {
    base
    date
    rates
    timeLastUpdated
  }
}

```

![Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins](https://hasura.io/blog/content/images/2020/12/remote-schema-query.png)<figcaption>GraphQL Query for underlying OpenAPI </figcaption>

This should fetch data from the underlying currency API.

## Remote Relationship with Mesh

Assuming that we have a `users` table with columns `id`, `name` and `currency`. Let's add a remote relationship called `currency_rates` from inside of `users` table.

![Creating a Data Graph with GraphQL Mesh and Hasura Remote Joins](https://hasura.io/blog/content/images/2020/12/remote-schema-relationship.png)<figcaption>Remote Relationship with GraphQL Mesh</figcaption>

Now the GraphQL query to fetch this data in a single API call would look like the following:

```
query {
  users {
    id
    name
    currency
    currency_rates {
      date
      rates
    }
  }
}
```

Notice that, the nested query `currency_rates` come from exchange rate API following the OpenAPI spec. It will apply the filter of `users.currency` = `currency_rates.baseCurrency`, there by only giving exchange rates related to the current user's currency.

We had directly used the currency API through the [OpenAPI to GraphQL](https://hasura.io/blog/join-openapi-swagger-spec-data-to-graphql-hasura-remote-joins/) library earlier and demoed it over there. The advantage of using this via GraphQL Mesh is that, you can now add multiple sources to this mesh and you get a single GraphQL endpoint for all of these different sources combined.

### Should I use GraphQL Mesh as a Remote Schema?

Yes, typically the frontend clients will be querying Hasura's GraphQL Endpoint and GraphQL Mesh can be added as a Remote Schema as a way to proxy to other data sources. What Hasura gives you is a neat declarative Authorization layer on top of these GraphQL APIs and hence there's a lot less code to be written. This means that any usage of Hasura as an ORM inside Mesh will lose out on these benefits and we highly recommend using the GraphQL Mesh as a remote schema.

Uri Goldshtein, the creator of graphql-mesh gave a talk at HasuraCon earlier this year talking about how Hasura and GraphQL Mesh fits in together and can serve as a gateway to a bunch of remote API sources. Watch it below:

<iframe width="200" height="113" src="https://www.youtube.com/embed/8Jr3tSTf5-E?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Check out the various [examples](https://github.com/Urigo/graphql-mesh/tree/master/examples) in the github repo that can be added as a remote source to GraphQL Mesh (and it turn available for querying via Hasura).

There's another blogpost from the community talking about using [GraphQL Mesh as an SDK](https://dev.to/stephengfriend/hasura-graphql-mesh-3-5i5). Do check that out as well.

Do let us know in the comments on what your typical use case for GraphQL Mesh has been and how it fits in with Hasura.