【发布时间】：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>← 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 和重新验证的工作方式上遇到了问题。或者我的代码中可能遗漏了什么？ 任何帮助将不胜感激。
-- 编辑--
与此同时，在 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?
【问题讨论】：
-
与Next.js does not delete dynamic page deleted in CMS 相关。您是否确定 API 响应没有以某种方式被缓存？
-
嗯，除非 WordPress 的插件 WPGraphQL 有一些奇怪的缓存，否则应该没有缓存。那篇文章可能有点相关，但仍然没有解决方案。
-
你试过删除NextJs创建的.next文件夹然后运行
npm run dev吗？ -
我的意思是我可以这样做，但问题仍然存在。因为基本上你正在做的是停止服务器，删除文件夹，重新启动。您可以跳过删除部分，因为它会工作，因为网站正在重新生成
-
我遇到了基本相同的问题，但无论在我的 cms 中添加或删除帖子，我都无法更新它。你有想过这个吗？
标签： reactjs next.js getstaticprops getstaticpaths