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.
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.
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.
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.
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".
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.
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.
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.