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

这是一个类似的问题

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

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

插件确实成功地添加了数据，因为我可以在中看到数据，并且我已经成功地在（静态）页面中使用了数据

我迷路的地方是，我希望能够为每个字符创建一个页面，为每个页面使用url

characters/

。我知道我需要向我的（主版本或插件版本的…？）

gatsby node.js

文件添加一些逻辑，但这是我一直坚持的部分。我不知道我需要在

gatsby node.js

文件中输入什么。我能找到的示例都使用json或标记文件，我想使用我（从API）拉入gatsby数据层的数据。很明显，我已经研究了几个小时，并在询问之前对其进行了研究，但没有任何运气

我想创建的页面上的组件应该如下所示：

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

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)
  })
}

---

盖茨比的

createPages

API可能是您需要的

我用它创建了多个页面，比如blog1、blog2、blog3等等。。。 同样，可以为角色创建多个页面

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

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.
        })
      })

    }