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

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

apollo usequery 导致未定义的错误

apollo usequery causes undefined errors

reactjs

graphql

apollo-client

react-apollo