Follow-along: Explore the schema

The Query.products Connector

1. Open up the products.graphql file.

2. At the top of the file, you'll find the code that enables Connectors in this schema.

   products.graphql

   extend schema
     @link( # Enable this schema to use Apollo Federation features
       url: "https://specs.apollo.dev/federation/v2.11"
     )
     @link( # Enable this schema to use Apollo Connectors
       url: "https://specs.apollo.dev/connect/v0.2"
       import: ["@connect", "@source"]
     )
   @source(
     name: "ecomm"
     # A @source directive defines a shared data source for multiple Connectors.
     http: {
       baseURL: "https://ecommerce.demo-api.apollo.dev/"
       headers: [
         # If your API requires headers, add them here and in your router.yaml file.
         # Example:
         # { name: "name", value: "{$config.apiKey}" }
       ]
     }
   )

3. Find the Query.products field, where the Connector has been defined already.

   products.graphql

   type Query {
     products: [Product]
       @connect(
         source: "ecomm"
         http: { GET: "/products" }
         selection: """
         $.products {
           id
           name
           description
         }
         """
       )
   }

4. Go to http://localhost:4000 where the local router is running. Build a query using Explorer.

   GraphQL operation

   query GetProducts {
     products {
       id
       name
       description
     }
   }

   Copy

5. You should get data back! 🎉

And not a single line of resolver code was written!

Examining Connectors using the Connectors Debugger

1. Click on the arrow beside Response (or Query Plan) and select Connectors Debugger.

   

2. Select the only network request call on the list to see more details.

   

3. Explore the different tabs for Request, Response and Problems.

   

4. You can see the raw response from the REST API endpoint in the Response tab.

5. You can see the request that was made to the REST API endpoint in the Request tab.

6. You can see any problems with the Connector in the Problems tab.

Follow-along: Add category

1. Let's take a closer look at the REST API endpoint response where the list of products is coming from: https://ecommerce.demo-api.apollo.dev/products. We want to expose the product's category in our GraphQL schema.

2. Add category to the selection property of the Query.products Connector.

   products.graphql

   type Query {
     products: [Product]
       @connect(
         source: "ecomm"
         http: { GET: "/products" }
         selection: """
         $.products {
          id
          name
          description
          category
         }
         """
       )
   }

   Copy

3. Save your changes; a composition error will pop up.

   Composition error

   error[E029]: Encountered 1 build error while trying to build a supergraph.
   
   Caused by:
      SELECTED_FIELD_NOT_FOUND: [products] `@connect(selection:)` on `Query.products` contains field `category`, which does not exist on `Product`.

   If you're using an Apollo IDE extension, you won't need to save your changes to see the error, you can hover over the red squiggly line for category and read the error!

4. Add a category field to the Product type to fix the error.

   products.graphql

   type Product {
     id: ID!
     name: String
     description: String
     category: String
   }

   Copy

5. Save your changes. rover dev will restart.

6. Go to http://localhost:4000 where the local router is running. Add the category field to the existing query.

   GraphQL operation

   query GetProducts {
     products {
       id
       name
       description
       category
     }
   }

   Copy

7. You should get data back! 🎉