Question

apollo usequery 导致未定义的错误

2021-08-27

1280

reactjs graphql apollo-client react-apollo

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

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