Build a crypto application with GraphQL Federation

Cédrick Lunven - Jun 30 '22 - - Dev Community

Image description

This post will show you the ropes of GraphQL federation and give you the context you need before embarking on the crypto app workshop by Ania Kubów.

Federating GraphQL is a popular approach for companies with large, distributed architectures where scalability and flexibility are paramount. For example, Adobe uses GraphQL federation across 40 API endpoints to improve their team’s agility and velocity; meanwhile Netflix developed a federated GraphQL platform to quickly and reliably scale their API for their studio ecosystem.

If you’re already familiar with GraphQL, then learning how to federate data using GraphQL APIs is a good next step.

In this workshop, Ania will walk you through GraphQL federation and how to use it to build a simple crypto application. In the process, you’ll learn how to create a database using DataStax Astra DB, interact with it using GraphQL, and federate data from several databases to populate your crypto dashboard.

There’s no special software to install and we’ll only be using free, open-source technologies, including:

  • React to develop the crypto app user interface
  • Astra DB as our free, serverless database
  • GraphQL to create, read, update, and delete app data
  • Apollo to federate data from our databases

Let’s get started.

Understanding GraphQL federation

Let’s begin with a quick intro to the query language itself. GraphQL is an open-source query language, originally built by Facebook, that’s used to fetch data from an API into your application.

With GraphQL, you can hide the complexity of multiple systems (like microservices and third-party APIs) behind a single GraphQL interface. This allows you to fetch data from several sources in just one request, which saves on bandwidth and improves the performance of your app.

Figure 1: Diagram showing how GraphQL interfaces with multiple services. (Source)

Simply put, a federated architecture brings together multiple schemas from different services and merges them into one unified API endpoint. Although having a single GraphQL API is tricky when it comes to enterprise-scale systems.

This is where Apollo Federation swoops in. It’s a gateway layer that allows you to easily consolidate multiple GraphQL API services into one so that an enterprise-scale graph can work as a collection of separately maintained GraphQL services. This gives teams the freedom to work on different parts of the graph schema independently. This also makes it faster and easier to scale, manage, and deploy.

At a high level, Apollo Federation architecture consists of:

  • Subgraph services, where each one corresponds to a specific GraphQL schema.
  • A gateway that unifies the schemas into a federated graph and handles the queries across the subgraphs.

Image description

Figure 2: A consolidated GraphQL architecture using Apollo Federation. (Source)

In this workshop, we’ll use Apollo Federation to join two databases together and channel their combined output into a crypto app. For the databases, we’ll be using DataStax Astra DB, which we’ll introduce you to in the next section.

Your free database with DataStax Astra DB

Astra DB is a serverless database-as-a-service (DBaaS) that fully manages Apache Cassandra®. That means you can leverage the high availability and reliability of Cassandra, but spare yourself from the pains of operating and managing it.

The best part is you can tinker around with Astra DB on an entirely free tier, with up to 80 GB free each month and the freedom to deploy multi-tenant or dedicated databases on AWS, Azure, or GCP. If you need to scale later on, then you can simply pay as you go and only get charged for what you use.

The second best part is that once you have your hands on Astra DB, you automatically get access to Stargate — an open-source data gateway that makes it easy to query any Cassandra database through REST APIs. One such API is the Stargate GraphQL API, which allows you to do the following:

  • Get the data you need from any Cassandra database using GraphQL types, queries, and mutations.
  • Easily and flexibly combine data from multiple services.
  • Create new database tables directly via the API.
  • Prototype your mutations and queries using the built-in GraphQL Playground servlet.

Image description

Figure 2: Diagram of Stargate GraphQL API within Astra DB.

In this workshop, you’ll be using the Stargate GraphQL API as your data source in Astra DB, and Apollo as your gateway to the federated databases.

Build a crypto app in just one hour

Now that you have a better idea of GraphQL federation, you’re ready to see it in action as you build your very own crypto app. Here’s what you’ll be doing in this completely free workshop:

  • Create an Astra DB database
  • Create another database with dummy data
  • Build a simple crypto dashboard using React
  • Federate data from both databases with GraphQL
  • View crypto information on your nifty new dashboard

By the end of this workshop, you’ll know how to federate two databases using GraphQL to populate a crypto app that looks something like this:

Image description

Figure 4: Final interface of the crypto app.

Ready to get started? Sign up for your free Astra DB account and then dig into the workshop video on YouTube. For the source code, head over to Ania’s GraphQL workshop repo on GitHub.

Remember, this is a simple crypto app that will teach you the basics of a game-changing approach to GraphQL APIs. Once you’ve mastered this workshop, keep the ball rolling with our blog post on data federation using Stargate GraphQL!

Explore more free tutorials on our DataStax Developers YouTube channel and subscribe to our event alert to get notified about new developer workshops. For exclusive posts on all things data, follow DataStax on Medium.

Resources

  1. Learn GraphQL Federation by building a Crypto App
  2. Deploy a Netflix Clone with GraphQL and DataStax Astra DB
  3. Join our Discord: Fellowship of the (Cassandra) Rings
  4. Astra DB — Managed Apache Cassandra as a Service
  5. Accessing Cassandra with the Stargate GraphQL API
  6. kubowania (Ania Kubów) · GitHub
  7. React — A JavaScript library for building user interfaces
  8. The what, when, why, and how of federated GraphQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .