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

Question

在我的gatsby项目中，特别是在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 Flight Log和Crew Quarters。下面的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

然而，当我在localhost 上运行应用程序时，我得到了以下错误

现在错误显示我的links.js文件使用了一个名为useStaticQuery的钩子。我该如何将存储在menuLinks中的查询转换为react组件，但仍然可以像index.js中第10行中那样将其用作可索引数组

Answer 1

useStaticQuery是一个自定义React钩子，用于函数组件的定义。I.e:您不能在组件定义之外使用钩子，这就是错误告诉您的。

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

const SomeComponent = _props => {
const data = useStaticQuery(someQuery)
return (
<>
<ComponentA data={data} />
<ComponentB data={data} />
</>
)
}

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

"道具钻探"问题的一个可能解决方案是引入某种全局状态。使用React上下文将是一种很好的、轻量级的方法。