将 gatsby-node 文件重构为单独的文件不起作用

Posted 2023-03-08

【中文标题】将 gatsby-node 文件重构为单独的文件不起作用

【英文标题】：Refactoring gatsby-node File into separate files not working

【发布时间】：2020-05-30 04:15:37

【问题描述】：

尝试通过外包一些代码来重构我的gatsby-node 文件。现在尝试在我的gatsby-node 中执行此操作：

const createBlogPostPages = require("./gatsby-utils/createBlogPostPages");

exports.createPages = async ( actions, graphql, reporter ) => 
  //...some code
  await createBlogPostPages( actions, graphql, reporter );
  //...some code

而我的createBlogPostPages，在不同的文件中，看起来像这样：

const path = require("path");

module.exports = async function( actions, graphql, reporter ) 
  const  createPage  = actions;

  const blogArticles = await graphql(`
    
      allMdx(filter:  fileAbsolutePath:  regex: "/content/blog/.*/"  ) 
        edges 
          node 
            id
            fileAbsolutePath
            fields 
              slug
            
            frontmatter 
              title
              tags
              date
              tagline
            
          
        
      
    
  `);

  blogArticles.data.allMdx.edges.forEach(( node ) => 
    let imageFileName = ... //some stuff

    createPage(
      path: `$node.fields.slug`,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: 
        slug: `$node.fields.slug`,
        id: node.id,
        imageFileName: imageFileName
      
    );
  );
;

当它直接在gatsby-node 中时，所有这些都有效。 但是，移动了东西后，我现在得到：

“gatsby-node.js”在运行 createPages 时抛出错误 生命周期：

blogArticles 未定义

ReferenceError: blogArticles 未定义

gatsby-node.js:177 Object.exports.createPages /Users/kohlisch/blogproject/gatsby-node.js:177:19

next_tick.js:68 process._tickCallback 内部/进程/next_tick.js:68:7

所以看起来它没有等待 graphql 查询解决？或者这可能是什么？我基本上只是想把我的gatsby-node 文件中的一些东西移到单独的函数中，这样它就不会那么混乱了。这不可能吗？

【参考方案1】：

在gatsby-node.js中导入时需要遵守两条规则：

1。使用 node.js 的 require 语法。

./src/components/util/gatsby-node-functions

const importedFunction = () => 
  return Date.now();
;

module.exports.importedFunction = importedFunction;

gatsby-node.js

const  importedFunction  = require(`./src/components/util/gatsby-node-functions`);

// ...
// Use your imported functions
console.log(importedFunction());

参考：Gatsby repo issue，如果您只想为使用 import 语句增加复杂性，还包括如何使用 ES6 import 语句。

2。不要将gatsby-node.js 特定属性传递给您的导入函数

例如，如果您尝试外包 createPages 函数，则操作将未定义：

const importedFunction = (actions, node) => 
    const createPage = actions; // actions is undefined
    createPage(
      path: `$node.fields.slug`,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: 
        slug: `$node.fields.slug`,
        id: node.id,
      
    );
;

module.exports.importedFunction = importedFunction;

随意推测为什么你不能传递属性。 Gatsby documentation 提到处理状态的“Redux”。也许 Redux 不提供您的 gatsby-node.js 之外的状态。如果我错了，请纠正我