Как бы я превратил запрос GraphQL в реагирующий компонент? - PullRequest
Новая
       19

Как бы я превратил запрос GraphQL в реагирующий компонент?

0 голосов
/ 05 апреля 2020

В моем проекте 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

Однако при запуске приложения на: 1011 * Ошибка localhost

Теперь ошибка говорит о том, что в моем файле links.js используется хук с именем useStaticQuery. Как бы я преобразовал этот запрос, который хранится в menuLinks, в компонент реагирования, , но все еще сможет использовать его в качестве индексируемого массива, как в index.js в строке 10

1 Ответ

2 голосов
/ 05 апреля 2020

useStaticQuery - это пользовательский React hook , и он предназначен для использования в определении функционального компонента. Т.е.: Вы не можете использовать перехват вне определения компонента , и это то, о чем говорит ошибка.

Перехват будет загружать данные один раз для монтирования компонента, так что если Вы хотите избежать ненужных попаданий в API. Вы можете получить эти данные в родительском компоненте и передать их дочерним элементам: 

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

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

Это может быть или не быть хорошим решением, и это то, что мы называем " проп бурения», потому что вы должны просверлить какое-то значение через произвольные количества вложенных компонентов.

1013 * Возможное решение„“проблемы пропа бурения может ввести глобальное состояние своего рода. Использование React Contexts было бы хорошим и легким подходом.
...