How to iterate through data from a JSON file in VueJS/Gridsome using GraphQL?

Question

I am getting my feet wet in VueJS/Gridsome and I am trying to make a simple site to start off. What I am looking to do is store all my data locally in a JSON file and pull it into my page/component using GraphQL. I am able to see the data load however I cannot iterate through every object; instead it shows me all the data.

I have tried changing the way I layout my JSON objects schemas, tried separating into multiple json files (Do not want to do this) and have played with different v-for parameters. On the Gridsome Docs and Youtube Tutorials everyone is pulling from markdown and generating pages from each markdown file or using some sort of API. I want to accomplish this in a single JSON file.

videos.json

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

GraphQL Query

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

GraphQL Results

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

Page Result:

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

I expect there to be an ID for each video entry, however it seems that the data collection is in the wrong scope and I cannot get it one level up to be with ID to generate an ID with each set of video.

I am looking for something that will give me this query result:

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

score 1 · Answer 1 · answered Jun 07 '19 at 10:34

You can do this by querying a single video using the GraphQL query below.

If you check the docs on GraphQL playground on http://localhost:8081/___explore you should see a query for Video and also allVideo. Instead of using allVideo in your vue components use a single video and pass in the ID you should get the result you want.

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

How to iterate through data from a JSON file in VueJS/Gridsome using GraphQL?

1 Answers1