4.3 Top-level Remote Fields
In this lesson you'll learn how to add Top-level Remote Fields to the Query system model.
#Overview
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 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:
| Tab | Field | Input |
|---|---|---|
| Settings | Display name | Reviews |
| Settings | API ID | Completing the display name will autocomplete the API ID field. We'll leave this value as it is. |
| Settings | Remote source | HyDemoAPI is selected by default. We'll leave this value as it is. |
| Settings | Method | GET is selected by default. We'll leave this value as it is. |
| Settings | Return type | Use the dropdown to select ReviewMeta, which is one of the custom type definitions we configured for our remote source earlier. |
| Settings | Input arguments | Click + Add to reveal more fields, which you'll complete next. |
| Settings | Input type | Use the dropdown to select Int. |
| Settings | API ID | ProductId |
| Settings | Make field required | Select this checkbox |
| Settings | Path | Wite /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.
Once you've added the the Top-level Remote Field to the Query model and tested it, move on to our next lesson:
5.1 Content creation