More articles

Query Documents by ID or UID

This page gives examples of how to query for a document either by its ID or its UID. It provides examples for both using the query helper functions and doing the query manually.

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.

Querying by Language

Note that if you are trying to query a document that isn't in the master language of your repository, you will need to specify the language code or wildcard language value. You can read how to do this on the Query by Language page.

If you are using one of the query helper functions below, you do not need to do this. The only exception is the getByUID helper which is explained below.

Query by ID

With the helper function

Here is an example showing how to query a document by its id using the helper function.

Copy
this.$prismic.client.getByID('WAjgAygABN3B0a-a').then((document) => {
  // document contains the document content
});

Without the helper function

Here is an example of how to query a document by its id without the helper function.

Copy
this.$prismic.client.query(
  this.$prismic.Predicates.at('document.id', 'WAjgAygAAN3B0a-a'),
  { lang : '*' }
).then((response) => {
  const document = response.results[0]
  // document contains the document content
});

Query multiple documents by their IDs

With the helper function

Here is an example of how to query multiple documents by their ids using the helper function.

Copy
const ids = ['WAjgAygAAN3B0a-a', 'WC7GECUAAHBHQd-Y', 'WEE_gikAAC2feA-z'];

this.$prismic.client.getByIDs(ids).then((response) => {
  // response is the response object, response.results holds the documents
});

Without the helper function

You can also query multiple documents by their ids without the helper function by using the in predicate.

Copy
const ids = ['WAjgAygAAN3B0a-a', 'WC7GECUAAHBHQd-Y', 'WEE_gikAAC2feA-z'];

this.$prismic.client.query(
  this.$prismic.Predicates.in('document.id', ids),
  { lang : '*' }
).then((response) => {
  // response is the response object, response.results holds the documents
});

Query by UID

With the helper function

Here is an example of how to query a document of the type "page" by its uid "about-us".

Copy
this.$prismic.client.getByUID('page', 'about-us').then((document) => {
  // document contains the document content
});

Query by language

It's possible that you may have documents in different languages with the same UID value. In that case, you will need to specify the language code in order to retrieve the correct document.

Copy
this.$prismic.client.getByUID('page', 'about-us', { lang : 'fr-fr' }).then((document) => {
  // document contains the fr-fr document content
});

Note that if you don't specify the language or if you specify the wildcard value '*', the oldest document with this UID value will be returned.

Query all language versions by UID

The getByUID function will always return a single document. If you need to query all the language versions that share the same UID, then you can use the following method to retrieve them all at the same time.

Without the helper function

Here is an example of how to query the document(s) of the type "page" by its uid "about-us" without using the helper function.

Copy
this.$prismic.client.query(
  this.$prismic.Predicates.at('my.page.uid', 'about-us'),
  { lang : '*' }
).then((response) => {
  // response is the response object, response.results holds the documents
});

Vue Router: Reacting to params changes

If your component is retrieving content from the Prismic API based on one of the route params, make sure to take a look at our Reacting to params changes page.

Table of Contents