Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Docs

4.2 Remote Fields

#Overview

This step of our Getting Started tutorial covers Remote Fields, one of our Content Federation features.

We use Remote Fields for data enrichment. You can add them to a model in your schema to fetch data from a Remote Source. This type of field connects remote data to a specific entry in that model, and it's always related to a single remote source & custom type.

To be able to add a Remote Field to a model in your Schema, you need to have configured a Remote Source first, so make sure you have followed the previous step of our tutorial before you start this one.

#The use case

A common use case is to use Remote Fields to facilitate e-commerce by consolidating product listings from multiple suppliers onto one platform. For the purposes of this tutorial, we will add a Remote Field to our Product model and use it to fetch review data from the DEMO Hygraph API that we connected in our remote sources lesson, so it can be displayed on our front end.

#Adding a Remote Field

We're going to use the Remote Source that we configured in the previous lesson to add a Remote Field to our Product Model.

Let's go to our Schema, select the model, and then click on the REST Remote Field option on the right sidebar.

We'll use the following information:

TabFieldInput
SettingsDisplay nameReviews
SettingsAPI IDCompleting the display name will autocomplete the API ID field. We'll leave this value as it is.
SettingsRemote sourceHyDemoAPI 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 Reviews, because we want to fetch review data for your Product model.
What we just did here is select one of the custom type definitions that we configured for our remote source in the last lesson.
SettingsPathWite /api/reviews/product/{{doc.productSlug}} here.
This path will be added to our remote source base path to get a resulting endpoint. doc.productSlug references the content entry, so we'll be able to fetch reviews for specific products.

We'll click Add to save.