React中使用Apollo Client是否需用外观层包装查询？

答案是建议封装，但并非强制，是否封装取决于你的项目规模、复杂度和长期维护需求，下面具体说原因和实现方式：

为什么要封装？ #

• 统一数据处理与错误逻辑：Apollo返回的data、loading、error结构固定，但每个组件可能需要不同的数据格式，或者统一的错误提示（比如全局toast）。封装后可以把这些逻辑集中处理，避免组件里重复写格式化和错误处理代码。
• 隔离底层实现细节：组件只需要关心“获取国家列表”这类业务逻辑，不用知道背后是GraphQL查询、具体的查询语句，甚至以后换成REST API，只要修改封装的钩子，组件代码完全不用动——这和你之前用Axios时做外观层的思路一致。
• 复用通用配置：比如某些查询需要固定的fetchPolicy、变量默认值，或者需要和其他状态（比如用户权限）结合，封装后可以把这些通用逻辑抽离出来，不用每个useQuery都重复配置。

怎么封装？最常用的方式是自定义Hook #

这是React生态里最自然的封装方式，把Apollo的useQuery/useMutation包裹一层，对外暴露业务友好的接口：

示例：封装国家列表查询Hook #

// src/hooks/useCountries.js
import { useQuery, gql } from '@apollo/client';

// 把查询语句单独抽离，方便管理
const GET_COUNTRIES_QUERY = gql`
  query GetCountries {
    countries {
      code
      name
      continent {
        name
      }
    }
  }
`;

export function useCountries() {
  const { data, loading, error } = useQuery(GET_COUNTRIES_QUERY, {
    // 统一配置缓存策略
    fetchPolicy: 'cache-first',
  });

  // 统一格式化数据，适配组件需要的结构
  const formattedCountries = data?.countries.map(country => ({
    id: country.code,
    name: country.name,
    region: country.continent.name,
  })) || [];

  // 统一错误处理，比如全局错误提示
  if (error) {
    console.error('获取国家列表失败:', error);
    // 这里可以调用项目中的全局通知组件，比如：
    // toast.error('加载国家列表失败，请稍后重试');
  }

  // 对外暴露业务化的状态，而非Apollo原始状态
  return {
    countries: formattedCountries,
    isLoading: loading,
    hasError: !!error,
  };
}

组件中使用封装后的Hook #

// src/components/CountryList.js
import { useCountries } from '../hooks/useCountries';

export function CountryList() {
  const { countries, isLoading, hasError } = useCountries();

  if (isLoading) return <div>加载中...</div>;
  if (hasError) return <div>加载失败，请稍后重试</div>;

  return (
    <ul>
      {countries.map(country => (
        <li key={country.id}>{country.name}（{country.region}）</li>
      ))}
    </ul>
  );
}

什么时候可以不用封装？ #

如果是小型项目，组件数量少，查询逻辑简单（不需要复杂的数据格式化或错误处理），直接使用useQuery反而更高效，不用额外增加封装成本。

其他补充最佳实践 #

• 把GraphQL的查询、变更语句单独放在queries/、mutations/目录下，不要内嵌在组件或Hook里，方便统一管理和复用。
• 利用Apollo Client自带的缓存能力，不用自己额外做缓存层，但封装时可以统一配置缓存策略（比如cache-first、network-only）。
• 对于useMutation，同样可以封装自定义Hook，统一处理提交逻辑、加载状态和错误提示。

内容的提问来源于stack exchange，提问作者yaminoyuki