如何解决Next.js ISR页面在CMS中删除后没有被删除
我正在尝试 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>← 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,};
}
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 和重新验证的工作方式方面遇到问题。或者我可能在我的代码中遗漏了什么? 任何帮助将不胜感激。
-- 编辑 --
同时还有更多线程,这里是 Stackoverflow 和 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
解决方法
我不确定这是否符合您的用例,但在我参与的其中一个项目中,如果源数据被删除,我们将返回 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,notFound: true,};
}
}
文档:https://nextjs.org/blog/next-10#redirect-and-notfound-support-for-getstaticprops--getserversideprops
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。