Loading Prismic Content

Learn how to load and transform Prismic content in your Front-Commerce application using the Prismic loader and transformers.

Overview

The Prismic module provides a powerful loader and transformers to expose Prismic content in your Front-Commerce GraphQL API. This guide will show you how to:

1. Load different types of content from Prismic
2. Transform Prismic fields into usable formats
3. Expose the content through your GraphQL API

Prerequisites

• Install the Prismic module
• Create a GraphQL module
• Understand Prismic Core Concepts

Loading Content

The Prismic loader provides several methods to load content:

Single Type Documents

For Single Type documents:

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  resolvers: {
    Query: {
      homepage: async (_, __, { loaders }) => {
        return loaders.Prismic.loadSingle("homepage");
      },
    },
  },
});

Documents by UID

For documents with a UID field:

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  resolvers: {
    Query: {
      article: async (_, { slug }, { loaders }) => {
        return loaders.Prismic.loadByUID("article", slug);
      },
    },
  },
});

Lists of Documents

To load multiple documents with filtering and pagination:

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  resolvers: {
    Query: {
      articles: async (_, { page, search }, { loaders }) => {
        const ListQuery = loaders.Prismic.queries.ListQuery;
        const query = new ListQuery(10, page || 1);

        query.type("article").sortBy("document.last_publication_date", "desc");

        if (search) {
          query.search(search);
        }

        return loaders.Prismic.loadList(query);
      },
    },
  },
});

Transforming Fields

Prismic fields often need transformation before they can be used effectively. The module provides several transformers:

Basic Field Transformers

my-extension/index.ts

import { createGraphQLModule } from "@front-commerce/core/graphql";

export default createGraphQLModule({
  namespace: "MyModule",
  dependencies: ["Prismic/Core", "Front-Commerce/Wysiwyg"],
  typeDefs: /* GraphQL */ `
    type Article {
      title: String
      content: DefaultWysiwyg
      image: String
      imageAlt: String
      lastUpdate: String
    }

    extend type Query {
      article(slug: String!): Article
    }
  `,
  loadRuntime: () => import("./runtime"),
});

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  contextEnhancer: ({ loaders }) => {
    const {
      TitleTransformer,
      RichtextToWysiwygTransformer,
      ImageTransformer,
      DateTransformer,
    } = loaders.Prismic.transformers;

    loaders.Prismic.defineContentTransformers("article", {
      fieldTransformers: {
        title: new TitleTransformer(),
        content: new RichtextToWysiwygTransformer(loaders.Wysiwyg),
        image: new ImageTransformer(),
        lastUpdate: new DateTransformer(),
      },
    });

    return {};
  },
  resolvers: {
    Query: {
      article: async (_, { slug }, { loaders }) => {
        return loaders.Prismic.loadByUID("article", slug);
      },
    },
    Article: {
      imageAlt: (article) => article.image.main.alt,
    },
  },
});

Link Transformation

The LinkTransformer can rewrite Prismic links to work with your Front-Commerce routes:

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  contextEnhancer: ({ loaders }) => {
    const linkTransformer = new LinkTransformer([
      "localhost",
      "staging.example.com",
      "production.example.com",
    ]);

    loaders.Prismic.defineContentTransformers("article", {
      fieldTransformers: {
        content: new RichtextToWysiwygTransformer(
          loaders.Wysiwyg,
          linkTransformer
        ),
        link: linkTransformer,
      },
    });

    return {};
  },
});

Error Handling

Always handle potential errors when loading content:

my-extension/runtime.ts

import { createGraphQLRuntime } from "@front-commerce/core/graphql";

export default createGraphQLRuntime({
  resolvers: {
    Query: {
      article: async (_, { slug }, { loaders }) => {
        try {
          return await loaders.Prismic.loadByUID("article", slug);
        } catch (error) {
          console.error(`Failed to load article ${slug}:`, error);
          return null;
        }
      },
    },
  },
});

See Also

• API Reference for detailed API documentation
• Adding Integration Fields for connecting external data
• Adding Content Slices for dynamic content blocks
• Using Prismic Preview for content previews