Query content from the CMS

Package versions

These docs use the following package versions:

  • prismic-reactjs: v1.3
  • @prismicio/client: v5

The docs will soon be updated to use the latest versions of these packages. If you wish to use the latest versions today, you can update your project by following the migration guides for each package.

To work with your content in Next, you must first query it from the Prismic API. On this page, you'll learn how to do a Prismic API query in your Next project.


Define an API client endpoint

Before querying documents from your repository, define a Client variable that refers to the instantiated @prismicio/client library with the API endpoint of your repository. If you followed the installation guide, this variable is already set up.

In the following example, we create a basic instance of the API client in a ~/prismicHelpers.js file

Copy
const Prismic = require('@prismicio/client');

// Update your-repo-name with the name of your repository.
const apiEndpoint = 'https://your-repo-name.cdn.prismic.io/api/v2'
const Client = Prismic.client(apiEndpoint, { req })

After configuring your Client, now you'll be able to create queries.

Query with @prismicio/client

The @prismicio/client library contains Helper functions to query and render content from the Prismic API. Here are the most commonly-used query helper functions and use cases:

Query Singleton

Queries the API for the document of a given singleton Custom Type. type refers to the API ID of the document's Custom Type.

Copy
// Update the path for your API client file.
import { Client } from '../path-to-your-API-client-config'

// Syntax: getSingle(custom-type)
const document = await Client().getSingle('homepage')

Query by UID

Queries the API for the document of a given type with a given UID. type refers to the API ID of the document's custom type, and uid refers to the document's UID.

Copy
// Update the path for your API client file.
import { Client } from '../path-to-your-API-client-config'

// Syntax: getByUID(type, uid)
const document = await Client().getByUID('blog-post', 'hello-world')

Query by Type

For more specific queries, you can use Prismic's predicates. Predicates are search parameters. To get all documents of a certain type, you'd use a predicate to search for all documents where the type matches a given value.

Copy
import Prismic from "@prismicio/client";
// Update the path for your API client file.
import { Client } from '../path-to-your-API-client-config'

// Syntax: getByUID('document.type', type)
const document = await Client().query(Prismic.Predicates.at('document.type', 'product'))

Query all Documents

Used for building more advanced queries. query is either a predicate function or an empty string. An empty string returns all documents.

Copy
// Update the path for your API client file.
import { Client } from '../path-to-your-API-client-config'

// Syntax: client.query(query)
const document = await Client().query('')

Further Learning: Advanced Queries

These queries can accept an options object and a callback function as additional arguments, like this:

client.getByUID( custom-type, uid, options )

Furthermore, client.query() can perform extremely powerful and specific searches.

You can learn more about options, callbacks, and advanced queries in the Advanced Queries section of the React documentation.

In Pages (Dynamic)

In pages, you can use Next's getStaticProps method to query the Prismic API. Here's an example of what a query might look like in a dynamic ~/pages/[uid].js file. We're rendering a title and the Slice Zone:

Copy
import React from 'react'

// Update the path for your API client file.
import { Client } from '../path-to-your-API-client-config'
import { RichText } from 'prismic-reactjs'

// Update the paths for your functions and component files.
import SliceZone from "../path-to-your-slicezone-component";

const Post = ({ post }) => {
  return (
    <>
     {RichText.asText(post.data.title)}
     <SliceZone slices={post.data.body} />
    </>
  )
}

export async function getStaticProps({params}) {
  const post = (await Client().getByUID('page', params.uid)

  return {
    props: {
      post,
    },
  }
}

export async function getStaticPaths() {
  const docs = await Client().query(
    Prismic.Predicates.at('document.type', 'page'),
    { lang: '*' }
  );
  return {
    paths: docs.results.map((doc) => {
      return { params: { uid: doc.uid }};
    }),
    fallback: false,
  };
}

export default Post

Pre-defined routes take precedence over dynamic routes, the Next.js documentation explains in full.

Query by Language

Prismic allows you to publish your content in different languages. By default, the API will return content in your primary language.

You can make your website language dynamic by using the lang URL param to query your content by language. Refer to the dedicated Multilingual templating documentation for more details.


Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.