We're transitioning Studio from Beta to Early Availability

You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

4.3 Top-level Remote Fields


This step of our Getting Started tutorial covers Top-level Remote Fields, one of our Content Federation utilities, which eliminates the need to make separate API requests for data inside & outside of Hygraph.

In the previous step of our tutorial, we talked about Remote Fields, which we can add to a specific model and only fetch data related to it. Top-level Remote Fields can fetch remote data outside the context of a regular model, which is then sent to the front end alongside your Hygraph data.

You can add Top-level Remote Fields fields to the Query system model in your project Schema, use them to fetch data that is unrelated to Hygraph and pass it through in the same API call as the data that is related to Hygraph content. Your front end will receive this data as if coming from Hygraph despite coming from diverse sources.

#Our schema

Just like Remote Fields, Top-level Remote Fields are also dependent on our project having a Remote Source already configured. We add them to the Query system model in the same way that we add a Remote Field to a regular model.

We'll use a Top-level Remote Field to fetch review data for a product in our catalog.

Complete Top-level Remote FieldComplete Top-level Remote Field

We'll select the Query system model in our schema, then click on the REST Remote Field option on the right sidebar.

We'll use the following information:

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 ReviewMeta, which is one of the custom type definitions we configured for our remote source earlier.
SettingsInput argumentsClick + Add to reveal more fields, which you'll complete next.
SettingsInput typeUse the dropdown to select Int.
SettingsAPI IDProductId
SettingsMake field requiredSelect this checkbox
SettingsPathWite /api/reviews/product/{{args.productId}} here.
This path will be added to our remote source base path to get a resulting endpoint.

We'll click Add to save.

Would you like to know more?

Here's an in-depth video tutorial on Top-level Remote Fields:

#Testing our Top-level Remote Field

As it's not connected to a content model or a content entry, we can test our Top-level Remote Field right away to make sure it works correctly.

Let's go over to the API Playground and make a query to fetch all the existing reviews:

Here's a query that you can copy and paste it in the API Playground. We've included the response as well:

As you can see, this simple query fetches all the reviews we have available.