14. Putting it all together


We now have a complete schema for FlyBy's . It's time to put all of the pieces together and make sure our backend server meets all the frontend requirements we set at the start!

In this lesson, we will:

  • Run the FlyBy client, which will our
  • Check that all the used in the frontend code work as expected

Returning to the frontend

You might have noticed that we haven't reviewed any of the frontend code. Our initial meeting with the frontend team set the expectations for the data our backend should provide, but since that time we haven't needed to get in the way of their work to implement the UI. Let's see what they've built!

Launching the client

Open up a new terminal window and navigate to the client directory.

Install the packages with npm install then run npm start to the app.

npm install && npm start

In the browser, navigate to http://localhost:3000 to see the FlyBy homepage.

Oh no! We can see that the page is showing an error: Failed to fetch.

The FlyBy homepage UI, showing an error that it failed to fetch.

But wait, we queried our perfectly fine using Apollo Studio! So why is the client unable to connect?

Cross-origin resource sharing (CORS) and the router

Our client can't connect because of CORS, which stands for cross-origin resource sharing. CORS is a protocol that enables your server to specify which websites can talk to it.

By default, the enables only Apollo Studio (https://studio.apollographql.com) to connect to your server.

This means we'll need to configure the to also allow requests from http://localhost:3000 (where our client is running) while we're testing it locally.

✏️ Configuring CORS settings

There are many different ways to configure the CORS options for the . For FlyBy, we'll use the origins property to explicitly specify which client URLs are allowed to connect to the .

  1. In the router directory, create a file called config.yaml. This file will let us customize the when it starts up.

  2. Add the following configuration. It uses the origins key and specifies that both Apollo Studio and the locally-running client should be able to connect to the .

    - http://localhost:3000 # Allows any locally-running client to run against your Router
    - https://studio.apollographql.com # Allows Apollo Studio to still run queries against your Router
  3. In the terminal, if your is still running, stop the process with CTRL+C.

  4. We'll run the again, but with an additional parameter: the --config flag as well as the path to our config file.

    APOLLO_KEY=<APOLLO_KEY> APOLLO_GRAPH_REF=<APOLLO_GRAPH_REF> ./router --config ./config.yaml

    The should be running successfully, with console output indicating the port it's running on.

Checking the client

Let's check out the FlyBy homepage again at http://localhost:3000. Alright, we've got data showing!

The FlyBy homepage UI

Our mockups have been brought to life! We can see first hand locations, reviews and submit reviews of our own. Our is working smoothly for us behind the scenes!


Key takeaways

  • Clients request data from a single : the .
  • The can set CORS rules to specify which websites can talk to it.
  • We can set up these rules (and other configurations) through the 's config file.


That was an exciting adventure of building a ! We've reached the end of the course and covered many of the principles we can use to set up a new project with a supergraph.

We learned about why we would pick right from the start to build a modular API that can scale as our product and development teams grow.

We used the workflow to publish our and visualize the composed in Apollo Studio.

Finally, we took a deep dive into how to create entities to reference and contribute new to types across .

And along the way, we brought all this together to create a that powers the FlyBy experience.

Thanks for joining us on our first voyage into and the . We look forward to seeing you in the next course, Voyage II: Federating the Monolith!


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.