Gatsby：无法使用图形查询导入组件答案

【问题标题】：Gatsby: Unable to Import Component with Graph QueryGatsby：无法使用图形查询导入组件
【发布时间】：2021-09-14 15:06:27
【问题描述】：

我正在尝试编写组件来查询我的 CMS 以获取标签列表并构建前 6 个标签的计数并将它们作为可点击链接输出。这是我目前所拥有的：

import { graphql, StaticQuery, Link } from "gatsby"
import React from "react"
import Layout from "../layouts/Layout"
import kebabCase from "lodash/kebabCase"
const _ = require("lodash")


const TopTools = props => {
  const toolNodes = props.data.portfolio.nodes
  let tags = []
  let tools = []
  toolNodes.map(toolNode => tags.push(...toolNode.tools))
  tags = tags.concat(tools)
  const x = tags.reduce(
    (acc, curr) => ((acc[curr] = (acc[curr] || 0) + 1), acc),
    {}
  )
  let toptools = []
  for (let tool in x) {
    toptools .push([tool, x[tool]])
  }
  toptools = toptools .sort(function(a, b) {
    return b[1] - a[1]
  })
  toptools = toptools.slice(0, 6)
 
  return (
    <Layout>
      <div>
        {toptools.map((tag, i) => [
          <Link to={`/tools/${kebabCase(tag[0])}/`}>
                <h4>
                  {tag[0]}
                </h4>
          </Link>,
        ])}
      </div>
    </Layout>
  )
}

export default TopTools;
export const query = graphql`
  {
    portfolio: allContentfulPortfolio {
      nodes {
        tools
      }
    }
  }
`

当我尝试像这样将其导入我的页面时：

import TopTools from "../components/TopTools"

并使用它：

<TopTools/>

我收到以下错误：

TypeError: Cannot read property 'portfolio' of undefined
TopTools
   5 | const _ = require("lodash")
   6 | 
   7 | const TopTools = props => {
>  8 |   const toolNodes = props.data.portfolio.nodes
   9 |   let tags = []
  10 |   let tools = []
  11 |   toolNodes.map(toolNode => tags.push(...toolNode.tools))

我不明白为什么会这样？我把这个脚本变成了它自己的“页面”，我可以看到正在输出的链接。当我尝试将其作为组件导入时，为什么这不起作用？我没有使用 GraphQL 查询吗？

【问题讨论】：

标签： javascript reactjs graphql gatsby

【解决方案1】：

这可以通过使用useStaticQuery 来解决。我将脚本改写如下：

import { graphql, Link , useStaticQuery} from "gatsby"
import React from "react"
import Layout from "../layouts/Layout"
import kebabCase from "lodash/kebabCase"
const _ = require("lodash")

const Top = () => {
  const data = useStaticQuery(graphql`
  query {
  allContentfulPortfolio {
    nodes {
      tools
    }
  }
}
  `)
  const toolNodes = data.allContentfulPortfolio.nodes
  let tags = []
  let tools = []
  toolNodes.map(toolNode => tags.push(...toolNode.tools))
  tags = tags.concat(tools)
  const x = tags.reduce(
    (acc, curr) => ((acc[curr] = (acc[curr] || 0) + 1), acc),
    {}
  )
  let sortable = []
  for (let tool in x) {
    sortable.push([tool, x[tool]])
  }
  sortable = sortable.sort(function(a, b) {
    return b[1] - a[1]
  })
  sortable = sortable.slice(0, 6)
  return (
    <div>
      {sortable.map((tag, i) => [
        <Link to={`/tools/${kebabCase(tag[0])}/`}>
              <h4>
                {tag[0]}
              </h4>
        </Link>,
      ])}
    </div>
  )
}

export default Top;

【讨论】：