Next.js应用路由器+ Sanity revalidateTag()问题

gstyhher  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(101)

我试图让下一个应用程序路由器+ revalidateTag()与健全的工作,但它要么是完全不可预测的,或者我完全误解了一些东西。
我现在花了整整5天的时间试图让它工作,并建立多个项目。
项目1:这是最基本的,简单的设置(帖子,页面,类别,[slug]动态页面)。我认为这是工作。https://github.com/thedevdavid/sanity-revalidate-debug
项目二:几乎相同的设置(posts,pages,categories,[slug]动态页面+带有额外标签的子页面)。在这里,简单的tags:[job]或tags:[benefit]请求在/和/post-a-job路由上从未被重新验证。但是在(例如)/contract/[slug]路由中。而复杂的tags,如[job:${params.slug}]或[page:${params.slug}]都运行良好。
项目3和4:与项目2非常相似。帖子、页面和类别有额外的模式类型,如团队成员、导航链接、推荐信等。在这里我甚至不能说出确切的问题。可能与项目2相似,但我不再确定了。
虽然有一件事我知道这是额外的。有一个网页类型与获取标签,主页。这种类型有导航链接。有一个获取标签与主页上(网站)/页面.tsx和2个组件(导航栏和页脚)。这两个组件都是从(site)/layout. tsx渲染的。从组件中获取的数据会重新验证,我可以在所有页面上看到新数据,除了/ route,也就是.(site)/page. tsx。该路由永远不会被重新验证。尽管页面和里面的2个组件都有标记请求。
在所有4个项目中,Sanity webhook调用revalidate API路由。该函数总是成功。参数是它们应该是什么,所以我猜revalidateTag()被正确的参数调用。(尽管我还没有弄清楚如何调试实际的函数调用)
所以我觉得完全失去了,我甚至还没有尝试包括预览和草案模式。
我不确定这是不是Sanity、Next.js的bug,或者只是我做错了什么。

附加上下文

示例fetch调用(无法重新验证,on / route):

const jobs = await sanityFetch<Job[]>({
    query: jobsQuery,
    tags: [`job`],
  });

字符串
示例fetch调用(重新验证. /[slug]路由):

const page = await sanityFetch<Page>({
    query: pagesBySlugQuery,
    params: { slug: params.slug },
    tags: [`page:${params.slug}`],
  });


sanityFetch函数:

export async function sanityFetch<QueryResponse>({
  query,
  params = DEFAULT_PARAMS,
  tags = DEFAULT_TAGS,
}: {
  query: string;
  params?: QueryParams;
  tags: string[];
}): Promise<QueryResponse> {
  return client.fetch<QueryResponse>(query, params, {
    // We only cache if there's a revalidation webhook setup
    cache: revalidateSecret ? "force-cache" : "no-store",
    next: {
      //revalidate: 30, // for simple, time-based revalidation
      tags, // for tag-based revalidation
    },
  });
}


重新验证路由处理程序:

import { revalidateTag } from "next/cache";
import { NextResponse, type NextRequest } from "next/server";
import { parseBody } from "next-sanity/webhook";

import { revalidateSecret } from "@/lib/sanity.api";

export async function POST(req: NextRequest) {
  try {
    const { body, isValidSignature } = await parseBody<{
      _type: string;
      slug?: string | undefined;
    }>(req, revalidateSecret);
    if (!isValidSignature) {
      const message = "Invalid signature";
      return new Response(message, { status: 401 });
    }

    if (!body?._type) {
      return new Response("Bad Request", { status: 400 });
    }

    revalidateTag(body._type);
    if (body.slug) {
      revalidateTag(`${body._type}:${body.slug}`);
    }
    return NextResponse.json({
      status: 200,
      revalidated: true,
      now: Date.now(),
      body,
    });
  } catch (err: any) {
    console.error(err);
    return new Response(err.message, { status: 500 });
  }
}

z9gpfhce

z9gpfhce1#

我有几乎相同的设置和类似的问题,但相反的方式,我的动态页面从来没有重新验证,但我的主页工作正常。在一个时刻,我发现了这样的解决方案:
x1c 0d1x的数据
但是在构建应用程序后,它把我的整个应用程序搞砸了。我所有的动态路由都重定向到404,直到我删除了revalidateTag("page")行。
现在我的页面根本没有重新验证,再一次!我完全被困在这一刻。
你可以试试revalidateTag("your tag"),也许它可以解决你的问题。

相关问题