Sanity Webhooks and On-demand Revalidation in Nextjs

[giscus[bot]]

Sanity Webhooks and On-demand Revalidation in Nextjs

Learn how to set up and trigger content updates in your Sanity Headless CMS site built in Nextjs using on-demand revalidation and GROQ-powered webhooks for delivering fast and non-cached content updates

https://victoreke.com/blog/sanity-webhooks-and-on-demand-revalidation-in-nextjs

[christianonoh]

Thanks for sharing this! 🙌 I have a question.

Does revalidating the tag purge all caches related to that tag? For instance, if I have getProjects and getProject functions fetching all projects and a single project, and I add "project" as a tag in both functions, will it invalidate both caches?

I'm facing an issue where the projects page isn't updating, whereas the project page updates immediately. Any insights?

[Evavic44]

Hey Christian.
Yes. Revalidating the cache associated with the "project" tag will apply to both datasets.

I'm facing an issue where the projects page isn't updating,

Like not updating at all even after opening the page in a new tab or taking a longer time to update.
If the former is what you're experiencing, there may be some kind of issue with how you're implementing the sanityFetch function and I'll ask that you share more details. Whereas, if it's an update delay, there are several factors that may cause this like;

• Cache size (It may take longer to revalidate a collection of data).
• Single datasets are easier to invalidate because it has a smaller dataset and it's specific to invalidate.

[christianonoh]

It doesn't update at all unless I rebuild.
It might be important to also note that I'm trying this on the preview dev branch, so I set the preview link then appended /api/revalidate as the url in the webhook I set up.

Let me provide more context:

// Sanity fetch function

const DEFAULT_PARAMS = {} as QueryParams;
const DEFAULT_TAGS = [] as string[];

export const sanityFetch = async <QueryResponse>({
  query,
  params = DEFAULT_PARAMS,
  tags = DEFAULT_TAGS,
}: {
  query: string;
  params?: QueryParams;
  tags: string[];
}): Promise<QueryResponse> => {
  return client.fetch<QueryResponse>(query, params, {
    cache: process.env.NODE_ENV === "development" ? "no-store" : "force-cache",
    next: { tags },
  });
};

// Get all projects

export const getProjects = () => {
  return sanityFetch<ProjectType[] | null>({
    query: projectsGroq,
    tags: ["project"],
  });
};

// Projects page.tsx

const Project = async () => {
  const projects = await getProjects();
return (...component)
}

[Evavic44]

Yeah. This setup won't work. sanityFetch has to be marked explicitly with await inside the Projects component. Reference

Essentially:

// project/page.tsx
const Project = async () => { 
 const projects: ProjectType[] | null = await sanityFetch({
    query: projectsGroq,
    tags: ["project"],
  });
 return { ...component }
}

[christianonoh]

I followed your suggested approach, and it seems to be working now. However, I have noticed that the setup behaves somewhat unpredictably. It works on some occasions but doesn't when it decides not to – almost like it has a mind of its own lol. Thank you for helping 🙌

[josephmgift]

I have a question, how do you present the code in your Portabletext, I am trying to display it but it's not appearing on the front-end.

import Image from "next/image";
import Link from "next/link";
import urlFor from "@/sanity/lib/urlFor";
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

// Modified Code component to include syntax highlighting
const Code = ({ children, className }: any) => {
  return (
    <pre className={className}>
      <SyntaxHighlighter language="javascript" style={docco}>
        {children}
      </SyntaxHighlighter>
    </pre>
  );
};

export const RichTextComponents = {
  types: {
    code: Code,

    image: ({ value }: any) => {
      return (
        <div className="relative min-h-[16rem] md:h-96 w-full my-5 mx-auto">
          <Image src={urlFor(value).url()} alt="Blog post image." fill className="object-cover lg:object-center rounded-sm md:rounded-md" />
        </div>
      );
    },

    list: {
      // Ex. 1: customizing common list types
      bullet: ({ children }: any) => <ul className="list-disc text-lg space-y-4 mb-2 ml-5">{children}</ul>,
      number: ({ children }: any) => <ol className="mt-lg">{children}</ol>,

      // Ex. 2: rendering custom lists
      checkmarks: ({ children }: any) => <ol className="m-auto text-lg">{children}</ol>,
    },

    block: {
      h1: ({ children }: any) => (
        <h1 className="text-5xl py-10 font-bold">{children}</h1>
      ),
      h2: ({ children }: any) => (
        <h2 className="text-4xl py-2 font-bold text-white">{children}</h2>
      ),
      h3: ({ children }: any) => (
        <h3 className="text-3xl py-2 font-bold text-white">{children}</h3>
      ),
      h4: ({ children }: any) => (
        <h4 className="text-2xl py-2 font-bold text-white">{children}</h4>
      ),
      h5: ({ children }: any) => (
        <h5 className="text-xl py-2 font-bold text-white">{children}</h5>
      ),
      h6: ({ children }: any) => (
        <h6 className="text-lg py-2 font-bold text-white">{children}</h6>
      ),

      normal: ({ children }: any) => <p className="text-base py-2">{children}</p>,

      blockquote: ({ children }: any) => (
        <blockquote className=" border-l-blue-600 text-xl border-l-4 pl-5 py-5 my-5">
          {children}
        </blockquote>
      ),
    },

    marks: {
      link: ({ children, value }: any) => {
        const rel = !value.href.startsWith("/")
          ? "noreferrer noopener"
          : undefined;
        return (
          <Link
            href={value.href}
            rel={rel}
            className="underline decoration-blue-600 hover:decoration-blackF"
          >
            {children}
          </Link>
        );
      },
    },
  },
};

