Next.js ISR 页面在 CMS 中删除后未删除

Posted 2023-03-30

技术标签:

【中文标题】Next.js ISR 页面在 CMS 中删除后未删除【英文标题】：Next.js ISR page not being deleted after deleting it in CMS 【发布时间】：2021-08-24 03:14:58 【问题描述】：

我正在尝试 Next.js 并构建一个小应用程序，该应用程序从安装了 GraphQL 的无头 WordPress 应用程序中获取帖子。然后我使用 Apollo/Client 来获取 GraphQL 内容：

apollo-client.js

import  ApolloClient, InMemoryCache  from "@apollo/client";

const client = new ApolloClient(
  uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
  cache: new InMemoryCache(),
);

export default client;

在索引中我抓取帖子：

index.js

import Head from "next/head";
import styles from "../styles/Home.module.css";

import  gql  from "@apollo/client";
import Link from "next/link";
import client from "../apollo-client";

function Home(props) 
  const  posts  = props;
  return (
    <div className=styles.container>
      <Head>
        <title>Wordpress blog posts</title>
        <meta
          name="description"
          content="Wordpress blog posts with Apollo Client"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className=styles.main>=
        <div className=styles.grid>
          posts.map((post) => (
            <a
              key=post.node.databaseId
              href=`/blog/$post.node.slug`
              className=styles.card
            >
              <h2>post.node.title</h2>
              <div dangerouslySetInnerhtml= __html: post.node.excerpt  />
            </a>
          ))
        </div>
      </main>
    </div>
  );


export async function getStaticProps() 
  const  data  = await client.query(
    query: gql`
      query Posts 
        posts 
          edges 
            node 
              title
              databaseId
              slug
              excerpt(format: RENDERED)
            
          
        
      
    `,
  );

  if (data.posts.edges === 0) 
    return  notFound: true ;
  

  return 
    props: 
      posts: data.posts.edges,
    ,
    revalidate: 10,
  ;


export default Home;

那么对于单个帖子页面：

/blog/[slug].js

import Link from "next/link";
import  gql  from "@apollo/client";
import client from "../../apollo-client";

export default function BlogPage(props) 
  const  post  = props;

  if (!post) 
    return <p>Loading...</p>;
  

  return (
    <div>
      <h1>post.title</h1>
      <div dangerouslySetInnerHTML= __html: post.content  />
      <Link href="/">
        <a>&larr; back to home</a>
      </Link>
    </div>
  );


export async function getStaticProps( params ) 
  const  slug  = params;
  const result = await client.query(
    query: gql`
      query GetWordPressPostBySlug($id: ID!) 
        post(id: $id, idType: SLUG) 
          title
          content
        
      
    `,
    variables:  id: slug ,
  );

  if (!result.data.post) 
    return  notFound: true ;
  

  return 
    props: 
      post: result.data.post,
    ,
    revalidate: 10,
  ;


export async function getStaticPaths() 
  const result = await client.query(
    query: gql`
      query GetWordPressPosts 
        posts 
          nodes 
            slug
          
        
      
    `,
  );

  return 
    paths: result.data.posts.nodes.map(( slug ) => 
      return 
        params:  slug ,
      ;
    ),
    fallback: true,
  ;

添加新帖子时它可以工作，一旦我删除它，它就不会被删除。这发生在 npm run dev 和 npm run build 然后 npm start

我可能在 ISR 和重新验证的工作方式上遇到了问题。或者我的代码中可能遗漏了什么？任何帮助将不胜感激。

-- 编辑--

与此同时，在 *** 和 Next.js github 存储库上还有几个线程，与我所经历的有关。相关页面：

Next.js does not delete dynamic page deleted in CMS

https://github.com/vercel/next.js/issues/25470

Next.js ISR page not being deleted after deleting it in CMS

How to clear NextJs GetStaticPaths cache / "unpublish" a dynamic route?

https://github.com/vercel/next.js/discussions/18967

【问题讨论】：

与Next.js does not delete dynamic page deleted in CMS 相关。您是否确定 API 响应没有以某种方式被缓存？嗯，除非 WordPress 的插件 WPGraphQL 有一些奇怪的缓存，否则应该没有缓存。那篇文章可能有点相关，但仍然没有解决方案。你试过删除NextJs创建的.next文件夹然后运行npm run dev吗？我的意思是我可以这样做，但问题仍然存在。因为基本上你正在做的是停止服务器，删除文件夹，重新启动。您可以跳过删除部分，因为它会工作，因为网站正在重新生成我遇到了基本相同的问题，但无论在我的 cms 中添加或删除帖子，我都无法更新它。你有想过这个吗？ 【参考方案1】：

我不确定这是否符合您的用例，但在我从事的一个项目中，如果源数据被删除，我们会返回 404。

export async function getStaticPaths() 
  // Get the paths we want to pre-render based on posts
  // We do not need to generate anything during build
  return 
    paths: [],
    fallback: true,
  ;


export async function getStaticProps( params:  slug  ) 
  // Run your data fetching code here
  try 
    const data = await getData(slug);
    return 
      props:  data, slug ,
      revalidate: 30,
      notFound: !data,
    ;
   catch (e) 
    return 
      props:  data: null, slug ,
      revalidate: 30,
      notFound: true,
    ;

文档：https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversideprops

【讨论】：

我认为这不会很好地工作，因为 revalidate 会阻止 getStaticProps 运行 30 秒。相关问题：***.com/questions/68444505/…

以上是关于Next.js ISR 页面在 CMS 中删除后未删除的主要内容，如果未能解决你的问题，请参考以下文章

Next.Js 使用无头 CMS 资产生成静态站点

如何使用 Next.js 将 Wordpress 配置为无头 CMS

NEXT JS - 如何删除查询参数？

如何基于 GraphQL API 的 slug 使用 Next.js 进行动态路由？

看起来 apollo 客户端不会查询 id 具有 . （点）使用 Next JS 和 Sanity CMS with GraphQL

Next.js 配置文件中的 next/image 配置