6.1 Exercises - Queries

#Overview

Hygraph automatically generates queries for fetching single and multiple entries for each defined content type belonging to your project.

When a new model is added to your project, there are two generated GraphQL queries added to your schema. The queries are named after the API ID and Plural API ID. The API ID will be used to fetch a single entry, and the Plural API ID to fetch multiple entries.

Let's use our Product category model as an example here. If you look at the API Playground, you'll find productCategory - the model's API ID - and productCategories - the model's Plural API ID - in the tree. If you display productCategories, you'll find items for the system fields but also for all the fields we added to this model. We have categoryName, slug, description, and products.

API Playground with displayed tree

You can write your queries using the tree - by selecting items - or you can type them manually.

#GraphQL 1

This simple query fetches information about all our product categories. Remember that we are using the Plural API ID to fetch multiple entries. You can copy it and try it in your API Playground:

#GraphQL 2

Now let's try to fetch all the products in the New Arrival category. We will be using the slug with a where filter as our entry identifier for this:

#GraphQL 3

Now try this by yourself: Find out the productName and productSlug of all the products inside the urban category

#References 1

Let's try a query that fetches the related products connected to a product content entry.

We'll include a where condition with our entry slug and request the title of the related products component, as well as the productName and productSlug of the related products. It should look something like this:

The response shows us the 4 related entries, including the information we requested.

#References 2

Let's try another one. We want to find out which products have been assigned to the Sportswear category. To achieve this, we will query the products reference inside the productCategory model. We want to find out the productName, productSlug, and productDescription of those products. Since the product description was added with an RTE field, we need to select an output format; we'll select HTML.

You can try the following query yourself:

If you followed our tutorial to create the additional content entries, your response should look like the one shown above. Remember that if you did not create the related content entries then they can't be fetched.

The response shows us that there are only two products assigned to this category: the green hoodie and the blue running shoes.

If we go to the Product category model in the content editor and access the edit view of the Sportswear category by clicking on the pencil icon, we'll see that these same two products are listed in the Products reference.

Items in the sportswear category

#References 3

Now try this by yourself: Query the sellerInformation reference in the Landing page entry we created using the entry ID to find out the businessName and businessDescription.

#Components 1

Let's query the Product variant component that we created for our Product model earlier.

In a previous step in the Content editor, we created a sample entry that used this component for a headband. If you go into the Content editor, select the Product model, and access the edit view of that entry by clicking on the pencil icon, you'll see that the entry slug is "headband".

The following query looks into the Product model for an entry with the slug we provided and fetches the productName & productDescription, along with the productVariant component with the productType component field nested in it, containing the color for this item of type Accessory.

You can try this in your project's API Playground:

#Components 2

Let's also query the Related products component for our content entry whose slug is "blue-running-shoes". Remember, we are using the slug to identify it. We'll go ahead and replace the productVariant component with the relatedProducts one, and we'll request the productDescription in HTML, which we created using the RTE in the content editor.

Here's our sample query:

The response you get may contain less content than what we show here, depending on whether you followed the provided practice or not.

#Components 3

Now imagine we want to find out the productName, productSlug, and productDescription of all the products with the accessories product type, where the color white was selected in the productVariant component.

Let's try this query:

The response you get may contain less content than what we show here, depending on whether you followed the provided practice or not.

#Components 4

Now try this by yourself: Query the productGrid component in the landing page entry we created earlier using the entry ID. Find out the productName and productSlug of all the products that were added there.

#Remote Fields 1

You can use the API to query Remote Fields as soon as you add them to the Schema. Bear in mind that a Remote Field will be related to a specific model and only fetch data related to it.

The Product model that we created contains data that lives in Hygraph - such as business productName and productDescription - as well as a Remote Field that fetches reviews from an external API.

Try using the following query in your API Playground:

Our front end can use this information to enrich our product listings with these reviews. We'll be able to show our products, along with all the reviews we have received from the people who purchased our them, to encourage new customers.

#Remote Fields 2

Let's take a look at another example where it's even more noticeable how this information is connected to the model the Remote Field is a part of. We'll query the Remote Field inside the Product model while also using a where filter with the "colorful-socks" slug, so we can fetch all reviews that are about one of our products.

Copy it and paste it into your API Playground:

As you can see, the response only contains one review this time, and it's about our “plaid shirt” product.

#Remote Fields 3

Now try this by yourself: Query the reviews Remote Field inside the Products model to find out the rating values of all the reviews we've received.

#Top-level Remote Fields 1

Let's test the Top-level Remote Field that we added to the Query system model.

In the example where we tested our Top-level Remote field earlier, we used an example query that fetched all our reviews. Now let's try something a bit different; we'll query our landing page, and also the reviews, all in the same API call.

Copy it and paste it into your API Playground:

As you can see in the query above, landingPage and reviews are at the same level in our query, but we never built a Reviews model in our Schema. Here, you can clearly see how we're querying a Top-level Remote Field outside the context of a project model.

When we built our schema, we did not include a Remote Field to fetch reviews into the landing page. However, we did create a Top-level Remote Field in the Query system model. This example shows how we fetch some information from the landing page, and in the same call, we fetch our reviews through that Top-level Remote Field.

#Top-level Remote Fields 2

Now try this by yourself: Query the reviews Top-level Remote field but this time we only want to fetch the productSlug and the rating.