Gatsby ENABLE_GATSBY_REFRESH_ENDPOINT 未按预期工作

Question

我正在使用 Gatsby 构建前端，使用 WordPress 构建无头 CMS。当我对我的 WordPress 帖子进行更改时，我希望更改立即反映在我的 Gatsby 页面中。但是，当我进行更改时，我必须停止并重新启动服务器才能反映更改。我已查看 gatsby 文档并将“ENABLE_GATSBY_REFRESH_ENDPOINT”添加到我的环境文件中，但它不起作用。我做错了什么？ 这是我的项目根目录下的 .env 中的内容

ENABLE_GATSBY_REFRESH_ENDPOINT=true

这是我的 gatsby-config 文件

import type { GatsbyConfig } from 'gatsby'
import * as dotenv from 'dotenv' // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
dotenv.config()


const config: GatsbyConfig = {
  siteMetadata: {
    title: meta.title,
    description: meta.description,
    siteUrl: meta.siteUrl,
    logo: meta.logo,
  },
  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
  // If you use VSCode you can also use the GraphQL plugin
  // Learn more at: https://gatsby.dev/graphql-typegen
  graphqlTypegen: true,
  plugins: [
    'gatsby-plugin-postcss',
    'gatsby-plugin-image',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        url:
          // allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.

          `http://url/graphql`,
        schema: {
          //Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
          typePrefix: `Wp`,
          timeout: 3000000,
        },
        develop: {
          //caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
                  50
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
          Page: {
            limit: 0,
          },

          MenuItem: {
            limit: 0,
          },

          User: {
            limit: 0,
          },
          Tag: {
            limit: 0,
          },
        },
      },
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        icon: 'src/images/logo.png',
      },
    },
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        exclude: ['/thankyou'],
      },
    },
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: './src/images/',
      },
      __key: 'images',
    },
    'gatsby-plugin-react-svg',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: meta.title,
        short_name: meta.title,
        start_url: '/',
        background_color: 'white',
        theme_color: '#101C45',
        display: 'standalone',
        lang: 'en',
        icon: 'static/logo.png',
        description: meta.description,
      },
    },
  ],
}

export default config

Answer 1

通过在您的环境中将

ENABLE_GATSBY_REFRESH_ENDPOINT

设置为

true

，您将启用一个可以触发该 Webhook 来刷新您的网站。

要对此进行测试，请运行该站点的本地开发版本，设置环境变量。然后通过点击 webhook 来触发刷新：

curl -X POST http://localhost:8000/__refresh

您应该看到页面已重建。

有关此内容的更多详细信息可以在此处找到。

现在您需要在您的 Wordpress 站点上设置一个触发器，它将触发您部署的 Gatsby 站点上相应的 Webhook。有关如何完成此操作的详细信息，请参阅this。