如何在 Gatsby 中创建无边 graphql 元素？答案

【问题标题】：How do you create edgeless graphql element in Gatsby?如何在 Gatsby 中创建无边 graphql 元素？
【发布时间】：2020-07-16 19:39:12
【问题描述】：

标题可能会错过领先，但我不确定如何正确提出这个问题。这是问题所在：我想查询我自己的 API（尚未创建，所以我制作了占位符数据）以获取将来可能会更改的全局设置，我只需要重建网站而不是手动编辑它，我想要创建名为 CmsSettings 的源节点并将其传递给 GraphQL（类似于 site.siteMetadata 的结构），但我不知道如何实现。到目前为止，我实现的是创建一个名为 allCmsSettings 的源节点，它将我的数据作为节点数组中的一个对象。

exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  const { createNode } = actions;
  const myData = {
    key: 123,
    app_title: `The foo field of my node`,
    ...
  }

  const nodeContent = JSON.stringify(myData);

  const nodeMeta = {
    id: createNodeId(`my-data${ myData.key }`),
    parent: null,
    children: [],
    internal: {
      type: `CmsSettings`,
      mediaType: `text/html`,
      content: nodeContent,
      contentDigest: createContentDigest(myData)
    }
  }

  const node = Object.assign({}, myData, nodeMeta);
  createNode(node);
}

这里是用来获取源节点数据的查询

allCmsSettings {
    edges {
      node {
        id
        app_title
        ...
      }
    }
  }

创建一个查询会产生一个结果数组（我知道这是创建源节点的结果），但我想创建该源以便我可以像这样查询它并且：

CmsSettings {
  app_title
  app_keywords
  app_descriptions
  app_logo_path
  brand_name
  ...
}

你明白了。我正在浏览 gatsby 节点 API，但我找不到如何实现这一点。谢谢你的帮助

【问题讨论】：

标签： javascript reactjs gatsby

【解决方案1】：

没关系，答案很简单，如果您像我一样不熟悉 gatsby，sourceNodes 导出会为您创建 2 个带有所有前缀和驼峰式源节点的 graphql 字段。我想做的东西已经存在并且可以使用

cmsSettings {
  app_title
  app_keywords
  app_descriptions
  app_logo_path
  brand_name
  ...
}

请注意小写字母，即使它被声明为 CmsSettings。看来盖茨比确实在幕后施展了魔法。

【讨论】：