Exercise: Creating a supergraph

You'll need a Studio account with the Serverless plan.

If you already have a GraphOS account with existing graphs, click the Create New Graph button. Then, walk through the steps to create a supergraph.

If you see the flow below, you're in the right place! Go ahead and walk through the steps to create your supergraph.

If you don't see that screen, then follow the "Before you start: Check your plan" section above.

Questions to think about

1. What's a good name for this first subgraph? Think: what business domain is it focused on? Here's the subgraph name we used:

   Subgraph name

   recipes

   Copy

   Show code

2. What's the difference between the supergraph ID and the supergraph name? When/where would the ID or the name be used in: the developer workflow? GraphOS?

   Answer

   The supergraph ID will be used to reference your supergraph from various tools later on.
   It CANNOT be changed.
   
   The supergraph name can be changed at any time.
   It's displayed throughout Studio.
   It's usually how you refer to your supergraph with your teammates.

   Copy

   Show code

Configuring CORS

Currently, our supergraph is ready to be queried—but only through Studio. This is because the cloud router we've set up for our supergraph needs to be specifically configured to allow other origins to access it.

We can update these settings right in Studio.

1. Navigate to our newly-created supergraph's Settings page, under the This variant tab.

2. Click into the Cloud Router option, and scroll down to the section titled Router configuration YAML.

   https://studio.apollographql.com

   

   Router Configuration YAML

   cors:
     origins:
       - https://studio.apollographql.com
   headers:
     subgraphs:
       recipes:
         request:
           - propagate:
               matching: ".*"

3. Remove the origins list. Below (still nested within the cors property), we're going to add a new property called allow_any_origin and set it to true.

   Router Configuration YAML

   cors:
     allow_any_origin: true

   Copy

   Then, hit Save.

   https://studio.apollographql.com

   

If we didn't set this option, client app developers would see an error in their browser, noting that their localhost or production URL has been blocked by CORS policy.