liaosw97 - 为 Apollo 操作实现自定义 hooks：
- 封装复杂逻辑：将重复的 Apollo Client 操作（如查询、变更、订阅）和相关逻辑封装到自定义 hooks 中，提高代码复用性。
- 统一错误处理和加载状态：在自定义 hooks 中统一处理加载（
loading）、错误（error）状态和数据（data），简化组件层的逻辑。 - 类型安全：结合 TypeScript 为自定义 hooks 定义清晰的输入（变量）和输出（数据、状态）类型，确保类型安全。
- 可测试性：设计易于测试的自定义 hooks，方便进行单元测试和集成测试。
- 示例：
// 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 }; };
Apollo GRAPHQL Apollo Custom Hooks by liaosw97 · 932236c
npx skillmds@latest add liaosw97/apollo-graphql-apollo-custom-hooks File contents
---name: apollo-graphql-apollo-custom-hooksdescription: 指导为 Apollo 操作实现自定义 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 }; }; ```
liaosw97/awesome-rules-skills/tree/main/plugins/apollo-graphql/skills/apollo-graphql-apollo-custom-hooks commit 932236c7b1
Frequently asked questions
Run npx skillmds@latest add liaosw97/apollo-graphql-apollo-custom-hooks in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
指导为 Apollo 操作实现自定义 hooks It is listed under Integrations & APIs on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.