The Document Object
Here we will discuss the document object for Prismic when using the @prismicio/client development kit for a React.js project.
Before Reading
This article assumes that you have queried your API and saved the document object in a variable named document.
Let's start by taking a look at the Document Object returned when querying the API. Here is a simple example of a document that contains a couple of fields.
{
"id": "WKxlPCUEEIZ10AHU",
"uid": "example-page",
"type": "page",
"href": "https://your-repo-name.prismic.io/api/documents/search...",
"tags": [],
"first_publication_date": "2017-01-13T11:45:21.000Z",
"last_publication_date": "2017-02-21T16:05:19.000Z",
"slugs": [
"example-page"
],
"linked_documents": [],
"lang": "en-us",
"alternate_languages": [
{
"id": "WZcAEyoAACcA0LHi",
"uid": "example-page-french",
"type": "page",
"lang": "fr-fr"
}
],
"data": {
"title": [
{
"type": "heading1",
"text": "Example Page",
"spans": []
}
],
"date": "2017-01-13"
}
}
document.id
document.uid
document.type
document.href
document.tags
// returns an array
document.first_publication_date
document.last_publication_date
document.lang
document.alternate_languages
// returns an array
You can read more about this in the Multi-language Rendering page.
To retrieve the content fields from the document you must specify the API ID of the field. Here is an example that retrieves a Key Text field's content from the document. Here the Key Text field has the API ID of name.
document.data.name
Refer to the specific rendering documentation for each field to learn how to add content fields to your pages.