我如何将 graphQL 查询转换为反应组件？答案

【问题标题】：How would I turn a graphQL query into a react component?我如何将 graphQL 查询转换为反应组件？
【发布时间】：2020-04-05 01:17:20
【问题描述】：

在我的 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 数组包含两个链接对象。我想在第 10 行将 menuLinks 用作要在其他组件中引用的可导出对象：

/*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 上运行应用程序时，我得到以下 Error

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

【问题讨论】：

标签： javascript reactjs react-hooks web-deployment gatsby

【解决方案1】：

useStaticQuery 是一个自定义的 React hook，它用于定义函数组件。即：您不能在组件定义之外使用挂钩，这就是错误告诉您的内容。

钩子会在每个组件挂载时加载一次数据，因此如果您想避免对 API 造成不必要的访问，您可以在父组件中获取该数据并将其传递给子组件：

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

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

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

“道具钻孔”问题的一个可能解决方案是引入某种全局状态。使用 React Contexts 将是一种很好的轻量级方法。

【讨论】：