javascript - 以编程方式从 API 数据创建 Gatsby 页面

Question

这是与 this 类似的问题.

我正在寻求使用 createPage 或 createPages 以编程方式创建页面的帮助，但我遇到了问题 - 文档提供了一个从 markdown 文件创建页面的示例，但没有太多解释。

我正在使用 plugins\characters\gatsby-node.js 中的插件将 Rick & Morty API 中的数据添加到 GraphQL 数据层。如果相关，我的插件位于问题的底部。

插件确实成功添加了数据，因为我可以在 http://localhost:8000/___graphql 中看到数据，并且我已经成功地使用了(静态)页面中的数据。

我迷路的地方是我希望能够使用 url characters/<characterIdHere> 为每个单独的 Angular 色创建一个页面。对于每个页面。我知道我需要添加一些逻辑到我的(主版本或插件版本......？)gatsby-node.js文件，但这是我坚持的部分。我不知道我需要将什么放入 gatsby-node.js文件。 我能找到的所有示例都使用 json 或 markdown 文件，我想使用我从 API 中提取的数据到 gatsby 的数据层。显然，我已经对此进行了几个小时的研究，并在询问之前尝试了一下，但没有任何运气。

我要创建的页面上的组件应如下所示:

const CharactersViewSingle = ({ character}) => {
  return (
    <div>
      <Helmet>
        <title>{character.name && character.name}</title>
      </Helmet>
      <NavBar />
      <CharactersViewBox character={character} width={300} height={520} />
    </div>
  )
}

上面的代码取 self 使用create-react-app时组件返回的内容。

我用来获取其他(静态)页面上的数据的 graphQL 查询(这显然反射(reflect)了我想使用的数据的结构)如下所示:

export const query = graphql`
  query CharactersQuery {
    allCharacters(limit: 5) {
      edges {
        node {
          id
          name
          status
          gender
          image
        }
      }
    }
  }
`

插件代码:

const axios = require("axios")

exports.sourceNodes = async ({
  actions,
  createNodeId,
  createContentDigest,
}) => {
  const { createNode } = actions

  const integerList = (start, length) =>
    Array.from({ length: length }, (v, k) => k + start)

  const rickMortyURL = `https://rickandmortyapi.com/api/character/${integerList(
    1,
    493
  )}`

  const rickMorty = await axios.get(rickMortyURL)
  const query = await axios.get(rickMortyURL)
  rickMorty.data.forEach(character => {
    const nodeContent = JSON.stringify(character)
    const nodeMeta = {
      id: character.id.toString(),
      //id: createNodeId(`char-data-${character.id}`),
      parent: null,
      children: [],
      internal: {
        type: `Characters`,
        content: nodeContent,
        contentDigest: createContentDigest(character),
      },
    }
    const node = Object.assign({}, character, nodeMeta)
    createNode(node)
  })
}

Answer 1

Gatsby createPages您可能正在寻找 API。

我用它来创建多个页面，例如 blog1、blog2、blog3 等...同样，您可以为 Angular 色创建多个页面。

既然你提到你有一个 graphql 调用来让你的 Angular 色使用

const pages = await graphql(`
 query CharactersQuery {
    allCharacters(limit: 5) {
      edges {
        node {
          id
          name
          status
          gender
          image
        }
      }
    }
  }
`)

上面的 graphql 调用在 pages.data.allCharacters.edges 中返回结果

现在您可以使用 foreach 迭代它们并使用 createPage 来创建页面。

以下是您可能需要添加到 gatsby-node.js 中的完整模拟代码文件

    const path = require('path');

    exports.createPages = async ({ graphql, actions }) => {
      const { createPage } = actions
      const templateOfYourCharacterPage = path.resolve(`src/templates/exampleTemplateFile.jsx`)

    const pages = await graphql(`
     query CharactersQuery {
        allCharacters(limit: 5) {
          edges {
            node {
              id
              name
              status
              gender
              image
            }
          }
        }
      }
    `)

      let characters = pages.data.allCharacters.edges;

      characters.forEach(edge => {
        createPage({
          path: `/${edge.node.id}`,
          component: templateOfYourCharacterPage,
          context: {id: edge.node.uid, name: edge.node.name } // This is to pass data as props to your component.
        })
      })

    }