Launch Apollo Studio

Creating a new graph in Workbench


This article helps you create a new federated graph design from scratch in Apollo Workbench.

If you have an existing graph in Apollo Studio that you want to bring into Workbench, see Importing a Studio graph into Workbench.

Create your first design

After you've set up Workbench and opened VS Code to a folder of your choice, select Workbench from the Activity Bar and then click the + button next to Local Graph Designs:

Creating a new graph in Workbench

After you provide a name for your graph, Workbench creates a .apollo-workbench file in the opened folder. This new design is shown in the navigation panel:

Newly created Workbench design

Add your first subgraph

You're ready to add a subgraph to your design. Click the + button next to subgraphs and provide a name for your subgraph:

Newly created Workbench design

Next, you need to define your subgraph's schema. Click the newly created subgraph in the navigation panel to open its schema file. Paste in the following schema and save the file:

Users
type User @key(fields:"id"){
  id: ID!
  name: String
  email: String
}

type Query {
  me: User
}

As you edit your subgraph schemas, Workbench constantly runs composition to validate them. Whenever you save a schema, Workbench commits that composition run as the design's new supergraph schema (assuming composition succeeds).

At this point, you have a composed supergraph, and both its supergraph schema and API schema are shown in the navigation panel. You can click either item to view it (these files are read-only).

Supergraph and API schemas for composed supergraph

Add a second subgraph

Let's add another subgraph to take full advantage of Apollo Federation. Follow the previous step, but this time name the subgraph carts.

Paste the following schema and save:

Carts
type Cart @key(fields:"id"){
  id: ID!
  name: String
  email: String
}

extend type User @key(fields:"id") {
  id: ID! @external
  activeCart: Cart
}

Congratulations, you now have a federated graph design with multiple subgraphs!

Write your first operation against the graph

Now that you have a federated graph design that composes successfully, you can try writing GraphQL operations against the design.

Create a new operation by clicking the + button next to Operations and providing a name in the input box:

Creating a new GraphQL operation

While you're building your operation, Workbench can provide intelligent code completion based on your design (press CTRL+Space):

Intelligent code completion while creating operations

Paste the following into the operation editor and save it:

query MyActiveCart {
  me {
    name
    activeCart {
      items
      total
    }
  }
}

View your operation's query plan

Workbench can generate the query plan for any valid operation against your design.

To generate a query plan, click the document icon that appears when you hover over an operation in the navigation panel:

Intelligent code completion while creating operations

Now that you've created your first design:

Edit on GitHub