What are Fields in GraphCMS?

Fields are the building blocks of your Schema models. Out of the box, we offer a complete set of field types for you to work with. We will look at them in-depth here.

You can view the fields by clicking on the fields tab to the right of the editor window.

Each field type can store a specific type of data. GraphCMS offers the following field types:

  • Single Line Text: names, titles, slugs, list of names.
  • Multi Line Text: comments, formatted text.
  • Markdown: long-form content, formatted text.
  • RichText Editor: long-form content, common formatting options.
  • Integer: ID, product number, quantity.
  • Float: precise numbers, prices, percentages.
  • Checkbox: true or false, yes or no.
  • Date: post date, date of birth.
  • Date and Time: events, opening hours.
  • Json Editor: data in JSON format.
  • Asset Picker: any asset, e.g. image, video.
  • Color: hex and rgba to define colors in the frontend.
  • Map: longitude, latitude of an address or location.
  • Dropdown: selection on a predefined set of values (Enumerations).
  • Reference: for referencing other schema models. i.e. the author of a blog post.

Supported Fields

All fields support the same basic parameters as creating a model. Display Name, API ID, and Description.

Additionally, with the exception of Relations and Enumerations, they also support Multiple Values which allows you to add an array of strings (multiple values) to the field.

Field Types

Single line text

"Single line text"

Single line text can be considered as a proper noun. A superhero is a type of person, that's a model in general. A Super Hero's name is unique and won't be typically shared with another Super Hero. A unique string is a good option here.

Alternatively, you could use the Allow Multiple Values option to include a range of aliases that the Super Hero goes by.

Multi line text

"Multi line text"

Because of how databases work, it's helpful to distinguish between small text fields and big text fields. Generally speaking, smaller text fields are more efficient. However, they're not ideal for, well, long text. Use these to describe your Super Hero's bio.

Markdown

"Markdown"

For really long text, or just for when you are feeling fancy, markdown is the lingua franca on the web for content editors these days. So, of course, we've got you covered. This could be used to regale readers with your Super Hero's long backstory.

RichText Editor

RichText Editor Field

Also useful for long-form content, but visualized in the classic format! This field offers a wealth of possibilities unlike any of the string fields. With Rich Text you can:

  • Define H1-H6 headings for a semantically correct output
  • Bold Text
  • Italicize Text
  • Underline Text
  • Add a codeblock
  • Link Text
  • Create an Ordered or Unordered list
  • Embed an iFrame
  • Quote Text
  • Add CSS Classes to paragraphs
  • Insert Video and Image assets

Querying the field

You can query this fields content in markdown, html, text or even the raw format. This provides a lot of versatility to your presentation layer. The raw format is a Slate compatible Abstract Syntax Tree, or AST for short.

Integer

"Integer"

Integers are for round numbers. Consider this for an age field.

Float

"Float"

Again, for efficiency sake, numbers have been split into different types for technical reasons. Floats are numbers which can have decimals in them. This would be good for fine-tune numbers like Super Hero strength.

Checkbox

"Checkbox"

For those yes/no options, checkboxes are the go-to solution. Is the Super Hero retired?

Date

"Date"

Quite simply, this could be a Super Hero birth date or the start of their Super Heroism. You decide.

Date and Time

"DateTime"

Again, another example of identical data types all for technical reasons! We get it can be annoying, but choosing the most simple form your data can take will make your app run faster. Date and Time fields, for when the seconds matter.

Json Editor

"Json"

Warning, nerd alert! JSON is meant for people who understand what JSON is. It's a type of data object that can store as much data as you want. Sometimes you will be bringing over data from another system, and you simply don't have time to recreate all the data without beautiful fields. If you can get your old data in JSON format, just stick it in here and call it a day.

Adventurous users will imagine what kinds of possibilities could be had by using the JSON field and our webhooks!

Asset Picker

"Asset"

Assets are images or videos. Assets need to be created before they can be attached to the content you create, but in creating a model, you need to define a field to support them!

See the Asset docs for more information.

Color

Color Field

Accepts a hex code, RGBA, or color-picker input in a traditional color picker modal.

Querying the field

When querying a color field, you will need to define at least one of the subfields:

  • hex
  • css which outputs rgb(0,0,0) format
  • rgba which breaks down into r, g, b, a subfields.
{
  brandColor {
    hex
    css
    rgba {
      r
      g
      b
      a
    }
  }
}

Map

Map Field

Takes an address and displays the location as a pin on the map. You can also manually select the address on the map, as well as define multiple locations when Allow multiple values is toggled.

Querying the field

When querying a map field, you will need to include the latitude and longitude subfields.

{
  hotels {
    location {
      latitude
      longitude
    }
  }
}

"Enumeration"

Enumerations are similar to drop-down selections. You first need to create an enumeration before you can add one to your model. These fields, called enums for short, are a predefined list of singular values. Let's imagine this is as a mood selection for our Super Hero. His mood could be one of Very Happy, Happy, Sad, Very Sad. Even Super Heroes are sad sometimes!

Reference

"Reference"

References, sometimes called a connect field, are one of the most powerful fields available. As such, they deserve their own page of documentation. In short, they allow you to connect two models together. Their options are more complex than just that, so to read more about them, view the Relations doc.

This is how you would associate a Super Hero with an Allegiance, Secret Hideout, Super Power or other types of models you might create.