Follow-along: Debugging Connectors

You can use the Connectors Debugger to dig deeper into the details of your Connector network requests. Let's try adding a field that doesn't exist in the REST API response.

1. Add a url field to the Product type.

   products.graphql

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

   Copy

2. Add url 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
          url
         }
         """
       )
   }

   Copy

3. Save your changes. rover dev will restart.

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

   GraphQL operation

   query GetProducts {
     products {
       id
       name
       description
       category
       url
     }
   }

   Copy

5. We'll get data back, but we'll also see a warning icon. Click on it to open the Connectors Debugger panel.

   

6. Click on the icon under Problems.

   

7. The message shows the error Property.url not found in object. Click the code </> icon to open the Mapping Playground.

   

Connectors Mapping Playground

You can always use the playground to write and troubleshoot your Connector selection mapping.

• The REST API's JSON response body is on the left in the API Response panel
• The Connector's mapping selection is in the center Mapping panel
• The results of the mapping are in the right Results panel
• When the errors are fixed and the results are what you expected, you can copy the mapping back into the selection property of the Connector in your schema

Fixing the selection

We want to take the slug value and map it to the url field in the schema. We can rename fields with the syntax newName: oldName, much like aliases in GraphQL.

1. In the mapping playground, edit the mapping to rename slug to url to remove errors.

   url: slug

   Copy
   

   The error should go away!

2. In the products.graphql file, find the selection property and do the same renaming url: slug

   products.graphql

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

   Copy

3. Save your changes. rover dev will restart.

4. Go to http://localhost:4000 and run the query again. There should be no errors!