Как перебрать данные из файла JSON в VueJS / Gridsome с использованием GraphQL? - PullRequest
Новая
       40

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

1 голос
/ 08 мая 2019

Я промочил ноги в 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 

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

1 Ответ

0 голосов
/ 07 июня 2019

Вы можете сделать это, запросив одно видео с помощью запроса GraphQL, приведенного ниже.

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

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