8. Router configuration and Uplink
4m

Overview

So far, FlyBy's s are running and their s have been published, but we still need one piece to tie everything together: the .

In this lesson, we will:

  • Set up the Apollo locally
  • Connect our to Apollo Studio
  • Send our first query to our

✏️ Downloading the router

The Apollo is a high-performance graph router built in Rust. It's available as an executable binary that you can add to your project in a few steps:

  1. Open a terminal window and navigate to the router directory in the FlyBy project.

    cd router

    So far, we only have the .env file in here with our environment s.

    📦 router
    ┣ 📄 .env
  2. We'll download the by running the install command in the terminal.

    router
    curl -sSL https://router.apollo.dev/download/nix/latest | sh

    Note: Visit the official documentation to explore alternate methods of downloading the Router.

  3. Now when we check the contents of our router directory, we'll see that we have a new file also called router!

    📦 router
    ┣ 📄 .env
    ┗ 📄 router

✏️ Running the router

  1. Back in the same terminal window, run the command below. You'll need to replace the <APOLLO_KEY> and <APOLLO_GRAPH_REF> placeholder values with your 's corresponding values from the router/.env file. This command starts up the locally and tells the router which to connect to.

    APOLLO_KEY=<APOLLO_KEY> APOLLO_GRAPH_REF=<APOLLO_GRAPH_REF> ./router
  2. We'll see a few lines of output, and finally a message that our router is running on port 4000, ready to receive queries!

    Let's copy this address, we'll need it to set our connection settings in Studio. This tells outside consumers of our API what endpoint they can use to query our .

    GraphQL endpoint exposed at http://127.0.0.1:4000/ 🚀

    Note: Because our is currently running at http://127.0.0.1:4000, it's not actually accessible to the outside world. But we can still add it to our configuration settings, which will let us query the from our own machines.

✏️ Connecting the router to Apollo Studio

Let's flip back over to Studio.

  1. Click on the README tab in the sidebar.

  2. Next, tap the Connection Settings link at the top of the page.

    studio.apollographql.com/graph/flyby/variant/current/home
    The Connection Settings link to add an endpoint
  3. We'll paste the address we copied (http://127.0.0.1:4000) as the endpoint, then save.

    studio.apollographql.com/graph/flyby/variant/current/home
    The Connection Settings modal to add an endpoint

Let's get to querying our !

✏️ Testing our schema

  1. Select the Explorer tab from the sidebar.

  2. Let's put together a query that retrieves data from both of our s. We'll call our query GetLocationsAndLatestReviews.

  3. Now let's fire in some s. We'll start with locations. Click the plus button () next to Fields to add all the location s to our query.

    Next let's go back and add latestReviews, and all the reviews subs.

    Our query should look like this:

    query GetLocationsAndLatestReviews {
    locations {
    id
    name
    description
    photo
    }
    latestReviews {
    id
    comment
    rating
    }
    }
  4. Before we run the query, let's change the Response dropdown on the right to Query Plan Preview. This shows us a diagram for the query plan the will use to resolve our current .

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Viewing the Query Plan Preview panel for a query, with steps broken down in a diagram
  5. By choosing the icon to Show plan as text, we'll see a more detailed breakdown of the query plan. We won't worry about all the syntax here, but we can get a general idea of how the plans to handle this query: the locations will resolve the locations s, and the reviews will handle latestReviews and its subs.

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Viewing the Query Plan Preview panel for a query, with steps broken down in text
  1. Now let's run this query.

    studio.apollographql.com/graph/flyby/explorer?variant=current
    Querying both subgraphs at once for data

Fantastic! We can see that the data object in our response contains both locations and reviews.

This is huge. We've just unlocked one of the powers of our : we can write one query to our and hit both s at once!

Practice

What information does the Query Plan Preview in Apollo Studio include?

Key takeaways

  • The Apollo is an executable binary file that can be downloaded and run locally.
  • The Query Plan Preview inspects the GraphQL in the and outputs the query plan the will execute to resolve the operation.

Up next

Congratulations, we now have a working ! Our frontend team can get back all the data they need from a single GraphQL , and we've improved our development experience by modularizing the backend!

But there's still one problem we need to solve.

Remember those three s we still haven't added to our ? You remember! Here's that schema agreement again, to jog your memory:

The FlyBy schema diagram, updated to check off the fields we've added to the reviews and locations subgraphs so far

Even though our can query each separately, we can't associate data between the two subgraphs yet.

Well, next up we'll learn about the feature that will make coordination between our s possible: entities.

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.