开发者问题收集

由于 apollo-client 未定义，无法解构 GraphQL 查询？

2022-07-08
2296
javascript reactjs graphql apollo apollo-client

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

未捕获的 TypeError：无法解构'(0, apollo_client__WEBPACK_IMPORTED_MODULE_4 _.useQuery)(...)'的属性'slumpMedias'，因为它未定义。

上下文：

我正在为我的 React.js 项目设置后端，我正在使用 WordPress 和 GraphQl 作为无头 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);

我几乎可以肯定，因为当我对代码进行此更新并保存新文件时，浏览器会自动更新，我可以从控制台看到 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 库，但是，我已经按照演示尝试过这样做了。

有人知道问题可能是什么吗？

1个回答

数据 为 未定义 ，而查询仍在 加载 或出现 错误 。除非使用默认值，否则您无法在检查这些内容之前立即解构。

因此请写 

function Items() {

  const { loading, error, data } = useQuery(GET_ALL_MEDIA);
  console.log(loading, error, data);

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

  const { slumpMedias: { edges } } = data;
  console.log(edges);
  return <div>Hello</div>;
}
Bergi
2022-07-08