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 Svelte application.

Before you proceed

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

Client-side fetching (without SvelteKit)

For client-side fetching, call a Prismic query helper and assign the returned promise directly to a variable (do not wait for the promise to resolve). Then, use Svelte's built-in {#await} block to resolve the promise.

Here's what a basic query looks like:

App.svelte

Copy

<script>
  import createClient from './../prismicio' // Update the path
  import { PrismicRichText } from '@prismicio/svelte'
  import * as prismic from '@prismicio/client'
  
  const client = createClient()
  const prismicQuery = client.getFirst()
</script>

<h1>Prismic Svelte App</h1>

{#await prismicQuery}
  <p>Loading...</p>
{:then document}
  <PrismicRichText field={document.data.example_title} />
  <PrismicRichText field={document.data.example_description} />
{:catch error}
  <p>Something went wrong:</p>
  <pre>{error.message}</pre>
{/await}

Server-side fetching (with SvelteKit)

In SvelteKit, each page can get data from a +page.server.js module. To use data from the Prismic API, we will query the data in +page.server.js, and SvelteKit will pass the data to +page.svelte.

Create the following files:

src/routes/+page.server.js
src/routes/+page.svelte
src/routes/[uid]/+page.server.js
src/routes/[uid]/+page.svelte

The root route will serve as the homepage and the [uid] route will query a document dynamically based on the URL.

In the +page.server.js modules, import createClient(), create an instance of the Prismic client, perform a query, and return the response:

Homepage
UID Page

Homepage

src/routes/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const homepageUID = 'homepage'  // Update for the UID of your homepage
  const client = createClient({ fetch, request })
  const document = await client.getByUID('page', homepageUID)

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}

UID Page

src/routes/[uid]/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, params, request }) {
  const { uid } = params
  const client = createClient({ fetch, request })
  const document = await client.getByUID('page', uid)

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}

The document object will be available in the corresponding Svelte file's data prop.

src/routes/+page.svelte

Copy

<script>
  export let data;
</script>

<pre>{JSON.stringify(data.document, null, 2)}</pre>

Query helpers

Here are the most commonly-used query helper methods:

`getByUID()`

Copy

getByUID(type, uid)
getByUID(type, uid, params)

Queries a document from the Prismic repository with a UID and custom type. type refers to the API ID of the custom type.

Copy

const document = await client.getByUID('post', 'my-first-post')

`getSingle()`

Copy

getSingle(type)
getSingle(type, params)

Queries a singleton document from the Prismic repository for a specific custom type. type refers to the API ID of the custom type.

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

Copy

const document = await client.getSingle('homepage')

`getAllByType()`

Copy

getAllByType(type)
getAllByType(type, params)

Queries all documents from the Prismic repository for a specific custom type. type refers to the API ID of the custom type. This method may perform multiple network requests. It returns an array containing all matching documents from the repository.

Copy

const documents = await client.getAllByType('article')

Further Learning

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

Example queries

Here are a few common use cases in SvelteKit.

Nav menu

In Prismic, you can create a singleton custom type to store site components, like a header, footer, nav menu, or SEO configuration.

To query a singleton, use the getSingle() method with the API ID of the singleton custom type.

src/routes/+layout.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const client = createClient({ fetch, request })
  const menu = await client.getSingle('menu')

  if (menu) {
    return { menu }
  }

  error(404, 'Not found')
}

One instance of a repeatable document

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, you can use the getByUID() method. To use getByUID(), pass the UID and the API ID of the custom type.

src/routes/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const homepageUID = 'homepage'  // Update for the UID of your homepage
  const client = createClient({ fetch, request })
  const document = await client.getByUID('page', homepageUID)

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}

You will likely use getByUID() with a page's URL path to generate a page based on the URL. For instance, at /hello-world, you would want to display the document with the UID hello-world. Rather than hard-coding every page by its UID, in SvelteKit you can use dynamic URL parameters by putting the Svelte component's name in square brackets: src/routes/[uid]/+page.server.js. Then you can access the params and perform a query with it:

src/routes/[uid]/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, params, request }) {
  const { uid } = params
  const client = createClient({ fetch, request })
  const document = await client.getByUID('page', uid)

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}

This will return a document dynamically, based on the URL, so you can template a repeatable document.

All documents

There are three ways to get all documents.

You can query all documents of a certain type with getAllByType() (recommended).
You can query a paginated list of all documents from your repository, regardless of type, using get(). This will return a paginated response, including the first 100 documents.
To query an unpaginated list of all documents regardless of type, use dangerouslyGetAll(). Since the payload can be large, this method can cause performance issues, and it is not recommended.

src/routes/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const client = createClient({ fetch, request })
  const documents = await client.getAllByType('page')

  if (documents) {
    return { documents }
  }

  error(404, 'Not found')
}

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

src/routes/+page.server.js

Copy

import { error } from '@sveltejs/kit'

import createClient from '$lib/prismicio'

export async function load({ fetch, request }) {
  const client = createClient({ fetch, request })
  const homepageUID = 'homepage'
  const params = {
    lang: 'fr-fr',
  }
  const document = await client.getByUID('page', homepageUID, params)

  if (document) {
    return { document }
  }

  error(404, 'Not found')
}

← Previous

Install Prismic

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.

Fetch Data

This technology has no Slice Machine integration

Before you proceed

Client-side fetching (without SvelteKit)

Server-side fetching (with SvelteKit)

Query helpers

getByUID()

getSingle()

getAllByType()

Further Learning

Example queries

Nav menu

One instance of a repeatable document

All documents

By language

← Previous

Next →

`getByUID()`

`getSingle()`

`getAllByType()`