Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Components

A component is a predefined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template where you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

#Querying components

After a component field has been configured, it is added to the Hygraph schema and becomes immediately queryable through the API. Press CTRL+Space or open the Explorer view to see the available fields inside the model that contains a component field.

#Basic components

Basic component fields are queried in the same way, as you would query regular fields inside your models. In the example below, a user has a page model with a basic hero component field that has cta, description and heroImage fields. Here's an example of a query with this setup:

query basicComponent {
  pages {
    id
    title
    mainText
    hero {
      #note that in the case of basic components, we're only using the component field's API ID, and we don't need to use the API ID of the component itself
      cta
      description
      heroImage {
        url
        height
        width
      }
    }
  }
}

The query above will return a result like this:

{
  "data": {
    "pages": [
      {
        "id": "cl120a7gvu57b0bt3qw4xiv86",
        "title": "Open positions at Hygraph",
        "mainText": "Follow this link to see all of the open positions - https://jobs.hygraph.com/",
        "hero": [
          {
            "cta": "Explore vacancies!",
            "description": "There are a huge variety of positions to be filled now",
            "heroImage": {
              "url": "https://media.graphassets.com/OIi5LuhxTTOm1M2bDS9N",
              "height": 480,
              "width": 640
            }
          },
          {
            "cta": "Apply right now!",
            "description": "The application process is nice and smooth",
            "heroImage": {
              "url": "https://media.graphassets.com/bAEFpGV2S2WxiuzYcV6R",
              "height": 427,
              "width": 640
            }
          }
        ]
      }
    ]
  }
}

#Modular components

Modular component fields are union types “under the hood”, so querying works the same way as with relations and unions. In the example below, a user has a blogPost model with some regular fields, such as id, title and mainText, as well as the modular additionalSections component field. The modular component field has two different components: Contributor and VideoBlock. To query the two components inside the modular component field, we're going to use ... on Contributor and ... on VideoBlock, as we would do with a regular union type:

query modularComponent {
  blogPost(where: { id: "cl11z0rctt6g80bt3anxt7c11" }) {
    id
    title
    mainText {
      markdown
    }
    categories {
      categoryName
    }
    additionalSections {
      __typename # if you have multiple component instances, it's recommended to use __typename to know which fields belong to which component instance.
      ... on Contributor {
        id
        name
        jobTitle
      }
      ... on VideoBlock {
        id
        title
        description
        youTubeEmbedUrl
        autoplay
      }
    }
  }
}

This query will return something like this:

{
  "data": {
    "blogPost": {
      "id": "cl11z0rctt6g80bt3anxt7c11",
      "title": "Berlin in spring",
      "mainText": {
        "markdown": "The best time to visit the German capital is the end of April\n"
      },
      "categories": [
        {
          "categoryName": "General"
        }
      ],
      "additionalSections": [
        {
          "__typename": "VideoBlock",
          "id": "cl11z858dt6te0ftjxi5ucvwx",
          "title": "Spring in Berlin",
          "description": "Watch this video for some travelling inspiration",
          "youTubeEmbedUrl": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/aWBGxt38o4s\" title=\"YouTube video player\" frameBorder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen></iframe>",
          "autoplay": false
        },
        {
          "__typename": "Contributor",
          "id": "cl11z0rdbt6g90bt3eud9anlj",
          "name": "Daniil",
          "jobTitle": "Editor"
        }
      ]
    }
  }
}