Javascript Graphql查询结果在UI中正确返回，但数据显示为；“未定义”；内部应用程序_Javascript_Json_Reactjs_Graphql_Gatsby

Javascript Graphql查询结果在UI中正确返回，但数据显示为；“未定义”；内部应用程序

javascript json reactjs graphql gatsby

Javascript Graphql查询结果在UI中正确返回，但数据显示为；“未定义”；内部应用程序,javascript,json,reactjs,graphql,gatsby,Javascript,Json,Reactjs,Graphql,Gatsby,我正在从事一个盖茨比项目，在这个项目中，我有一个来自JSON数据的Graphql查询，该数据正确返回Graph IU中的所有数据，我甚至可以将其注销，并在浏览器devtools中查看结果。但出于某种原因，当我将Graphql字段缩短为使用短名称时，只有一部分数据通过，正如您在下面的代码中所看到的：以下是StaticQuery组件： import { useStaticQuery, graphql } from "gatsby" export const UseFooter

我正在从事一个盖茨比项目，在这个项目中，我有一个来自JSON数据的Graphql查询，该数据正确返回Graph IU中的所有数据，我甚至可以将其注销，并在浏览器devtools中查看结果。但出于某种原因，当我将Graphql字段缩短为使用短名称时，只有一部分数据通过，正如您在下面的代码中所看到的：

以下是StaticQuery组件：

import { useStaticQuery, graphql } from "gatsby"

export const UseFooterDataQuery = () => {
  const allFooterData = useStaticQuery(graphql`
    query FooterDataQuery {
      allDataJson {
        edges {
          node {
            id
            title
            url {
              id
              linkName
              linkUrl
            }
          }
        }
      }
    }
  `)
  return allFooterData
}

以下是图形QL IU中相同查询的结果：

