使用useLazyQuery来代替useQuery。useLazyQuery可以在需要查询时手动触发查询,以避免在渲染时多次自动执行查询。
代码示例:
import { useLazyQuery } from '@apollo/client';
function MyComponent() {
const [getMyData, { loading, data }] = useLazyQuery(GET_MY_DATA_QUERY);
useEffect(() => {
getMyData();
}, [getMyData]);
if (loading) {
return Loading...;
}
return (
{data && data.myData.map(item => - {item.name}
)}
);
}