创建源插件时无法在 gatsby graphql 层中保存数据答案

【问题标题】：Unable to save data in gatsby graphql layer while creating source plugin创建源插件时无法在 gatsby graphql 层中保存数据
【发布时间】：2023-03-08 17:35:01
【问题描述】：

我正在尝试获取按播放列表分组的 youtube 频道的所有视频。所以首先我获取所有播放列表，然后再次获取相应的视频。

const fetch = require("node-fetch")
const queryString = require("query-string")

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

  // Gatsby adds a configOption that's not needed for this plugin, delete it
  delete configOptions.plugins

  // plugin code goes here...
  console.log("Testing my plugin", configOptions)

  // Convert the options object into a query string
  const apiOptions = queryString.stringify(configOptions)
  const apiUrl = `https://www.googleapis.com/youtube/v3/playlists?${apiOptions}`

  // Helper function that processes a content to match Gatsby's node structure
  const processContent = content => {
    const nodeId = createNodeId(`youtube--${content.id}`)
    const nodeContent = JSON.stringify(content)
    const nodeData = Object.assign({}, content, {
      id: nodeId,
      parent: null,
      children: [],
      internal: {
        type: `tubeVideo`,
        content: nodeContent,
        contentDigest: createContentDigest(content)
      }
    })
    return nodeData
  }

  return fetch(apiUrl)
    .then(res => res.json())
    .then(data => {
      data.items.forEach(item => {
        console.log("item", item.id)
        //fetch videos of the playlist
        let playlistApiOption = queryString.stringify({
          part: "snippet,contentDetails",
          key: "AIzaSyDPdlc3ctJ7yodRZE_GfbngNBEYbdcyys8",
          playlistId: item.id,
          fields: "items(id,snippet(title,description,thumbnails),contentDetails)"
        })
        let playlistApiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?${playlistApiOption}`
        fetch(playlistApiUrl)
          .then(res => res.json())
          .then(data => {
            data.items.forEach(video => {
              console.log("videos", video)
              // Process the video data to match the structure of a Gatsby node
              const nodeData = processContent(video)
              //  console.log(nodeData)
              // Use Gatsby's createNode helper to create a node from the node data
              createNode(nodeData)
            })
          })
      })
    })
}

这里正在为单个视频创建节点。但无法从 graphql 存储中查询此节点。 IE。数据未保存在 graphql 存储中

【问题讨论】：

您好，您怎么知道 graphql 商店没有节点？您是否尝试在 graphiQL (localhost:8000/___graphql) 中查询 tubeVideo 或 allTubeVideo？
@DerekNguyen。是的。我检查了graphiql，但它不存在。但是创建了节点，我使用 onCreateNode 进行了检查。

标签： node.js reactjs graphql gatsby

【解决方案1】：

edit：等等，我才意识到它在一个循环中。您的 sourceNodes 没有等待循环内的 fetch 解决。在这种情况下，您必须使用 Promise.all 之类的东西来解析循环中的每个项目。代码已更新以反映这一点。

  return fetch(apiUrl)
    .then(res => res.json())
    .then(data => {
      return Promise.all(
        data.items.map(item => {
          /* etc. */
          return fetch(playlistApiUrl)
            .then(res => res.json())
            .then(data => {
              data.items.forEach(video => {
                /* etc. */
                createNode(nodeData)
              })
            })
        )
      })
    })

查看async/await 语法，它可能更容易找到这类问题。

【讨论】：