Version: 3.x

Using Resolver Cache

Learn how to improve your application's performance by caching Prismic content at the resolver level.

The PrismicCachedResolver is a powerful tool that helps you cache Prismic content at the resolver level. It automatically handles cache invalidation based on document references and supports different caching strategies.

Prerequisites

Before implementing resolver caching, ensure you have:

A Front-Commerce application with the Prismic module installed
GraphQL resolvers that return Prismic content

Implementation Guide

Create a GraphQL Module

First, create a GraphQL module that will contain your cached resolvers:

my-extension/graphql/index.ts
import { createGraphQLModule } from "@front-commerce/core/graphql";

export default createGraphQLModule({
  namespace: "MyPrismicModule",
  typeDefs: /* GraphQL */ `
    extend type Query {
      cachedPage(uid: String!): Page
      cachedPages: [Page!]!
      paginatedPages(page: Int!): PageConnection!
    }

    type PageConnection {
      items: [Page!]!
      totalCount: Int!
      pageInfo: PageInfo!
    }

    type PageInfo {
      currentPage: Int!
    }
  `,
  loadRuntime: () => import("./runtime"),
});

Implement the Runtime with Cached Resolvers

Create a runtime file to implement your resolvers with caching:

my-extension/graphql/runtime.ts
import { createGraphQLRuntime } from "@front-commerce/core/graphql";
import {
  PrismicCachedResolver,
  NullContent,
} from "@front-commerce/prismic/graphql";

export default createGraphQLRuntime({
  resolvers: {
    Query: {
      // Single document cache example
      cachedPage: PrismicCachedResolver(
        async (_, { uid }, { loaders }) => {
          return loaders.Prismic.loadByUID("page", uid);
        },
        {
          mapParamsToId: (_, { uid }) => uid,
        }
      ),

      // List cache example
      cachedPages: PrismicCachedResolver(async (_, __, { loaders }) => {
        const query = new loaders.Prismic.queries.ListQuery(10, 1)
          .type("page")
          .sortBy("document.first_publication_date", "desc");

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

      // Nested content cache example
      paginatedPages: PrismicCachedResolver(
        async (_, { page }, { loaders }) => {
          const query = new loaders.Prismic.queries.ListQuery(10, page)
            .type("page")
            .sortBy("document.first_publication_date", "desc");

          const results = await loaders.Prismic.loadList(query);

          return {
            items: results,
            totalCount: results.length,
            pageInfo: { currentPage: page },
          };
        },
        {
          contentProperty: "items",
        }
      ),
    },
  },
});

Register the Module in Your Extension

Add the GraphQL module to your extension:

my-extension/index.ts
import { defineExtension } from "@front-commerce/core";
import prismicModule from "./graphql";

export default function myExtension() {
  return defineExtension({
    name: "my-prismic-extension",
    meta: import.meta,
    graphql: {
      modules: [prismicModule],
    },
  });
}

Cache Invalidation

The cache is automatically invalidated when:

The referenced Prismic documents are updated
The cache TTL expires (default: 5000ms)

For more details about the cache configuration and API, see the API Reference.

Prerequisites​

Implementation Guide​

Cache Invalidation​

Prerequisites

Implementation Guide

Cache Invalidation