---
title: "Fetch Content"
description: "Read content from your Prismic repository."
category: "concepts"
audience: developers
lastUpdated: "2025-12-09T03:11:18.000Z"
---

The Content API is used to read content from your Prismic repository. The API supports common features, like filtering, sorting, and pagination. Content is served as JSON and works directly with Prismic's [SDKs](https://prismic.io/docs/apis.md#javascript-packages).

[`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) is the official client for the Content API.

# How to fetch content

Use `@prismicio/client` and its [query methods](#query-methods) to fetch content. Responses are automatically [typed with TypeScript](https://prismic.io/docs/slice-machine.md#typescript), ensuring safe data access.

Each website framework has a specific way of using the Prismic client. Visit the [Next.js](https://prismic.io/docs/nextjs.md#fetch-content), [Nuxt](https://prismic.io/docs/nuxt.md#fetch-content), or [SvelteKit](https://prismic.io/docs/sveltekit.md#fetch-content) guide to learn how to set up the client for your framework.

Once set up, the client can be used to fetch page content. The following example fetches a page with the UID `about-us`.

**Next.js example:**

```ts
import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();

  // Fetch the "about-us" page
  const page = await client.getByUID("page", "about-us");
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const prismic = usePrismic();

// Fetch the "about-us" page
const { data: page } = await useAsyncData("about-us", () =>
  prismic.client.getByUID("page", "about-us"),
);
</script>
```

**SvelteKit example:**

```ts
import { createClient } from "$lib/prismicio";

export async function load({ fetch, cookies }) {
  const client = createClient({ fetch, cookies });

  // Fetch the "about-us" page
  const page = await client.getByUID("page", "about-us");
}
```

> Build and test client queries directly from your browser with the [API Explorer](#api-explorer).

# Content visibility

All published content is publicly accessible through the API by default.

To limit or expand access, navigate to the repository's **Settings** > **API & Security** page and adjust the **API access** setting.

You can choose from one of the following visibility levels:

|                                          | Published content     | Content in a [release](https://prismic.io/docs/releases.md) | Archived content |
| ---------------------------------------- | --------------------- | ----------------------------------------------------------- | ---------------- |
| **Open API**                             | Public                | Public                                                      | No access        |
| **Public API for Master only** (default) | Public                | Requires access token                                       | No access        |
| **Private API**                          | Requires access token | Requires access token                                       | No access        |

> [Releases](https://prismic.io/docs/releases.md) are used to group multiple changes and publish together. The **API access** setting affects access to releases in the API.

For maximum security, use **Private API** to authenticate all requests with an access token. You'll need to generate an access token in your repository's settings and configure your client to use it.

See the [Next.js](https://prismic.io/docs/nextjs.md#secure-with-an-access-token), [Nuxt](https://prismic.io/docs/nuxt.md#secure-with-an-access-token), or [SvelteKit](https://prismic.io/docs/sveltekit.md#secure-with-an-access-token) guide for step-by-step instructions on generating a token and configuring your client.

> **Important**
>
> The access token is a secret. Do not use it in client-side requests to prevent exposing the token.

# Response format

API responses are returned as JSON. The following sections describe how [pages](#pages), [fields](#fields), and [slices](#slices) are formatted.

## Pages

[Pages](https://prismic.io/docs/content-modeling.md#page-types) are returned as objects with metadata. The `data` property contains the page's [fields](#fields).

```json
{
  "id": "YCiUyRUAACQAxfZK",
  "uid": "my-first-post",
  "url": "/blog/my-first-post",
  "type": "blog_post",
  "href": "https://example-prismic-repo.cdn.prismic.io/api/v2/...",
  "tags": ["Tag 1", "Tag 2"],
  "first_publication_date": "2021-02-14T03:22:26+0000",
  "last_publication_date": "2022-07-09T00:36:18+0000",
  "slugs": ["my-first-post"],
  "linked_documents": [],
  "lang": "en-us",
  "alternate_languages": [],
  "data": {
    // ...
  }
}
```

Pages contain these properties:

| Property                       | Type                                        | Description                                                                         | Default |
| ------------------------------ | ------------------------------------------- | ----------------------------------------------------------------------------------- | ------- |
| id                             | string                                      | The pages's unique identifier.                                                      | None    |
| uid                            | string \| null                              | The page's user-provided identifier. Only present if the page type has a UID field. | None    |
| type                           | string                                      | The page's type.                                                                    | None    |
| url                            | string \| null                              | The page's URL defined by a [route resolver](https://prismic.io/docs/routes.md).    | None    |
| data                           | object                                      | The page's fields and slices.                                                       | None    |
| first\_publication\_date       | string                                      | The page's first publication date in ISO 8601 format.                               | None    |
| last\_publication\_date        | string                                      | The page's last publication date in ISO 8601 format.                                | None    |
| alternate\_languages           | AlternateLanguage\[] (see definition below) | The page's alternate language versions.                                             | None    |
| lang                           | string                                      | The page's language code.                                                           | None    |
| tags                           | string\[]                                   | The page's tags.                                                                    | None    |
| href                           | string                                      | The page's API URL.                                                                 | None    |
| slugs (deprecated)             | string\[]                                   | The page's slugs. The first slug is the current slug.                               | None    |
| linked\_documents (deprecated) | object\[]                                   | Pages that link to this page.                                                       | None    |

**AlternateLanguage definition:**

| Property | Type           | Description                                                                                            | Default |
| -------- | -------------- | ------------------------------------------------------------------------------------------------------ | ------- |
| id       | string         | The alternate language page's unique identifier.                                                       | None    |
| uid      | string \| null | The alternate language page's user-provided identifier. Only present if the page type has a UID field. | None    |
| type     | string         | The alternate language page's type.                                                                    | None    |
| lang     | string         | The alternate language page's language code.                                                           | None    |

## Fields

Each page's [fields](https://prismic.io/docs/fields.md) are stored in its data property as individual properties.

The format of each field differs depending on the field's type. See the documentation for each specific field type to see its API format.

[See all of the available fields](https://prismic.io/docs/fields.md)

The following example page has two fields:

1. `title`: A [rich text](https://prismic.io/docs/fields/rich-text.md) field.
2. `author`: A [content relationship](https://prismic.io/docs/fields/content-relationship.md) field.

```json
{
  "id": "YCiUyRUAACQAxfZK",
  // ...
  "data": {
    "title": [
      {
        "type": "heading1",
        "text": "Build a website that grows",
        "spans": []
      }
    ],
    "author": {
      "id": "XxnD3REAACYAk_CJ",
      "type": "author",
      "tags": [],
      "slug": "ada-lovelace",
      "lang": "en-us",
      "uid": "ada-lovelace",
      "data": {
        "name": [
          {
            "type": "paragraph",
            "text": "Ada Lovelace",
            "spans": []
          }
        ]
      }
    }
  }
}
```

Each field can be read by accessing its property:

```ts
const title = page.data.title;
const author = page.data.author;
const authorName = author.data?.name;
```

Fields are [fully typed](https://prismic.io/docs/slice-machine.md#typescript) using TypeScript.

## Slices

[Slices](https://prismic.io/docs/slices.md) are made up of [fields](#fields) and are the primary location for a page's content. Slices are provided in a page's `slices` property within the `data` object, alongside the page's non-slice fields.

The following example page has two slices:

1. A **Quote** slice containing a `quote` [text](https://prismic.io/docs/fields/text.md) field.
2. A **Text** slice containing a `text` [rich text](https://prismic.io/docs/fields/rich-text.md) field.

```json
{
  "id": "YCiUyRUAACQAxfZK",
  // ...
  "data": {
    "slices": [
      {
        "id": "quote$e568fae3-e996-43c2-af06-dbf42b215cc2",
        "slice_type": "quote",
        "variation": "default",
        "version": "initial",
        "primary": {
          "quote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        "items": []
      },
      {
        "id": "text$afba88d2-3ce4-46b5-b42b-b89e8dcd6dc5",
        "slice_type": "text",
        "variation": "default",
        "version": "initial",
        "primary": {
          "text": [
            {
              "type": "heading1",
              "text": "Build a website that grows",
              "spans": []
            }
          ]
        },
        "items": []
      }
    ]
  }
}
```

The `slices` property can be passed directly to the `<SliceZone>` component from Prismic's SDKs.

**Next.js example:**

```tsx
<SliceZone
  slices={page.data.slices}
  components={{
    quote: QuoteSlice,
    text: TextSlice,
  }}
/>
```

**Nuxt example:**

```vue-html
<SliceZone
  :slices="page.data.slices"
  :components="defineSliceZoneComponents({
    quote: QuoteSlice,
    text: TextSlice,
  })"
