Javascript 如何将graphQL查询转换为react组件？

在我的盖茨比项目中，特别是在

gatsby config.js

中，我有一个名为

menuLinks

siteMetadata: {
title: `Gatsby Default Starter`,
description: `The official Flight Log and utility tool for the CF`,
author: `Tristan Rebello`,
menuLinks: [
  {
    name: "CF FLight Log",
    link: "/",
  },
  {
    name: "Crew Quarters",
    link: "/page-2",
  },
],
},

我正试图从头开始实现自己的导航栏。现在导航栏只包含两页

CF飞行日志

和

乘员舱

。下面的graphQl查询提取包含我的页面信息（名称和链接）的

menuLinks

数组

/*links.js*/
import { graphql, useStaticQuery } from "gatsby"

const {
  site: {
    siteMetadata: { menuLinks },
  },
} = useStaticQuery(
  graphql`
    query {
      site {
        siteMetadata {
          menuLinks {
            link
            name
          }
        }
      }
    }
  `
)

export default menuLinks

上面，menuLinks数组包含两个链接对象。我想将menuLinks用作可导出对象，以便在其他组件（如第10行）中引用：

/*index.js*/
import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import menuLinks from "../components/links"

const IndexPage = () => (
  <Layout title={menuLinks[0]} subpage=menuLinks[1]>
    <SEO title="Home" />
    <h2>Welcome To The Official Flight Log of 3/1 </h2>
    <p>Here you can easily log your in-game flight hours</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

/*index.js*/
从“React”导入React
从“盖茨比”导入{Link}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
从“./组件/链接”导入菜单链接
常量索引页=（）=>(
欢迎来到3/1的官方飞行日志
在这里，您可以轻松记录游戏中的飞行时间

转到第2页
)
导出默认索引扩展

但是，当我在localhost上运行应用程序时，我得到了以下信息

现在错误表明我的

links.js

文件使用了一个名为

useStaticQuery

的钩子。如何将存储在

menuLinks

中的查询转换为react组件，但仍然能够将其用作可索引数组，如第10行的

index.js

中所述是一个自定义react，用于定义函数组件。也就是说：您不能在组件定义之外使用钩子，这就是错误告诉您的

钩子将在每个组件装入时加载一次数据，因此，如果您希望避免对API进行不必要的点击，可以在父组件中获取该数据并将其传递给子组件：

const SomeComponent = _props => {
  const data = useStaticQuery(someQuery)

  return (
    <>
      <ComponentA data={data} />
      <ComponentB data={data} />
    </>
  )
}

const SomeComponent=\u props=>{
const data=useStaticQuery（someQuery）
返回(
)
}

这可能是一个好的解决方案，也可能不是一个好的解决方案，这就是我们所说的“道具钻取”，因为您必须通过任意数量的嵌套组件钻取一些值

“支柱钻井”问题的一个可能解决方案是引入某种全球状态。使用React是一种很好的轻量级方法。

是一种自定义React，用于定义函数组件。也就是说：您不能在组件定义之外使用钩子，这就是错误告诉您的

钩子将在每个组件装入时加载一次数据，因此，如果您希望避免对API进行不必要的点击，可以在父组件中获取该数据并将其传递给子组件：

const SomeComponent = _props => {
  const data = useStaticQuery(someQuery)

  return (
    <>
      <ComponentA data={data} />
      <ComponentB data={data} />
    </>
  )
}

const SomeComponent=\u props=>{
const data=useStaticQuery（someQuery）
返回(
)
}

这可能是一个好的解决方案，也可能不是一个好的解决方案，这就是我们所说的“道具钻取”，因为您必须通过任意数量的嵌套组件钻取一些值

“支柱钻井”问题的一个可能解决方案是引入某种全球状态。使用React将是一种很好的轻量级方法