Prismic content changes only when I re-generate the API key

Developing with Prismic
,
1

I have a next.js project, using custom type API key (not using slice machine).
I set up the API key from Write APIs Tab like this:

image
image1363Ă—455 24.2 KB

I use this API in here:

image
image978Ă—443 71.3 KB

And I have the 2nd API from Content API Tab:

image
image1256Ă—855 75.9 KB

I use this API in here:

image
image832Ă—347 58.1 KB

But the content from API changes only when I re-generate the permanent API key (2nd one). Did I do st wrong?
Please help me..

2

Hey @KAn , I'm sorry you're having trouble with the APIs. Could you tell me a bit more about your situation? I don't understand what you're trying to accomplish and what is happening.

Do you mean that the content from the API gets stuck and when you publish new content it's still fetching the old content?
Or is it that you're trying to update your custom types with the Custom types API but you're not seeing those changes take effect?
Considering you're not using slice machine, knowing more about your setup would help us help you better :)

3

Hi @KAn ,

The likelihood here is that you're caching the master ref rather than any token you have to configure.

Please make sure you're not caching anything Prismc related and if you're deploying on Vercel please refer to this thread:

Thanks.

4

"Do you mean that the content from the API gets stuck and when you publish new content it's still fetching the old content?"

Yes, this is my situation. And the new content shows up only when I create a new API key, which is inconvenient

5

How do I make sure this?
All I want to do is connecting the data from Prismic so that whenever I change the content in Prismic, the data in my code changes accordingly.
Did I set up wrong?

7

Hi @KAn, if you are using Next.js' App Router, it sounds like you need a change to your fetch() caching configuration.

We recommend configuring fetch() caching like this: Fetch Data in Next.js - Documentation - Prismic

// prismicio.js

import * as prismic from '@prismicio/client'
import * as prismicNext from '@prismicio/next'

export const createClient = (config = {}) => {
  const client = prismic.createClient(repositoryName, {
    routes,
   fetchOptions:
     process.env.NODE_ENV === 'production'
       ? { next: { tags: ['prismic'] }, cache: 'force-cache' }
       : { next: { revalidate: 5 } },
      ...config,
  });

  prismicNext.enableAutoPreviews({ client })

  return client
}

You will also need a way to revalidate all Prismic requests when content changes. Here is an excerpt from an upcoming update to our documentation:

Add a webhook to clear the Next.js fetch() cache when your content changes in Prismic. Follow the Create a webhook instructions in our webhooks documentation using these values:

  • Name: Next.js on-demand revalidation
  • URL: Your app’s deployed URL + /api/revalidate (example: https://example.com/api/revalidate)
  • Triggers: Only check “A document is published” and “A document is unpublished”

You do not need to set up a webhook with your hosting provider.

Apps bootstrapped using a Prismic starter or @slicemachine/init include the following /api/revalidate Route Handler.

// app/api/revalidate/route.ts

import { NextResponse } from "next/server";
import { revalidateTag } from "next/cache";

export async function POST() {
  revalidateTag("prismic");

  return NextResponse.json({ revalidated: true, now: Date.now() });
}
1 Like