Components

In order to perform these operations, ensure that you have the proper authentication (if necessary) and user permissions.

Any component can be queried in one of two ways: using the components field or using the component field. The former retrieves every single component contained within the shape whereas the latter fetches the specific components whose id you have specified. Let's first take a look at how each component can be fetched individually.

The single line component is one of the most commonly used components. Its recommended use is for when you have to add short entries such as a name or a title. You can query this component as follows:

The rich text component gives you access to common formatting options such as bold, italics, lists, blockquotes, etc. Rich text returns its data in three formats: text, HTML, and JSON. Generally, you would just retrieve one of these. The example query below retrieves all three.

Once you upload an image to an images component, Crystallize optimizes the image size and also generates image formats such as WebP and AVIF. The following query shows how to fetch images components along with their associated URLs, variants, and image metadata. The variants include the image in different sizes, and each size has multiple image formats.

To grab only the first image, you can use the firstImage field. Using this, you can also ask for other information such as altText, caption, metaProperty, createdAt, etc.

The switch component contains a boolean value, either true or false. In the demo tenant, we use this component for blog posts to set whether a post is free for the user to view or not. It can be queried as follows:

In Crystallize, you can create any number of grids to display your items in a visually pleasing manner. These grids are then easily editable. To fetch a grid, you can use the grids type. In the following query, we are simply fetching the items contained within a grid. To fetch the layout, you can use the layout field in columns.

To fetch a videos component, the VIdeoContent type is used. You can then retrieve the video and its related information such as the title, thumbnails, etc. as follows:

The properties table contains key-value pairs that can be fetched in the following way:

The paragraphs contained in a paragraph collection component can be fetched using the ParagraphCollectionContent type. You can then fetch all the data within those paragraphs using the ParagraphContent type. The following query gets the rich text content in the paragraph. You can also fetch the title, images, and videos.

The numeric component can be fetched using the NumericContent type. This type contains two values: the number as well as its defined unit.

The location component can be fetched using the LocationContent type that returns two values: latitude and longitude.

If you have added the item relation component to an item, you can fetch the related items by using ItemRelationsContent. Then you can fetch more information about said items using the fields mentioned in the Query Fields section. The following query fetches all related items and the names of those items.

The date component can be fetched using the DatetimeContent type. It simply returns the selected date and time.

File components store one or more files that haven’t been transcoded or transformed in any way. The code sample below queries a specific component ID and, for each file it contains, returns the URL where it’s stored (url), its identifier (key), user-defined title (title), and size in bytes (size).

The choice component always returns the value you've chosen. It can be fetched using the ComponentChoiceContent type that returns the selected component which can be further queried using the specific component type. Below, discount can either be a number or a percent value. Since we've chosen the percent value for this item, that is what is returned.

The content chunk component can have multiple components within it. To fetch these, the ContentChunkContent type is used. Once you have the name, you can grab the content similar to what we did in the section above.