[Evavic44]

Check out my CodeBlock component to see how I did it.

I used Refractor for syntax highlighting, it uses Prism under the hood which provides a lot of themes you can choose from. I customized my own theme with CSS. You can find the styles in the prism.css file

[josephmgift]

Thank you so much Victor, it actually worked.

[josephmgift]

Thank you so much. Let me have a look.

…

On Mon, 25 Mar 2024 at 18:21, Victor Eke ***@***.***> wrote: Check out my CodeBlock <https://github.com/Evavic44/victoreke.com/blob/main/app/components/shared/CodeBlock.tsx> component to see how I did it. I used Refractor <https://www.npmjs.com/package/react-refractor> for syntax highlighting, it uses Prism under the hood which provides a lot of themes <https://github.com/PrismJS/prism/tree/master/themes> you can choose from. I customized my own theme with CSS. You can find the styles in the prism.css <https://github.com/Evavic44/victoreke.com/blob/main/app/styles/prism.css> file — Reply to this email directly, view it on GitHub <#75 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AX7A5BL2HKFXYTFFRWBRGRTY2A6IJAVCNFSM6AAAAABAZXLIXKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DSMBUGE2TC> . You are receiving this because you commented.Message ID: ***@***.***>

[curtiswallen]

Hello! Thank you so much for this write up. It saved me a lot of banging my head against the wall. :-)

However...

Everything is working as expected and all content refreshes almost immediately, except on a nested dynamic route:
app/(site)/for-sale/[slug]/[id]

Content updates on the same document are reflected in the [slug] level route, but not in the [id] level route.

E.g., If a document is titled "A Jade Praying Mantis Pendant" and I change it in the sanity studio to "A Jade Praying Mantis Pendant EDITED" and publish. The new title shows up on the link at the [slug] level, but if I click through to view the item at the [id] level, it's still the old title. Even after multiple hard refreshes in the browser.

The sanityFetch requests on each page are as follows:

[slug]/page.js:

const project = await sanityFetch ({
    query: getProject,
    tags: ["projects"],
    qParams: { slug: params.slug }
});

[slug]/[id]/page.js:

const project = await sanityFetch ({
    query: getProject,
    tags: ["projects"],
    qParams: { slug: params.id }
});

I'm stumped on why it's revalidating properly on one route but not the other. Any ideas?

[Evavic44]

Hey @curtiswallen, I'm not exactly sure what the issue might be. I did a quick test and it seems to be working when the query is set to all projects, not single project.

[curtiswallen]

Hey @Evavic44 thank you! Very odd. I rewrote the fetch to get all projects and then mapped them and grabbed the right one for the page. Seems very inefficient to fetch everything rather than just the one document I need, but at least the content is updating now. Appreciate your help very much!!

[aleczratiu]

Hi @victorekea, how you identify if is an update / delete or a new publish?
By looking only to the slug, indeed you will get all the time that result whenever is altered but can be determined also the type of the action?

[Evavic44]

Hey @aleczratiu, I don't think there's a universal way of checking the action type. The only way I can think of would be to create individual webhooks for each action, that way you can set a unique webhook URL for each action type.

[tiluckdave]

Nice

[senecamanu]

Thank you so much for this!

[SarfDime]

Hello!

Great tutorial, i have gotten it to work on one of my apps. But i have a problem when using a catchall route, has someone got any ideas why this happens.

im using app/[...slug]/page.tsx structure for my pages, which fetch the page itself which is of type "page" and some other stuff for nested pages.

But when updating something the catchall routes become 404 routes, and i get 404 fetch errors when trying to access them in the console.