8. Router configuration and Uplink
4m

Overview

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

In this lesson, we will:

  • Set up the locally
  • Connect the to
  • Send our first to our

✏️ Downloading the router

The is a high-performance graph router 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 variables.

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

    router
    curl -sSL https://router.apollo.dev/download/nix/v1.46.0 | 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 our schema.

    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 the from our own machines.

✏️ Connecting the router to GraphOS

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 our !

✏️ Testing our schema

  1. Select the Explorer tab from the sidebar.

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

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

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

    Our should look like this:

    query GetLocationsAndLatestReviews {
    locations {
    id
    name
    description
    photo
    }
    latestReviews {
    id
    comment
    rating
    }
    }
  4. Before we run the , let's change the Response dropdown on the right to Query Plan Preview. This shows us a diagram for the 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 . 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 , and the reviews will handle latestReviews and its sub.

    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 .

    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 to our and hit both at once!

Practice

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

Key takeaways

  • The is an executable binary file that can be downloaded and run locally.
  • The Preview inspects the in the Explorer 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 , and we've improved our development experience by modularizing the backend!

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

Remember those three we still haven't added to our schema? 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 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 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.