为什么GraphQL引用在Object vs JSX中嵌入时会崩溃?

Question

我目前使用GraphQL来查询我的WordPress服务器，我使用作为后端。

一切都在工作，因为它应该到目前为止，这是我的graphQL查询:

const GET_ALL_MEDIA = gql`
query MyQuery {
slumpMedias(first: 100) {
edges {
node {
title
slumpMeta {
image {
mediaItemUrl
}
audio1 {
mediaItemUrl
}
}
}
}
}
}
`;

function Items() {
const { loading, error, data } = useQuery(GET_ALL_MEDIA);
return (
<div>
<h2>{data.slumpMedias.edges[5].node.title}</h2>
</div>
);
}

这个渲染完美，我可以看到正确的标题呈现在我面前。

现在我可以访问我需要的节点，我想开始在JSX上面构建一个新的数据结构。我唯一的问题是，当我开始构造这个对象并做相同的引用时，我的程序崩溃到一个空屏幕。

这是代码的区别:

function Items() {
const { loading, error, data } = useQuery(GET_ALL_MEDIA);
console.log(data);
const objects = [
{
id: 0,
title: data.slumpMedias.edges[6].node.title,
image: "/images/1.png",
sound: "https://google.com",
items: [],
},    
];

return <Display objects={objects}></Display>;
}

我注意到标题确实更新了，让我相信引用是正确的，只是在刷新时我遇到了一个空白屏幕。

错误信息:

Items.js:35 Uncaught TypeError: Cannot read properties of undefined (reading 'slumpMedias')
at Items (Items.js:35:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)
at performUnitOfWork (react-dom.development.js:26513:1)
at workLoopSync (react-dom.development.js:26422:1)

它怎么能突然无法读取WordPress上的自定义帖子类型时，我做了完全相同的参考，除了在JSX?

Answer 1

问题是由于操作顺序

data未定义，而查询仍在加载或有错误，下面是正确的语法:

不能解构GraphQL查询，因为apollo-client是未定义的?

我还修改了我在这个答案中的技术，以正确地解构对象