时间戳

首页 > 解决方案 > 我如何将 graphQL 查询转换为反应组件？

javascript - 我如何将 graphQL 查询转换为反应组件？

问题描述

在我的 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 上运行应用程序时，出现以下错误

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

标签： javascriptreactjsreact-hooksweb-deploymentgatsby

解决方案

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

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

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

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

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

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

推荐阅读