apollo usequery 导致未定义的错误

Question

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

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 未定义的错误。这是有道理的，因为数据尚未加载。我使用? 语法进行空检查解决了这个问题，但必须有更简单的方法对吧？或者我应该检查每个组件中的加载是否为真/假？

Answer 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