Fetch Linked Document Fields

Here we explore an example that fetches a specific content field from a linked document.

Before reading

This page assumes that you're using the Vue.js starter project or that you have setup your project as explained on the Integrating with existing project page.

The fetchLinks option allows you to retrieve a specific content field from a linked document and add it to the document response object.

Note that this will only retrieve content of the following field types:

  • Color
  • Content Relationship
  • Date
  • Image
  • Key Text
  • Number
  • Rich Text (but only the first element)
  • Select
  • Timestamp
  • Title

It is not possible to retrieve the following content field types:

  • Embed
  • GeoPoint
  • Link
  • Link to Media
  • Rich Text (anything other than the first element)
  • Any field in a Group or Slice

The value you enter for the fetchLinks option needs to take the following format:

Copy
{ fetchLinks: '{custom-type}.{field}' }

{custom-type}

The Custom Type API ID of the linked document

{field}

The API ID of the field you wish to retrieve from the linked document

A simple example

The following is an example that uses the fetchLinks option.

In this example we are querying for a recipe document with the UID chocolate_chip_cookies.

The recipe Custom Type has a Content Relationship (AKA Document Link) field with the API ID author_link which links to an author document.

Inside the author document you have a Key Text field with the API ID name.

The following will show you how to retrieve the author name field when querying the recipe:

Copy
this.$prismic.client.getByUID('recipe', 'chocolate_chip_cookies',
  { fetchLinks: 'author.name' }
).then((document) => {
  const author = document.data.author_link;
  // the variable author now works like a top-level document
  const authorName = author.data.name;
  console.log(authorName);
});

Fetch multiple fields

In order to fetch more than one field from the linked document, you just need to provide an array of fields. Here is an example that fetches the fields name and picture from the author Custom Type:

Copy
{ fetchLinks: ['author.name', 'author.picture'] }