Overview

We've got our list of listings, but how can we go about querying one specific listing? Let's explore how we can use connectors to get one object in particular.

In this lesson, we will:

• Learn how to access GraphQL arguments in a connector

Listing details

Onto the next page we need to implement: a listing's details.

We'll need to add a new entry point to our schema to retrieve a specific listing. This data will be powered by the listings/:id endpoint from our Listings REST API. We can examine the response from that endpoint here: https://rt-airlock-services-listing.herokuapp.com/listings/listing-1

Connector for a listing

1. Open up the listings.graphql file and find the Query type.

2. We'll add a new field to Query called listing, which takes in an id argument of type non-nullable ID and returns a nullable Listing type.

   listings.graphql

   "A specific listing"
   listing(id: ID!): Listing

   Copy

3. Saving our changes, rover dev will now give us an expected (and helpful!) error:

   error[E029]: Encountered 1 build error while trying to build a supergraph.
   
   Caused by:
       QUERY_FIELD_MISSING_CONNECT: The field `Query.listing` has no `@connect` directive.

   We know how to fix that!

4. Let's add a @connect directive to the field.

   listings.graphql

   listing(id: ID!): Listing
     @connect(
      source: ""
      http: { GET: "" }
      selection: """
   
      """
     )

   Copy

5. Again, we'll first provide source along with the name we set earlier on: v1.

   listings.graphql

   source: "v1"

   Copy

6. As we saw in the REST endpoint above, this will be an HTTP GET call.

   listings.graphql

   http: { GET: "???" }

   Copy

The endpoint we want is listings/:id, where :id is the ID field of the listing... but how do we get access to the value of that GraphQL argument here in the @connect directive?

Accessing GraphQL arguments in connectors

$args to the rescue! $args gives us access to all the GraphQL arguments for a field.

Taking the schema above as an example, we could access the field's arguments within the @connect directive using $args.name, $args.team and $args.mission. And to interpolate it into the HTTP path in our connector, we'll need to wrap it in curly brackets { }.

Let's try it out!

1. We'll jump back into the listings.graphql file where we left off with our listing(id: ID!) connector.

   listings.graphql

   listing(id: ID!): Listing
     @connect(
       source: "v1"
       http: { GET: "???" }
       selection: """
   
       """
     )

2. For the value of GET, we'll start with a string /listings/.

   listings.graphql

   http: { GET: "/listings/" }

   Copy

3. Then, because we want to access the id argument from the field, we'll use $args.id. We'll wrap it in curly brackets ({}) to interpolate it with the preceding endpoint string.

   listings.graphql

   http: { GET: "/listings/{$args.id}" }

   Copy

   Watch out for the syntax here: the $ is inside the curly braces { }.

4. Great! All that's left to do is fill in our selection. The JSON response for this endpoint is very similar to the featured listings' connector, so we can add the same selection mapping.

   listings.graphql

   selection: """
   id
   title
   numOfBeds
   costPerNight
   closed: closedForBookings
   """

   Copy

Check your work

You know the drill! Open up http://localhost:4000 where the local router is running.

Let's build an operation that retrieves a specific listing and all of its fields.

And for the Variables section:

You should get data back!

Practice

Answer the following questions using the schema below:

Key takeaways

• To access a field's argument values from within its connector, we can use $args. This is an object that contains the values of all of the arguments that are passed into a field when a query is run.
• To interpolate the value of an argument as a URL parameter in the path, we can use curly braces. For example: http: { GET: "/listings/{$args.id}"}

Up next

We're on a roll! Next up on the implementation list: a listing's amenities.