Retrieve Prismic fields

This article will show you how to query or retrieve top level Prismic fields.


Retrieve Prismic fields

Simple fields

Retrieving Prismic fields is pretty straight forward. When these fields exist at the top level of the document (outside of a Slice Zone), most of them are retrieved similarly. You need to specify the API ID of the given field; these fields are:

  • Boolean
  • Color
  • Date
  • Key Text
  • Number
  • Select
  • Timestamp

Here's what retrieving any of these would look like. In the following example, we retrieve a Key Text field with the API ID of example_key_text.

Copy
query MyQuery {
  allPrismicPage {
    edges {
      node {
        data {
          example_key_text
        }
      }
    }
  }
}

⚠️ Example API IDs

Note: In this example, the fields' API ID is the same as the field itself with the prefix example_ appended at the beginning. e.g., Embed field = example_embed .

More complex fields

For the rest of the fields, let's take a look at these examples of all the possible values you can retrieve from each of them:

  • Title & Rich Text
  • Image
  • Content Relationship & Link
  • Link to media
  • Embed
  • Geopoint
  • Group
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_title {
            text
            raw
            html
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_image {
            url
            dimensions {
              width
              height
            }
            desktop {
              url
              dimensions {
                height
                width
              }
            }
            tablet {
              url
              dimensions {
                height
                width
              }
            }
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_content_relationship_or_link {
            id
            isBroken
            lang
            link_type
            raw
            size
            slug
            tags
            target
            type
            uid
            url
            document {
              ... on PrismicExampleType {
                data {
                  example_title {
                    raw
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_link_to_media {
            id
            isBroken
            lang
            link_type
            raw
            size
            slug
            tags
            target
            type
            uid
            url
            document
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_embed {
            author_name
            author_url
            embed_url
            height
            html
            provider_name
            provider_url
            thumbnail_height
            thumbnail_url
            thumbnail_width
            title
            type
            version
            width
          }
        }
      }
    }
  }
}
Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_geopoint {
            latitude
            longitude
          }
        }
      }
    }
  }
}
Copy
# For this one you just need to specify each different type of field inside of the group
query MyQuery {
  allPrismicPost {
    edges {
      node {
        data {
          example_group {
            ...
          }
        }
      }
    }
  }
}

Retrieve metadata fields

Retrieving metadata fields is really simple; you need to go down to edges > node, and once there, you'll have all the available metadata fields.

Here you can see an example of how to retrieve the metadata fields of the type Post documents.

Copy
query MyQuery {
  allPrismicPost {
    edges {
      node {
        uid
        id
        lang
        type
        last_publication_date
        first_publication_date
        alternate_languages {
          lang
          type
          uid
          id
        }
      }
    }
  }
}

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.