Question

在VueJS / Gridsome中，我变得一and不振，我正在尝试建立一个简单的网站来开始。我想做的是将所有数据本地存储在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"
              }
            ]
          }
        }
      ]
    }
  }
}

Videos.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。 / p>

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

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

Answer 1

您可以使用下面的GraphQL查询来查询单个视频。

如果您在http://localhost:8081/___explore的GraphQL游乐场中检查文档，则应该看到对Video以及allVideo的查询。不用在视频组件中使用allVideo，而是使用单个视频并传递ID，您应该会得到想要的结果。

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

如何使用GraphQL遍历VueJS / Gridsome中JSON文件中的数据？

1 个答案: