时间戳

首页 > 解决方案 > 如何在 Gatsby 中创建无边 graphql 元素？

javascript - 如何在 Gatsby 中创建无边 graphql 元素？

问题描述

标题可能会错过领先，但我不确定如何正确提出这个问题。这是问题所在：我想查询我自己的 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，但我找不到如何实现这一点。感谢您的帮助

标签： javascriptreactjsgatsby

解决方案

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

cmsSettings {
  app_title
  app_keywords
  app_descriptions
  app_logo_path
  brand_name
  ...
}

请注意小写字母，即使它被声明为 CmsSettings。盖茨比似乎真的在幕后做了一些魔术。

推荐阅读