Question

在gatsby-config.js中考虑以下代码：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-fetch`,
      options: {
        name: `brands`,
        type: `brands`,
        url: `${dynamicURL}`, // This is the part I need to be dynamic at run/build time.
        method: `get`,
        axiosConfig: {
          headers: { Accept: "text/csv" },
        },
        saveTo: `${__dirname}/src/data/brands-summary.csv`,
        createNodes: false,
      },
    },
  ],
}

正如您在上面看到的，源插件的URL是我需要动态的。这样做的原因是，每次在CMS中对其进行更新时，文件URL都会更改。在传递给插件之前，我需要查询CMS的该字段并获取其CDN URL。

我尝试将以下内容添加到gatsby-config.js的顶部，但出现错误。

const axios = require("axios")

let dynamicURL = ""
const getBrands = async () => {
  return await axios({
    method: "get",
    url: "https://some-proxy-url-that-returns-json-with-the-csv-file-url",
  })
}

;(async () => {
  const brands = await getBrands()
  dynamicURL = brands.data.summary.url
})()

我认为这是行不通的，因为配置没有等待上面的请求解决，因此，我们得到的只是一个空白URL。

还有更好的方法吗？我不能简单地提前为源插件提供固定/已知的网址。

任何帮助，我们将不胜感激。我通常是Vue.js的人，但是必须与React / Gatsby一起工作，所以我并不完全熟悉它。

Answer 1

我有类似的需求，我需要通过从异步 api 获取数据来动态设置 gatsby-plugin-matomo 的 siteId。搜索了大量 gatsby 构建生命周期的文档后，我找到了一个解决方案。

这是我的方法 -

gatsby-config.js

module.exports = {
   siteMetadata: {
     ...
   },
   plugins: {
     {
        resolve: 'gatsby-plugin-matomo',
        options: {
           siteId: '',
           matomoUrl: 'MATOMO_URL',
           siteUrl: 'GATSBY_SITE_URL',
           dev: true
        }
      }
    }
};

这里的siteId为空，因为我需要动态放置。

gatsby-node.js

exports.onPreInit = async ({ actions, store }) => {
    const { setPluginStatus } = actions;
    const state = store.getState();
    const plugin = state.flattenedPlugins.find(plugin => plugin.name === "gatsby-plugin-matomo");
    if (plugin) {
        const matomo_site_id = await fetchMatomoSiteId('API_ENDPOINT_URL');
        plugin.pluginOptions = {...plugin.pluginOptions, ...{ siteId: matomo_site_id }};
        setPluginStatus({ pluginOptions: plugin.pluginOptions }, plugin);
    }
};

exports.createPages = async function createPages({ actions, graphql }) {
    /* Create page code */
};

onPreInit 是一种 gatsby 生命周期方法，它在从配置加载插件后立即执行。 onPreInit 生命周期钩子有一些内置方法。

store 是 redux 存储，gatsby 在其中存储构建过程所需的所有信息。

setPluginStatus 是一个 redux action，通过它可以在 gatsby 的 redux store 中修改插件数据。

这里重要的是 onPreInit 生命周期钩子必须以异步方式调用。

希望这对未来的人有所帮助。

Answer 2

另一种可能适合您的方法是使用environment variables，正如您所说的那样，URL是已知的，您可以将它们添加到.env文件而不是CSV中。

默认情况下，Gatsby将.env.development用于gatsby develop，将.env.production用于gatsby build命令。因此，您将需要在项目的根目录中创建两个文件。

在您的.env（和.env.development和.env.production中）中添加：

DYNAMIC_URL: https://yourUrl.com

由于gatsby-config.js是在节点服务器中呈现的，因此不需要像客户端中所呈现的那样以GATSBY_为前缀。因此，在您的gatsby-config.js中：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-fetch`,
      options: {
        name: `brands`,
        type: `brands`,
        url: process.env.DYNAMIC_URL, // This is the part I need to be dynamic at run/build time.
        method: `get`,
        axiosConfig: {
          headers: { Accept: "text/csv" },
        },
        saveTo: `${__dirname}/src/data/brands-summary.csv`,
        createNodes: false,
      },
    },
  ],

避免在Git存储库中跟踪这些文件非常重要，因为您不想公开此类数据。

如何从gatsby-config.js中获取动态数据？

2 个答案: