使用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。