apollo usequery 导致未定义的错误
apollo usequery causes undefined errors
我有一个相当简单的组件:
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?
您可以使用 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
我有一个相当简单的组件:
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?
您可以使用 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