apollo usequery 导致未定义的错误

Posted 2023-03-08

【中文标题】apollo usequery 导致未定义的错误

【英文标题】：apollo usequery causes undefined errors

【发布时间】：2021-10-27 11:19:11

【问题描述】：

我有一个相当简单的组件：

import useQuery from '@apollo/react-hooks';
import resolvers from '../../resolvers';

const DashboardComponent = () => 
  const data = useQuery(resolvers.ReturnAllMovies);
  const movies = data?.movies;

  return (
    <React.Fragment>
      <DashboardMovieOverviewMenu />
       movies?.length > 0 ? <MovieOverview /> : null 
    </React.Fragment>
  );
;

export default DashboardComponent;

这里的问题是usequery 两次加载组件，但第一次加载时data 未定义。因此，如果要检查 const movies 中是否有任何电影，我会收到 movies 未定义的错误。这是有道理的，因为数据尚未加载。我使用? 语法进行空检查解决了这个问题，但必须有更简单的方法对吧？或者我应该检查每个组件中的加载是否为真/假？

【问题讨论】：

如果你只想渲染一个空列表而不需要很多检查，设置合理的默认值：const data: movies = [] = = useQuery。现在movies 可以立即作为数组使用。

【参考方案1】：

您可以使用loading。在进行 API 调用时，数据将是 undefined。和loading 设置为true。这在不添加optional chaining(?) 的情况下有效。但建议保留?

import useQuery from '@apollo/react-hooks';
import resolvers from '../../resolvers';

const DashboardComponent = () => 
  const data, loading  = useQuery(resolvers.ReturnAllMovies);
  if(loading)
   return "Loading...";
  
  const movies = data.movies;

  return (
    <React.Fragment>
      <DashboardMovieOverviewMenu />
       movies?.length > 0 ? <MovieOverview /> : null 
    </React.Fragment>
  );
;

export default DashboardComponent;

此文档清楚地解释了如何处理加载和错误情况 -> executing-a-query

【讨论】：

这很烦人。

@PeterBoomsma 只是不同的状态及时，data 开始时未定义，加载后可用（下一次渲染） - 文档/tuts 中有明确说明

我明白这一点，但仍然很烦人，您必须进行空值检查等才能捕获它。

不需要空值检查 - 只是数据就绪检查（!loading 或 if(data) 或 data &&）