2. Connect Data Source

If you switch from schema editor to datasources using the toggle in schema tab you should see a visual editor which we’ll use to configure the fields with datasources.

Exclamation marks on left side of fields indicate missing datasource for root field.

You can attach datasource to each individual field and can also re-use the datasource for multiple fields (for performance benefits) in case it has similar configuration.

We will start with attaching datasource to user query.

1. Select field to attach datasource.

2. Click on user field and toggle the defile datasource.

3. Select Datasource type.

Since our upstream services are REST we’ll select REST as datasource type but other kind of datasources can be used.(eg. Internal or Graphql)

You can learn more about it here

4. Enter URL for root field.

We will use the url for our Users service which returns details of an user for given id i.e http://localhost:4000/users/:id.

To dynamically inject the id for every request made, we can use templating syntax and inject id with user supplied argument or we can also use session object.

To avoid typos in template you can use the UI component to automatically create a template for you. You can select from the available argument and object template options from the list generated by input component which is triggered by entering { in input.

To learn more about arguments click here

To learn more about reusing response fields click here

5. Enter datasource name.

Enter a unique datasource name your configuration to reuse it in the future. We will name this as getUserById for the given example

6. Select HTTP method for the URL.

You can select the HTTP method for your upstream url. Which should be GET in our case.

7. Add headers (Optional)

If you upstream expects headers, you can supply them using this.

You can also use templating syntax here to reuse request headers.

8. Select field mapping

Keep the field mapping disabled by default.

You can use field mapping to map the API response with your schema.

You can learn more about field mapping here

9. Update Configuration

Click on ‘Update Field and Data Source’

It is important to update datasource configuration before updating the API in order to reflect the changes in your api definition.

10. Update API and Test

Click Update the API.

You can now query your UDG api of user using the playground the API designer

query getUser {
  user(id:"1"){
    username
    id
    reviews {
      id
      text
      user {
        id
      }
      
    }
  }
}

The above query should return the response as follows

{
  "data": {
    "user": {
      "username": "John Doe",
      "id": "1",
      "reviews": null
    }
  }
}

Challenge

1. Try to resolve reviews field on type Users
2. Try to resolve users field on type Reviews

As you can see our query resolved for user details but returns null for reviews.

This happens because we haven’t defined datasource on field level for reviews on type User.

Notes
- For reviews field on type User
- - Description :: get reviews by userId
- - URL :: http://localhost:4001/reviews/:userId
- - Method :: GET

- For users field on type Review
- - Description :: get user details by Id
- - URL :: http://localhost:4000/users/:userId
- - Method :: GET

- You can reuse response filed using templating syntax example `{{.object.id}}`

Now that we have linked datasources for our queries, let’s see how we can do the same for mutations in the next section.