# Apollo GRAPHQL Apollo Custom Hooks

> 指导为 Apollo 操作实现自定义 hooks

- Skill: `liaosw97/apollo-graphql-apollo-custom-hooks` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/apollo-graphql-apollo-custom-hooks`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/apollo-graphql-apollo-custom-hooks/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/apollo-graphql-apollo-custom-hooks

---


- **为 Apollo 操作实现自定义 hooks**：
  - **封装复杂逻辑**：将重复的 Apollo Client 操作（如查询、变更、订阅）和相关逻辑封装到自定义 hooks 中，提高代码复用性。
  - **统一错误处理和加载状态**：在自定义 hooks 中统一处理加载（`loading`）、错误（`error`）状态和数据（`data`），简化组件层的逻辑。
  - **类型安全**：结合 TypeScript 为自定义 hooks 定义清晰的输入（变量）和输出（数据、状态）类型，确保类型安全。
  - **可测试性**：设计易于测试的自定义 hooks，方便进行单元测试和集成测试。
  - **示例**：
    ```typescript
    // hooks/useUser.ts
    import { useQuery, gql } from '@apollo/client';

    const GET_USER_QUERY = gql`
      query GetUser($id: ID!) {
        user(id: $id) {
          id
          name
          email
        }
      }
    `;

    export const useUser = (id: string) => {
      const { data, loading, error } = useQuery(GET_USER_QUERY, {
        variables: { id },
      });

      return { user: data?.user, loading, error };
    };
    ```