如何使用 GraphQL 从 VueJS/Gridsome 中的 JSON 文件中迭代数据？答案

【问题标题】：How to iterate through data from a JSON file in VueJS/Gridsome using GraphQL?如何使用 GraphQL 从 VueJS/Gridsome 中的 JSON 文件中迭代数据？
【发布时间】：2019-09-26 08:00:25
【问题描述】：

我在 VueJS/Gridsome 中弄湿了我的脚，我正在尝试制作一个简单的网站来开始。我要做的是将所有数据本地存储在 JSON 文件中，并使用 GraphQL 将其拉入我的页面/组件中。我能够看到数据加载，但是我无法遍历每个对象；而是向我显示所有数据。

我尝试改变我布局 JSON 对象模式的方式，尝试分离成多个 json 文件（不想这样做）并使用不同的 v-for 参数。在 Gridsome Docs 和 Youtube 教程中，每个人都从 markdown 中提取并从每个 markdown 文件或使用某种 API 生成页面。我想在单个 JSON 文件中完成此操作。

videos.json

[
    {
        "title": "vid 1",
        "url": "url1"
    },
    {
        "title": "vid 2",
        "url": "url2"
    }
]

GraphQL 查询

{
  allVideo {
    edges {
      node{
        id
        data {
          title
          url
        }
      }
    }
  }
}

GraphQL 结果

{
  "data": {
    "allVideo": {
      "edges": [
        {
          "node": {
            "id": "6b3cddf43cce8f8a0fb122d194db6edc",
            "data": [
              {
                "title": "vid 1",
                "url": "https://youtube.com"
              },
              {
                "title": "vid 2",
                "url": "https://youtube.com"
              }
            ]
          }
        }
      ]
    }
  }
}

视频.vue

<template>
  <Layout>
    <h1>Videos</h1>
    <div v-for="edge in $page.allVideo.edges" :key="edge.node.id">
      {{edge.node.data}}
    </div>
  </Layout>
</template>


<page-query>
  query Videos { 
    allVideo {
      edges {
        node {
          id
          data {
            title
            url
          }
        }
      }
    } 
  }
</page-query>

页面结果：

Videos
[ { "title": "vid 1", "url": "url1" }, { "title": "vid 2", "url": "url2" } ]

我希望每个视频条目都有一个 ID，但似乎数据收集的范围有误，我无法将其提升到一个级别，以便使用 ID 为每组视频生成一个 ID。

我正在寻找能给我这个查询结果的东西：

{
  "data": {
    "allVideo": {
      "edges": [
        {
          "node": {
            "id": "6b3cddf43cce8f8a0fb122d194db6edc",
            "data": [
              {
                "title": "vid 1",
                "url": "url1"
              }
            ]
          }
        },
        {
          "node": {
            "id": "some other ID",
            "data": [
              {
                "title": "vid 2",
                "url": "url 2"
              }
            ]
          }
        }
      ]
    }
  }
}

【问题讨论】：

标签： json vue.js graphql gridsome

【解决方案1】：

您可以通过使用下面的 GraphQL 查询查询单个视频来做到这一点。

如果您在 http://localhost:8081/___explore 上查看 GraphQL 操场上的文档，您应该会看到对 Video 和 allVideo 的查询。不要在你的 vue 组件中使用allVideo，而是使用单个视频并传入 ID，你应该会得到你想要的结果。

{
  Video(id: "6b3cddf43cce8f8a0fb122d194db6edc") {
    edges {
      node{
        id
        data {
          title
          url
        }
      }
    }
  }
}

【讨论】：