/>
```

**SvelteKit example:**

```svelte
<SliceZone
  slices={page.data.slices}
  components={{
    quote: QuoteSlice,
    text: TextSlice,
  }}
/>
```

[Learn more about displaying slices](https://prismic.io/docs/slices.md#display-slices)

> In rare cases, a [page type](https://prismic.io/docs/content-modeling.md#page-types) may have been customized to use a property other than `slices`. Inspect the API response for the correct property if the `slices` property does not contain slices.

# Query methods

[`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) provides many methods that fetch content. The methods can be grouped into the following categories:

* **`get`** methods (single): Return a single matching page.
* **`get`** methods (paginated): Return paginated responses with up to 100 pages per response.
* **`getAll`** methods: Return all matching pages. May make multiple network requests.

> Build and test client queries directly from your browser with the [API Explorer](#api-explorer).

## `get` methods (single)

These methods return a single matching page.

* [`getFirst()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getfirst)
* [`getByID()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyid)
* [`getByUID()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyuid)
* [`getSingle()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getsingle)

If a matching page cannot be found, the client throws a `NotFoundError`.

These methods are useful when you need to display a page's contents, like on a blog post's page template.

## `get` methods (paginated)

These methods return multiple matching pages in a paginated object. Each response can contain up to 100 pages.

* [`get()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#get)
* [`getByIDs()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyids)
* [`getByUIDs()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyuids)
* [`getByType()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbytype)
* [`getByTag()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbytag)
* [`getByEveryTag()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbyeverytag)
* [`getBySomeTags()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getbysometags)

Paginated responses are in this format:

| Property             | Type               | Description                                      | Default |
| -------------------- | ------------------ | ------------------------------------------------ | ------- |
| results              | PrismicDocument\[] | A paginated list of pages matching the query.    | None    |
| page                 | number             | The current page number.                         | None    |
| total\_pages         | number             | The total number of pages.                       | None    |
| results\_size        | number             | The number of results in the page of results.    | None    |
| results\_per\_page   | number             | The maximum number of results per page.          | None    |
| total\_results\_size | number             | The total number of results within all pages.    | None    |
| next\_page           | string \| null     | The API URL to the next page, if one exists.     | None    |
| prev\_page           | string \| null     | The API URL to the previous page, if one exists. | None    |

You can fetch a specific paginated set of pages using the [`page`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-parameters) and [`pageSize`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-parameters) options:

**Next.js example:**

```ts
import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();
  const blogPosts = await client.getByType("blog_post", {
    page: 2,
    pageSize: 10,
  });
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const prismic = usePrismic();
const { data: blogPosts } = await useAsyncData("about-us", () =>
  prismic.client.getByType("blog_post", {
    page: 2,
    pageSize: 10,
  }),
);
</script>
```

**SvelteKit example:**

```ts
import { createClient } from "$lib/prismicio";

export async function load({ fetch, cookies }) {
  const client = createClient({ fetch, cookies });
  const blogPosts = await client.getByType("blog_post", {
    page: 2,
    pageSize: 10,
  });
}
```

These methods are useful when you only need to display some pages, like showing 10 blog posts at a time.

## `getAll` methods

These methods return all matching pages in a single array. The client may make multiple network requests to fetch all matching pages.

* [`getAllByIDs()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbyids)
* [`getAllByUIDs()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbyuids)
* [`getAllByType()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbytype)
* [`getAllByTag()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbytag)
* [`getAllByEveryTag()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbyeverytag)
* [`getAllBySomeTags()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#getallbysometags)

These methods are useful when needing a complete list of pages, like when statically building your website. If you do not need all matching pages at once, use the [paginated `get` methods](#get-methods-paginated) instead for better performance.

# Sort

Use the [`orderings`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-parameters) option to sort results. It accepts an array of objects, in order of priority, each containing a field name and its sorting direction.

This example fetches all blog posts sorted by the `published_on` field in descending order, using the `first_publication_date` metadata as a fallback.

**Next.js example:**

```ts
import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();
  const blogPosts = await client.getAllByType("blog_post", {
    orderings: [
      { field: "my.blog_post.published_on", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  });
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const prismic = usePrismic();
const { data: blogPosts } = await useAsyncData("about-us", () =>
  prismic.client.getAllByType("blog_post", {
    orderings: [
      { field: "my.blog_post.published_on", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  }),
);
</script>
```

**SvelteKit example:**

```ts
import { createClient } from "$lib/prismicio";

export async function load({ fetch, cookies }) {
  const client = createClient({ fetch, cookies });
  const blogPosts = await client.getAllByType("blog_post", {
    orderings: [
      { field: "my.blog_post.published_on", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  });
}
```

The `field` property must be in one of the following formats:

* `"my.[page-type].[field]"`
* `"document.[metadata]"`

The `direction` property can be one of the following:

* `"asc"` (default)
* `"desc"`

[Learn more about the `orderings` option](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-parameters)

# Filter

Use the [`filters`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-parameters) option to filter results. It accepts an array of filters constructed using the client's [`filter`](https://prismic.io/docs/technical-reference/prismicio-client/v7#query-filters) helpers.

This example fetches all blog posts published after `2028-03-07`.

**Next.js example:**

```ts
import { filter } from "@prismicio/client";
import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();
  const blogPosts = await client.getAllByType("blog_post", {
    filters: [filter.dateAfter("my.blog_post.published_on", "2028-03-07")],
  });
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const prismic = usePrismic();
const { data: blogPosts } = await useAsyncData("about-us", () =>
  prismic.client.getAllByType("blog_post", {
    filters: [
      prismic.filter.dateAfter("my.blog_post.published_on", "2028-03-07"),
    ],
  }),
);
</script>
```

**SvelteKit example:**

```ts
import { filter } from "@prismicio/client";
import { createClient } from "$lib/prismicio";

export async function load({ fetch, cookies }) {
  const client = createClient({ fetch, cookies });
  const blogPosts = await client.getAllByType("blog_post", {
    filters: [filter.dateAfter("my.blog_post.published_on", "2028-03-07")],
  });
}
```

The client's collection of `filter` helpers works with text, dates, numbers, and more.

[See the full list of filters](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#query-filters)

# Errors

Query methods may throw the following errors:

* `NotFoundError`: A matching page was not found.
* `ForbiddenError`: An incorrect [access token](#content-visibility) was provided.
* `ParsingError`: The [`filters`](#filter) option contains invalid syntax.
* `PreviewTokenExpiredError`: The [preview token](#previews) expired.
* `RefExpiredError`: The client is using an expired content version.
* `RefNotFoundError`: The client is using an invalid content version.
* `RepositoryNotFoundError`: The Prismic repository does not exist.
* `PrismicError`: A generic error thrown when something unexpected is returned.

You can detect these errors using [`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof). This example shows how to handle a `NotFoundError`:

**Next.js example:**

```ts
import { notFound } from "next/navigation";
import { NotFoundError } from "@prismicio/client";
import { createClient } from "@/prismicio";

export default async function Page() {
  const client = createClient();
  const page = await client.getByUID("page", "about-us").catch(handleError);
}

function handleError(error: unknown) {
  if (error instanceof NotFoundError) notFound();
  throw error;
}
```

**Nuxt example:**

```vue
<script setup lang="ts">
const prismic = usePrismic();
const { data: page, error } = await useAsyncData("about-us", () =>
  prismic.client.getByUID("page", "about-us"),
);

if (error.value instanceof prismic.NotFoundError)
  throw createError({ statusCode: 404 });
</script>
```

**SvelteKit example:**

```ts
import { error } from "@sveltejs/kit";
import { NotFoundError } from "@prismicio/client";
import { createClient } from "$lib/prismicio";

export async function load({ fetch, cookies }) {
  const client = createClient({ fetch, cookies });
  const page = await client.getByUID("page", "about-us").catch(handleError);
}

function handleError(error: unknown) {
  if (error instanceof NotFoundError) error(404);
  throw error;
}
```

# Previews

Draft content can be fetched during a [full-website preview](https://prismic.io/docs/previews.md#full-website-previews), allowing writers to review content before publishing.

`@prismicio/client` supports fetching draft content using the following methods:

* **[`resolvePreviewURL()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#resolvepreviewurl)**: Returns a page's URL based on a preview session's ref and page ID. This is necessary to redirect to a previewed page's URL.
* **[`queryContentFromRef()`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#resolvepreviewurl)**: Configures the client to fetch content from a specific ref. This is necessary to fetch content from the preview ref.

Each framework has a specific setup needed to support previews. With the setup, previews work automatically, seamlessly switching between performant published content and private draft content.

> Learn how to set up previews in the [Next.js](https://prismic.io/docs/nextjs.md#preview-draft-content), [Nuxt](https://prismic.io/docs/nuxt.md#preview-draft-content), or [SvelteKit](https://prismic.io/docs/sveltekit.md#preview-draft-content) guide.

# API limits

The Content API's limits are based on your Prismic repository's plan.

| Plan           | API Calls                                                    | Bandwidth                                |
| -------------- | ------------------------------------------------------------ | ---------------------------------------- |
| **Free**       | 4 million calls/month                                        | 100 GB<br />(no overages)                |
| **Starter**    | 4 million calls/month                                        | 100 GB<br />(paid overages up to 500 GB) |
| **Small**      | 4 million calls/month                                        | 100 GB<br />(paid overages up to 500 GB) |
| **Medium**     | 5 million calls/month                                        | 500 GB<br />(paid overages up to 1 TB)   |
| **Platinum**   | 10 million calls/month<br />(paid overages up to 20 million) | 1TB<br />(paid overages up to 5 TB)      |
| **Enterprise** | Custom                                                       | Custom                                   |

> See the [Pricing](https://prismic.io/pricing) page for the most up-to-date limits

You can see current and past API usage by navigating to your repository's **Settings** > **Usage Dashboard**.

## Rate limits

The API has a protective rate limit of 200 non-cached requests per second per repository to ensure consistent performance for all users.

The client automatically retries requests that have been blocked by the rate limit.

# API Explorer

The [API Explorer](https://prismic.io/explorer) is an in-browser app for building and running client queries.

It's useful for inspecting your repository's content, testing [queries](#query-methods), and learning how different [filters](#filter) and parameters behave.

There are two ways to access the API Explorer:

* **From your repository**: Visit the **Settings** > **API & Security** page and click **API Explorer**
* **From prismic.io**: Visit [https://prismic.io/explorer](https://prismic.io/explorer)

Visiting the API Explorer from your repository provides better parameter suggestions, such as inferring content model and field types when building filters.

# HTTP API reference

A low-level HTTP API reference for the Content API is provided to help debug and provide insight into the client's implementation.

> **Important**
>
> We do not recommend using the HTTP API directly. Instead, we recommend using [`@prismicio/client`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md) since it simplifies low-level API behaviors.

[See the Content API reference](https://prismic.io/docs/content-api.md)