Fetch Data

Recommended data-fetching method

SvelteKit has many different ways to fetch data. Prismic works with all data-fetching methods, but we recommend loading data on the server and prerendering for the best website performance.

Use a +page.server.js file with prerendering in each route:

import type { PageServerLoad } from "./$types";

export const prerender = true;

export const load: PageServerLoad = async () => {
  // Fetch and return data here
};

Perform a query

Queries are performed using a client created by the createClient() function exported from prismicio.js.

The query runs in a +page.server.js file. SvelteKit passes the page content to the corresponding +page.svelte file, where it’s accessible in the data prop.

Here’s a complete example of querying a page by its UID from a page component located in the src/lib/[uid]/ directory:

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

export const prerender = true;

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const client = createClient();

  const page = await client.getByUID("page", params.uid);

  return {
    page,
  };
}

Query helpers

Here are the most commonly-used query helper methods:

getByUID()

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.

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

getSingle()

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.

const document = await client.getSingle("homepage");

getAllByType()

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.

const documents = await client.getAllByType("article");

Use cases

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.

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.

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:

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.

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

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");
}