Gatsby YAML Recipe Files

test-data-json.json

[
  {
    "name": "Leia Organa",
    "profession": "Princess"
  },
  {
    "name": " Luke Skywalker",
    "profession": "Jedi Knight"
  },
  {
    "name": "Han Solo",
    "profession": "Nerf Herder"
  }
]

test-data-yaml.yaml

---
- name: Leia Organa
  profession: Princess
- name: Luke Skywalker
  profession: Jedi Knight
- name: Han Solo
  profession: Nerf Herder

test-page-json.js

import React from "react"
import { graphql } from "gatsby"

const TestPage = ({ data }) => (
  <div>
    <ul>
      {data.allTestDataJson.nodes.map((node, index) => (
        <li key={index}>
          {node.name} - {node.profession}
        </li>
      ))}
    </ul>
  </div>
)

export const query = graphql`
  query TestPageQuery {
    allTestDataJson {
      nodes {
        name
        profession
      }
    }
  }
`

export default TestPage

test-page-yaml.js

import React from "react"
import { graphql } from "gatsby"

const TestPage = ({ data }) => (
  <div>
    <ul>
      {data.allTestDataYaml.nodes.map((node, index) => (
        <li key={index}>
          {node.name} - {node.profession}
        </li>
      ))}
    </ul>
  </div>
)

export const query = graphql`
  query TestPageQuery {
    allTestDataYaml {
      nodes {
        name
        profession
      }
    }
  }
`

export default TestPage