Developers / React / Fetch Data

Fetch Data

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

In this article, you'll learn how to perform different queries to the Prismic API to get content in your React application.

Before you proceed

First, you'll need a project with React and Prismic. If you don't have one yet, start with the Install step.

Queries are performed using hooks and the Prismic client registered in <PrismicProvider>.

Here’s a basic query that fetches the first Prismic document you’ve created.

Copy
import { PrismicRichText, useFirstPrismicDocument } from '@prismicio/react'

function App() {
  const [document] = useFirstPrismicDocument()

  return (
    <div>
      {document && (
        <PrismicRichText field={document.data.example_rich_text} />
      )}
    </div>
  )
}

Below are the most commonly-used query helper hooks and their use cases.

There are many more methods for querying the API. All of these queries can accept options to filter, sort, paginate, and translate your query response. See them all in the @prismicio/react Technical Reference.

Fetch a singleton page

In Prismic, you can create a singleton page type to store pages with one instance, such as a homepage or contact page.

To query a singleton, use the useSinglePrismicDocument hook with the API ID of the singleton custom type.

For example, here we are querying for the only document of the type homepage.

Copy
const [document] = useSinglePrismicDocument('homepage')

Fetch a menu document

To query a menu document, use the useSinglePrismicDocument hook with the API ID of the menu custom type.

For example, here we are querying for the only document of the custom type menu.

Copy
const [menu] = useSinglePrismicDocument('menu')

Fetch one page from a page type

On repeatable documents, we recommend adding a UID field — a unique identifier. Prismic formats each document's UID so it is URL-friendly and unique to its custom type.

To query a specific document of a given custom type, like a blog post, use the usePrismicDocumentByUID hook with the UID and the API ID of the custom type.

For example, here we are querying for a post document with a UID of my-first-post.

Copy
const [document] = usePrismicDocumentByUID('post', 'my-first-post')

Fetch all pages from a page type

To query all pages of a given custom type, like for a posts page, use the useAllPrismicDocumentsByType hook with the UID and the API ID of the custom type.

This method may perform multiple network requests and returns an array containing all matching documents from the repository.

For example, here we are querying for all documents of the custom type article.

Copy
const [documents] = useAllPrismicDocumentsByType('article')

Fetch all documents

For best performance, we do not recommend querying all Prismic documents. Instead, we recommend querying documents by type using useAllPrismicDocumentsByType.

Fetch pages by language

Prismic allows you to publish your content in different languages. By default, the API will return content in your master language. To get content in a different language, add an options object with a lang option and a locale code.

Here's an example of how to query the document of the type homepage in French (fr-fr).

Copy
import { useSinglePrismicDocument } from '@prismicio/react'

function App() {
  const [homepage] = useSinglePrismicDocument('homepage', {
    lang: 'fr-fr',
  })

  // Use `homepage` in your component's return value
}

Display a loading message

Every query hook returns its loading status alongside the query result. You can access the status by destructuring it from the second element of a hook's return value.

Here's an example using a hook's status to display a loading message.

Copy
import { usePrismicDocumentByUID } from '@prismicio/react'

function App() {
  const [page, { state }] = usePrismicDocumentByUID('page', 'hello-world')

  return (
    <div>
      {state === 'loading' ? (
        <p>Loading…</p>
      ) : (
        page && <p>{page.data.example_field}</p>
      )}
    </div>
  )
}

← Previous

Install Prismic

Next →

Template Content

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.

Adjust cookie settings