Как запросить более одного набора данных в компоненте страниц с помощью GraphQL?

Используя gatsby-source-filesystem, я создал конфигурацию из нескольких источников данных, чтобы получить разные узлы из разных мест в файловой системе.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages`
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'json',
        path: `${__dirname}/src/data/json/`
      }
    }
  ]
}

В контексте компонента страницы я создал эти запросы

export const query = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "json" } }) {
      edges {
        node {
          name
        }
      }
    }
  }
`

export const pagesQuery = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "pages" } }) {
      edges {
        node {
          name
        }
      }
    }
  }
`

На этой странице компонента я хочу показать результаты каждого запроса, но мне не ясна процедура получения отдельных результатов в компоненте.

export default ({ data }) => {
  console.info(data)

  return (
    <Layout>
      <h1>About</h1>

      <p>Lorem ipsum dolor sit amet</p>

      {/*<Hobby hobbies = {data.allFile.edges} />*/}
      {/*<Hobby pages = {data.allFile.edges} />*/}
    </Layout>
  )
}

Это полный код компонента страницы /pages/about.js...

// src/pages/about.js
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  console.info(data)
  return (
    <Layout>
      <h1>About me</h1>

      <p>Lorem ipsum dolor sit amet</p>

      {/*<Hobby hobbies = {data.allFile.edges} />*/}
      {/*<Page pages = {data.allFile.edges} />*/}
    </Layout>
  )
}

const Hobby = props => {
  const hobbies = props.hobbies

  return (
    <div>
      <h3>My hobbies</h3>
      <ul>
        {hobbies.map(hobby => (
          <li>{hobby.node.name}</li>
        ))}
      </ul>
    </div>
  )
}

const Page = props => {
  const pages = props.pages

  return (
    <div>
      <h3>Site pages</h3>
      <ul>
        {pages.map(hobby => (
          <li>{hobby.node.name}</li>
        ))}
      </ul>
    </div>
  )
}

export const query = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "json" } }) {
      edges {
        node {
          name
        }
      }
    }
  }
`

export const pagesQuery = graphql`
  query {
    allFile(filter: { sourceInstanceName: { eq: "pages" } }) {
      edges {
        node {
          name
        }
      }
    }
  }
`

При регистрации значения данных я получаю результат первого выполненного запроса