Gatsby：在构建时转换从页面查询返回的数据

Question

例如，我想在 ie 页面组件可用之前，在 构建时间 将查询返回的列表数组展平，而不必这样做它在每个请求的客户端。 有没有可以做到这一点的生命周期方法或中间件？

Answer 1

是的！这是我对 Gatsby 中 GraphQL 数据层最欣赏的地方之一。有大量 API 可用于转换数据节点，包括根据类型添加新节点，所有这些都在运行页面查询之前完成。这意味着您可以创建精确匹配您的需求的新结构，然后从这些结构中获取字段以提供您的页面组件，这些查询的结果将最终出现在您的 page-data.json 文件中，而没有任何来源的痕迹。

onCreateNode (docs)

在创建新节点时调用。希望扩展或转换由其他插件创建的节点的插件应实现此 API。

exports.onCreateNode = ({ node, actions }) => {
  const { createNode, createNodeField } = actions
    // Transform the new node here and create a new node or
    // create a new node field.
}

createNodeField (docs)

扩展另一个节点。新节点字段位于扩展节点对象的 fields 键下。

一旦插件声明了一个字段名，该字段名就不能被其他插件使用。此外，由于节点是不可变的，因此您不能直接改变节点。因此，要扩展另一个节点，请使用它。

createNodeField({
  node,
  name: `happiness`,
  value: `is sweet graphql queries`
})

createResolvers (docs)

将自定义字段解析器添加到 GraphQL 架构。

允许通过提供字段配置或向现有字段添加解析器函数来向类型添加新字段。

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Author: {
      fullName: {
        resolve: (source, args, context, info) => {
          return source.firstName + source.lastName
        }
      },
    },
    Query: {
      allRecentPosts: {
        type: [`BlogPost`],
        resolve: (source, args, context, info) => {
          const posts = context.nodeModel.getAllNodes({ type: `BlogPost` })
          const recentPosts = posts.filter(
            post => post.publishedAt > Date.UTC(2018, 0, 1)
          )
          return recentPosts
        }
      }
    }
  }
  createResolvers(resolvers)
}