Skip to content
Federate This

Implementing the Products Route in a Hygraph Remote Source field

To start, we’ll need to create a new Hygraph project. You can add a blank project or start from the Hygraph Getting Started Project.

Adding a REST Remote Source

The first step in creating a remote source in Hygraph is to add it to the project’s Schema. Navigate to the Schema section of your project and click the plus by the Remote Sources section.

Since we want to use remote content in our project, the first step is to create a Remote Source in our project Schema. We’ll connect a REST API using our DEMO Hygraph API.

Configuring our remote source

Enter the following data into the form presented:

table:

FieldValue
Display nameProduct Source
TypeREST
Base URLhttps://federatethis.com/api
Custom type definitionsOur SDLs (see below)

Product SDLs

These SDLs are available in the Product Route documentation. We’ll use these SDLs to configure the GraphQL types for the Products.

This SDL gives the field-level information for a singular product.

type Product {
  id: Int
  name: String
  price: Int
  description: String
  image: String
  category: String
  rating: Float
  numReviews: Int
  countInStock: Int
}

Review SDLs

These SDLs are available in the Review Route documentation. We’ll use these SDLs to configure the GraphQL types for the Reviews.

This SDL gives the field-level information for a singular review.

type Review {
    id: Int
    product: Int
    productSlug: String
    name: String
    rating: Float
    comment: String
}

Your finished remote source should look like this:

Finished remote source

Add a top-level remote source query

Now that we have our remote source configured, we can add a top-level query to our schema. This will allow us to query our remote source from our project.

From the Schema section, click the Queries system model from the models list. This is where we can add queries directly to the top of our Hygraph API.

On a new project, the queries model will be empty. Since we added a REST Remote Source, we’ll add a REST Remote Source Field from the list on the right.

Add the following data to the form presented:

TabFieldInput
SettingsDisplay nameProducts
SettingsAPI IDCompleting the display name will autocomplete the API ID field. We’ll leave this value as it is.
SettingsRemote sourceProduct Source is selected by default. We’ll leave this value as it is.
SettingsMethodGET is selected by default. We’ll leave this value as it is.
SettingsReturn typeUse the dropdown to select Products, which is one of the custom type definitions we configured for our remote source.
SettingsPathWrite /products here.
This path will be added to our remote source base path to get a resulting endpoint.

Query the Remote Source

Now that we have our remote source configured and a query to access it, we can query our remote source from our project. For now, head to the API Playground in your project.

You can use the API explorer to build your projects query or use the query below and you should have the response listed.

query MyQuery {
  products {
    data {
      category
      name
      price
      countInStock
      description
      id
      image
      numReviews
      rating
    }
  }
}