How to query more than one dataset in pages component with GraphQL?

Question

Using gatsby-source-filesystem I have created a configuration of multiple data sources in order to obtain different nodes from different locations in the file system

// 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/`
      }
    }
  ]
}

In the context of a page component I created these queries

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
        }
      }
    }
  }
`

In this component page I want to show the results of each query, but I am not clear about the procedure to obtain the individual results in the component

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

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

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

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

This is the complete code in page component /pages/about.js...

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

export default ({ data }) => {
  console.log(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
        }
      }
    }
  }
`

When logging the data value I get the result of the first query executed

Answer 1

I'm fairly sure Gatsby only uses 1 graphql query per file. You have to merge your queries (you can query for multiple data at once), alias them under different name like this:

export const query = graphql`
  query {
//  alias
//  vvvv
    jsonData: allFile(filter: { sourceInstanceName: { eq: "json" } }) {
      edges {
        node {
          name
        }
      }
    }
    pageData: allFile(filter: { sourceInstanceName: { eq: "pages" } }) {
      edges {
        node {
          name
        }
      }
    }
  }
`

Then in your component you can use them like this:

export default ({ data }) => {
  const { jsonData, pageData } = data
  return (
     ...
  )
}