使用Apollo的组件重新渲染时,可以通过Apollo的Query组件来管理加载状态。以下是一个示例解决方法:
import React from 'react';
import { Query } from 'react-apollo';
import { gql } from 'apollo-boost';
const GET_DATA_QUERY = gql`
query GetData {
data {
// 查询的字段
}
}
`;
const MyComponent = () => (
{({ loading, error, data }) => {
if (loading) return Loading...;
if (error) return Error: {error.message};
// 渲染组件的逻辑
return (
{/* 使用从Apollo查询返回的数据进行渲染 */}
{data.field}
);
}}
);
export default MyComponent;
在上面的示例中,使用Apollo的Query组件来执行查询,并根据加载状态渲染不同的内容。当loading为true时,显示"Loading...",当error存在时,显示错误消息。当数据加载完成时,通过data字段来使用查询返回的数据进行渲染。
这种方式可以确保在组件重新渲染时正确地管理加载状态,并根据加载状态显示不同的UI。