如何使用GraphQL在pages组件中查询多个数据集？

使用gatsby源文件系统，我创建了多个数据源的配置，以便从文件系统中的不同位置获得不同的节点

// 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.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>
  )
}

导出默认值（{data}）=>{
console.log（数据）
返回(
关于
Lorem ipsum dolor sit amet

{/**/}
{/**/}
)
}

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

//src/pages/about.js
从“React”导入React
从“./组件/布局”导入布局
从“盖茨比”导入{graphql}
导出默认值（{data}）=>{
console.log（数据）
返回(
关于我
Lorem ipsum dolor sit amet

{/**/}
{/**/}
)
}
康斯特爱好=道具=>{
const嗜好=道具
返回(
我的爱好

{嗜好。地图（嗜好=>(
{hobby.node.name}
))}

)
}
const Page=props=>{
const pages=props.pages
返回(
网站页面

{pages.map（爱好=>(
{hobby.node.name}
))}

)
}
export const query=graphql`
质疑{
allFile（筛选器：{sourceInstanceName:{eq:“json”}}）{
边缘{
节点{
名称
}
}
}
}
`
导出常量pagesQuery=graphql`
质疑{
allFile（筛选器：{sourceInstanceName:{eq:“页面”}}）{
边缘{
节点{
名称
}
}
}
}
`

---

当记录数据值时，我得到执行的第一个查询的结果，我相当确定盖茨比每个文件只使用1个graphql查询。您必须合并查询（可以一次查询多个数据），并在不同的名称下使用别名，如下所示：

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

export const query=graphql`
质疑{
//别名
//VVV
jsonData:allFile（筛选器：{sourceInstanceName:{eq:“json”}）{
边缘{
节点{
名称
}
}
}
pageData:allFile（筛选器：{sourceInstanceName:{eq:“页面”}}）{
边缘{
节点{
名称
}
}
}
}
`

然后在您的组件中，您可以像这样使用它们：

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

---

感谢您的回答，答案是正确的，在mergin之后，查询工作如预期的那样。