Question

我从有内容的状态获得了graphql查询，并决定尝试使用wrapPageElement在我的应用程序中的所有位置提供房地产清单，但是可悲的是，在将查询提取到提供程序之后，我无法从中获取任何数据。有什么想法为什么现在不起作用？

gatsby-browser.js

import React from "react"
import Layout from "@components/layout/layout"
import EstatesProvider from "@context/estatesProvider"

const wrapPageElement = ({ element }) => {
  return (
    <EstatesProvider>
      <Layout>{element}</Layout>
    </EstatesProvider>
  )
}

export default wrapPageElement

estatesProvider.js

import React, { createContext } from "react"
import { useStaticQuery, graphql } from "gatsby"

export const EstatesContext = createContext({})

const EstatesProvider = ({ children }) => {
  const query = useStaticQuery(graphql`
    query MyQuery {
      allContentfulEstate {
        edges {
          node {
            thumbnailUrl
            name
            childContentfulEstateDescriptionRichTextNode {
              json
            }
          }
        }
      }
    }
  `)
  const estates = query.allContentfulEstate.edges

  return (
    <EstatesContext.Provider value={estates}>
      {children}
    </EstatesContext.Provider>
  )
}

export default EstatesProvider

import React, { useContext } from "react"
import { EstatesContext } from "@context/estatesProvider"

const AllEstates = () => {
  const estates = useContext(EstatesContext)
  return <>{console.log(estates)}</>
}

export default AllEstates

我设法用

解决了这个问题

export const wrapPageElement = ({ element }) => {
  return <EstatesProvider>{element}</EstatesProvider>
}

const wrapRootElement = ({ element }) => {
  return <Layout>{element}</Layout>
}

export default wrapRootElement

不知道为什么会这样工作，有人可以告诉我吗？提供程序不能位于wrapRootElement中，这也会导致错误，这在Gatsby浏览器api文档中建议。

使用wrapPageElement的空查询结果

0 个答案: