9

我有一个产品页面/products/[slug].js

我对 wordpress/graphql 网站使用增量静态生成：

export async function getStaticProps(context) {

    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    return {
        props: {
            categoryName: data?.productCategory?.name ?? '',
            products: data?.productCategory?.products?.nodes ?? []
        },
        revalidate: 1
    }

}

export async function getStaticPaths () {
    const { data } = await client.query({
        query: PRODUCT_SLUGS,
    })

    const pathsData = []

    data?.productCategories?.nodes && data?.productCategories?.nodes.map((productCategory) => {
        if (!isEmpty(productCategory?.slug)) {
            pathsData.push({ params: { slug: productCategory?.slug } })
        }
    })

    return {
        paths: pathsData,
        fallback: true,
    }
}

除了一件事，一切都按预期工作。如果我从 wordpress 中删除以前发布的产品，NextJs 会提供缓存页面而不是显示404 - Not found页面，我认为这就是它应该工作的方式，这意味着如果没有重建某些内容，则显示以前的（陈旧的）页面.

但是，如何完全删除已删除且不再从PRODUCT_SLUGS查询中获取的特定产品的缓存？

我已经阅读了这些fallback选项：true, false, blocking但它们似乎都不起作用。

是否有解决方案，无论是next.config.js配置还是其他解决方法？

4

1 回答 1

0

所以我遇到了同样的问题，尽管我使用的是 GraphCMS。所以这是你需要做的修复：

    export async function getStaticProps(context) {
    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    if (!data) {
        return {
            notFound: true
        }
    } else {
        return {
            props: {
                categoryName: data?.productCategory?.name ?? '',
                products: data?.productCategory?.products?.nodes ?? []
            },
            revalidate: 1
        }
    }
}

notFound: true您需要返回getStaticProps

notFound- 一个可选的布尔值，允许页面返回 404 状态和页面。

请参阅文档中的此页面https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

然后在getStaticPaths更改回退到fallback: "blocking". 如果您保留fallback: true它，它将为成功构建后的陈旧页面提供服务。

于 2021-11-17T21:36:31.963 回答