IT技术 - 无法解构 GraphQL 查询，因为 apollo-client 未定义？ - 吾爱随笔录

我正在寻找与错误消息有关的问题：

未捕获的类型错误：无法解构“（0，apollo_client__WEBPACK_IMPORTED_MODULE_4 _.useQuery）（...）”的属性“slumpMedias”，因为它未定义。

语境：

我正在为我的 React.js 项目设置后端，我使用 WordPress 和 GraphQl 作为 Headless CMS。据我所知，我的应用程序已正确设置，我正在使用 Apollo 客户端和 gql 进行查询。

这是最后一次工作迭代的代码：

import { useQuery } from "@apollo/client";
import gql from "graphql-tag";

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);
  console.log(data);

  if (loading) return <h1>Loading..</h1>;
  if (error) return <h1>Loading..</h1>;

  return <div>Hello</div>;
}

数据到控制台的输出如下所示：

>slumpMedias: {…}}
 >slumpMedias: 
    >edges: (17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
     >[[Prototype]]: Object
  >[[Prototype]]: Object

问题：

现在我正在成功地调用 API，我想将我的对象解构为更清晰、更易于管理的部分。同样，我基本上可以肯定我这样做是正确的。

这是新的查询：

  const {
    loading,
    error,
    data: {
      slumpMedias: { edges },
    },
  } = useQuery(GET_ALL_MEDIA);

 console.log(edges);

我几乎可以肯定，因为当我对我的代码进行此更新并保存我的新文件时，浏览器会自动更新，我可以从控制台看到边缘的输出，这是预期的行为

这里：

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

然而，当我刷新页面时，我遇到了一个成功的编译但一个完全白屏。错误输出如下：

Items.js:34 Uncaught TypeError: Cannot destructure property 'slumpMedias' of '(0 , _apollo_client__WEBPACK_IMPORTED_MODULE_4__.useQuery)(...)' as it is undefined.
    at Items (Items.js:34: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)

我已经尝试按照一些决议进行一些研究，遵循此处和此处的建议，建议参考 graphql-tag 库，但是，我已经尝试过这样做。

有谁知道问题可能是什么？