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

Posted 2023-02-22

【中文标题】如何使用 GraphQL 从 VueJS/Gridsome 中的 JSON 文件中迭代数据？

【英文标题】：How to iterate through data from a JSON file in VueJS/Gridsome using GraphQL?

【发布时间】：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"
              
            ]
          
        
      ]
    
  

【参考方案1】：

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

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

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