All Technologies / React.js / The Document Object

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.

An example response

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.

Copy
{
  "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"
  }
}

Accessing Document Fields

Here is how to access each document field.

ID

Copy
document.id

UID

Copy
document.uid

Type

Copy
document.type

API Url

Copy
document.href

Tags

Copy
document.tags
// returns an array

First Publication Date

Copy
document.first_publication_date

Last Publication Date

Copy
document.last_publication_date

Language

Copy
document.lang

Alternate Language Versions

Copy
document.alternate_languages
// returns an array

You can read more about this in the Multi-language Rendering page.

Document Content

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.

Copy
document.data.name

Refer to the specific rendering documentation for each field to learn how to add content fields to your pages.