Как перебрать данные из файла JSON в VueJS/Gridsome с помощью GraphQL?

Question

Я мокну в VueJS/Gridsome и пытаюсь сделать простой сайт для начала. Что я хочу сделать, так это сохранить все мои данные локально в файле JSON и вставить их на мою страницу / компонент, используя GraphQL. Я могу видеть загрузку данных, однако я не могу перебрать каждый объект; вместо этого он показывает мне все данные.

Я попытался изменить способ размещения схем объектов JSON, попытался разделить его на несколько файлов json (не хочу делать это) и поиграл с разными параметрами v-for. В Gridsome Docs и Youtube Tutorials каждый тянет от уценки и генерирует страницы из каждого файла уценки или использует какой-то API. Я хочу сделать это в одном файле JSON.

---

videos.json

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

GraphQL Query

{
  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" } ]

Я ожидаю, что для каждой записи видео будет свой идентификатор, однако кажется, что сбор данных находится в неправильной области, и я не могу поднять его на один уровень, чтобы быть с идентификатором, чтобы сгенерировать идентификатор для каждого набора видео.

Я ищу что-то, что даст мне этот результат запроса:

{
  "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 ниже.

Если вы посмотрите документацию на GraphQL Playground на http://localhost:8081/___explore вы должны увидеть запрос для Video а также allVideo. Вместо того, чтобы использоватьallVideo в ваших компонентах vue используйте одно видео и передайте идентификатор, чтобы получить желаемый результат.

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