Overview

We have our featured listings, and one of them is really catching our eye, so how do we query just one specific listing and all its details?

In this lesson, we will:

• Learn how to access GraphQL arguments in a connector

Listing details

Here's what the mockup looks like for a listing's details:

Mapping this back to our REST API, we'll need to retrieve this data from the GET /listings/:id endpoint, passing a listing ID into the URL. We can examine the response from that endpoint here: https://airlock-listings.demo-api.apollo.dev/listings/listing-1

The listing connector

1. In the schema, let's find the Query type and add a new field called listing, which takes in an id argument of type non-nullable ID and returns a nullable Listing type.

   listings.graphql

   type Query {
     # ...other fields
     "A specific listing"
     listing(id: ID!): Listing
   }

   Copy

   Note: If you're not familiar with how to use GraphQL arguments, you can learn about them at graphql.com/learn/arguments.

2. Saving our changes, rover dev will now give us that expected (and helpful!) error. We know how to fix that!

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

3. Let's add the @connect directive to the field, auto-completing the parameters by hitting Enter.

   listings.graphql

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

   Copy

4. We'll use the same source as before: listings.

   listings.graphql

   source: "listings"

   Copy

5. And we're doing an HTTP GET call to /listings/:id.

   listings.graphql

   http: { GET: "/listings/ID???" }

   Copy

But what do we put for the id? We can't hard-code an id like we did in the browser. We want to make it dynamic, pulling from the id the client would provide. So how do we get access to the value of that listing id argument here in the @connect directive?

Accessing GraphQL arguments in connectors

args to the rescue! args gives us access to all of the field's arguments. But we'll need to prefix it with the dollar sign symbol ($), which indicates a variable in GraphQL.

Taking this schema as an example:

We can access the field's arguments with $args.name, $args.team and $args.mission.

And to interpolate these values into the path in our connector, we'll need to wrap them in curly braces ({ }).

Let's try it out!

Using $args

1. We have the start of the endpoint with the path /listings/.

   listings.graphql

   http: { GET: "/listings/" }

2. Then, because we want to access the field's id argument, we'll use $args.id, making sure to wrap it in curly braces ({}) to include it in the path.

   listings.graphql

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

   Watch out for the syntax here: the dollar sign ($) is inside the curly braces.

3. Great! All that's left to do is fill in our selection. The JSON response for this endpoint is actually very similar to the featuredListings connector, a mostly one-to-one mapping, with the exception of the closedForBooking field. The mockup also shows a list of amenities that belong to the listing, but we'll tackle that in the next lesson. For now, let's keep going.

   listings.graphql

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

   Copy

Checking our work

You know the drill! Save your changes and open up Sandbox.

Here we'll build a new operation, so open up a new tab, and we'll retrieve a specific listing and all of its fields.

We can hit the plus button to add all the available fields in one go.

We'll give this operation a new name: GetListingDetails.

Under the Variables section, we'll add the listingId value.

Hit Run and... we can see the details of one specific listing now! Awesome!

Practice

Answer the following questions using the schema below:

Use the REST API JSON response below to complete the code challenge.

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! But we didn't quite finish up our listing details, we're still missing a listing's amenities. Let's tackle that next.