{
  "data": {
    "allDataJson": {
      "edges": [
        {
          "node": {
            "id": "8e2be307-9298-52b2-9a78-cf1a9dfa5b35",
            "title": "Features",
            "url": [
              {
                "id": "022",
                "linkName": "Version Control",
                "linkUrl": "version-control"
              },
              {
                "id": "023",
                "linkName": "Design Collaboration",
                "linkUrl": "design-collaboration"
              },
              {
                "id": "024",
                "linkName": "Developer Handoff",
                "linkUrl": "developer-handoff"
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {}
}

这是我的功能组件。请参见，我正在控制台上记录UseFooterDataQuery（）函数和返回allFooterList，其中我只缩短了Graphql字段名：

import React from "react"
import { Link } from "gatsby"
import { UseFooterDataQuery } from "../hooks/UseFooterDataQuery"

export default function Footer() {
  const getAllFooterList = () => {
    const allFooterList = []
    const allFooter = UseFooterDataQuery()
    allFooter.allDataJson.edges.forEach(footerEdge => {
      allFooterList.push({
        id: footerEdge.node.id,
        title: footerEdge.node.title,
        linkName: footerEdge.node.url.linkName,
        linkUrl: footerEdge.node.url.linkUrl,
        linkId: footerEdge.node.url.id,
      })
    })
    return allFooterList
  }

  const allFooterList = getAllFooterList()

  console.log(UseFooterDataQuery())
  console.log(allFooterList)

  return (
    <FooterSection>
      <FooterContainer>
        {allFooterList.map(data => {
          return (
            <div key={data.id}>
              <h3>{data.title}</h3>
              <ul>
                <li>
                  <Link to={`/${data.linkUrl}`}>{data.linkName}</Link>
                </li>
              </ul>
            </div>
          )
        })}
      </FooterContainer>
      <div>
        © {new Date().getFullYear()}, Built with
        {` `}
        <a href="https://www.gatsbyjs.com">Gatsby</a>
      </div>
    </FooterSection>
  )
}

从“React”导入React
从“盖茨比”导入{Link}
从“./hooks/UseFooterDataQuery”导入{UseFooterDataQuery}
导出默认函数页脚（）{
常量getAllFooterList=（）=>{
常量allFooterList=[]
const allFooter=UseFooterDataQuery（）
allFooter.allDataJson.edges.forEach（footerEdge=>{
allFooterList.push({
id:footerEdge.node.id，
标题：footerEdge.node.title，
linkName:footerEdge.node.url.linkName，
linkUrl:footerEdge.node.url.linkUrl，
linkId:footerEdge.node.url.id，
})
})
返回所有页脚列表
}
const allFooterList=getAllFooterList（）
console.log（UseFooterDataQuery（））
console.log（allFooterList）
返回(
{allFooterList.map（数据=>{
返回(
{data.title}


{data.linkName}


)
})}
{new Date（）.getFullYear（）}，使用
{` `}
)
}

这里返回上面的控制台日志。如您所见，UseFooterDataQuery（）函数返回了所有数据，但我无法确定返回allFooterList时会发生什么情况，其中我的数据linkId、linkName和linkUrl未定义

{…}
allDataJson: {…}
edges: (1) […]
0: {…}
node: {…}
id: "8e2be307-9298-52b2-9a78-cf1a9dfa5b35"
title: "Features"
url: (3) […]
0: Object { id: "022", linkName: "Version Control", linkUrl: "version-control" }
1: Object { id: "023", linkName: "Design Collaboration", linkUrl: "design-collaboration" }
2: Object { id: "024", linkName: "Developer Handoff", linkUrl: "developer-handoff" }
length: 3
<prototype>: Array []
<prototype>: Object { … }
<prototype>: Object { … }
length: 1
<prototype>: Array []
<prototype>: Object { … }
<prototype>: {…

{…}
allDataJson:{…}
边缘：（1）[…]
0: {…}
节点：{…}
id:“8e2be307-9298-52b2-9a78-cf1a9dfa5b35”
标题：“特征”
网址：（3）[…]
0:对象{id:“022”，linkName:“版本控制”，linkUrl:“版本控制”}
1：对象{id:“023”，linkName:“设计协作”，linkUrl:“设计协作”}
2：对象{id:“024”，linkName:“开发者切换”，linkUrl:“开发者切换”}
长度：3
：数组[]
：对象{…}
：对象{…}
长度：1
：数组[]
：对象{…}
: {…

allFooterListconsole.log返回：

0: {…}
id: "8e2be307-9298-52b2-9a78-cf1a9dfa5b35"
linkId: undefined
linkName: undefined
linkUrl: undefined
title: "Features"
<prototype>: Object { … }
length: 1
<prototype>: [

0:{…}
id:“8e2be307-9298-52b2-9a78-cf1a9dfa5b35”
linkId:未定义
链接名称：未定义
链接URL：未定义
标题：“特征”
：对象{…}
长度：1
: [

无需在状态或其他变量中复制数据 …您可以简单地“别名”它以缩短代码，如

constitems=allFooter.allDataJson.edges；

，

items.map（…

 {items.map( element => { element.node.id  // array element
 {items.map( {node} => { node.id   // destructured 'node' prop from array element
 {items.map( {node:footerItem} => { footerItem.id   // aliased/renamed destructured array element

在外部文件中定义“hook”
```
UseFooterDataQuery
```
几乎毫无用处……没有自定义逻辑，没有理由……只在单独的（
'footer.graphql'
）文件中定义graphql查询（搜索导入gql文件）
您应该使用
```
map
```
内部
```
map
```
，外部用于节点
```
id
```
和
```
title
```
，内部用于
```
url
```
：

const allFooterData=useStaticQuery（页脚查询）；
const items=allFooter.allDataJson.edges；
...
{items.map（{node}=>{
返回(
{node.title}
{node.url.map（（数据）=>{
返回(


{data.linkName}

@xadm，很好用！非常感谢！以下是调整后的情况：

import React from "react"
import { Link } from "gatsby"
import { UseFooterDataQuery } from "../hooks/UseFooterDataQuery"

export default function Footer() {
  const allFooterList = UseFooterDataQuery().allDataJson.edges

  // console.log(allFooterList, `==============> FOOTERLIST`)

  return (
    <div>
      <div>
        {allFooterList.map(({ node }) => {
          console.log(node, `==============> NODE`)
          return (
            <div key={node.id}>
              <h3>{node.title}</h3>
              {node.url.map(data => {
                console.log(data, `====================> DATA`)
                return (
                  <ul key={data.id}>
                    <li>
                      <Link to={`/${data.linkUrl}`}>{data.linkName}</Link>
                    </li>
                  </ul>
                )
              })}
            </div>
          )
        })}
      </div>
    </div>
  )
}

从“React”导入React
从“盖茨比”导入{Link}
从“./hooks/UseFooterDataQuery”导入{UseFooterDataQuery}
导出默认函数页脚（）{
const allFooterList=UseFooterDataQuery（）.allDataJson.edges
//日志（allFooterList，`=======>FOOTERLIST`）
返回(
{allFooterList.map（{node}）=>{
console.log（节点，`=============>node`）
返回(
{node.title}
{node.url.map（数据=>{
console.log（数据，`===================>data`）
返回(


{data.linkName}


)
})}
)
})}
)
}

以下是console.log：

{…}                        ==============> NODE
id: "8e2be307-9298-52b2-9a78-cf1a9dfa5b35"
title: "Features"
url: Array(3) [ {…}, {…}, {…} ]
<prototype>: Object { … }
---------------------------------------------------
{…}                     ====================> DATA
id: "022"
linkName: "Version Control"
linkUrl: "version-control"
<prototype>: Object { … }
---------------------------------------------------
{…}                        ====================> DATA
id: "023"
linkName: "Design Collaboration"
linkUrl: "design-collaboration"
<prototype>: Object { … }
---------------------------------------------------
{…}                        ====================> DATA
id: "024"
linkName: "Developer Handoff"
linkUrl: "developer-handoff"
<prototype>: Object { … } 
---------------------------------------------------

{…}                        ==============> 节点
id:“8e2be307-9298-52b2-9a78-cf1a9dfa5b35”
标题：“特征”
url:数组（3）[{…}，{…}，{…}]
：对象{…}
---------------------------------------------------
{…}============================>数据
id:“022”
linkName:“版本控制”
链接URL:“版本控制”
：对象{…}
---------------------------------------------------
{…}                        ====================> 资料
id:“023”
linkName：“设计协作”
链接URL：“设计协作”
：对象{…}
---------------------------------------------------
{…}                        ====================> 资料
id:“024”
linkName:“开发人员切换”
链接URL:“开发”
{…}                        ==============> NODE
id: "8e2be307-9298-52b2-9a78-cf1a9dfa5b35"
title: "Features"
url: Array(3) [ {…}, {…}, {…} ]
<prototype>: Object { … }
---------------------------------------------------
{…}                     ====================> DATA
id: "022"
linkName: "Version Control"
linkUrl: "version-control"
<prototype>: Object { … }
---------------------------------------------------
{…}                        ====================> DATA
id: "023"
linkName: "Design Collaboration"
linkUrl: "design-collaboration"
<prototype>: Object { … }
---------------------------------------------------
{…}                        ====================> DATA
id: "024"
linkName: "Developer Handoff"
linkUrl: "developer-handoff"
<prototype>: Object { … } 
---------------------------------------------------