New @prismicio/next^2 lost next caching config?

Developing with Prismic
1

Describe your question/issue in detail

When we uppdated to @prismicio/next^2 where the CreateClientConfig is deprecated and we have to use prismic.ClientConfig we lost the ability to set next caching and revalidating logic?

Previously (and its even in the docs) there was an option in the config.

I havent found any mention of it anywhere. Is there some other way to set it up?

2

The new updated @prismicio/next overrides the client lib's fetch options type:

declare module "@prismicio/client" {
    interface RequestInitLike {
        next?: RequestInit["next"];
    }
}

so if you just import '@prismicio/next'; where u create the client, you can still use the next fetch options.

3

Hi @matyas.zednicek, thanks for including the solution. :slight_smile:

We recommend using @prismicio/next's enableAutoPreviews when creating a client, which should add the next property like you suggested.

Here is a reference: nextjs-starter-prismic-minimal/src/prismicio.ts at eb3d45e9b34bdbbe8468e52af7e4bcba859fe8ee · prismicio-community/nextjs-starter-prismic-minimal · GitHub

import {
  createClient as baseCreateClient,
  ClientConfig,
  Route,
} from "@prismicio/client";
import { enableAutoPreviews } from "@prismicio/next";
import sm from "../slicemachine.config.json";

/**
 * The project's Prismic repository name.
 */
export const repositoryName =
  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || sm.repositoryName;

/**
 * The project's Prismic route resolvers. This list determines a Prismic document's URL.
 */
const routes: Route[] = [
  { type: "page", uid: "home", path: "/" },
  { type: "page", path: "/:uid" },
];

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config - Configuration for the Prismic client.
 */
export function createClient(config: ClientConfig = {}) {
  const client = baseCreateClient(sm.apiEndpoint || repositoryName, {
    routes,
    fetchOptions:
      process.env.NODE_ENV === "production"
        ? { next: { tags: ["prismic"] }, cache: "force-cache" }
        : { next: { revalidate: 5 } },
    ...config,
  });

  enableAutoPreviews({ client });

  return client;
}
1 Like