How do I install the Apollo GRAPHQL GRAPHQL Apollo Client Usage skill?

Run npx skillmds@latest add liaosw97/apollo-graphql-graphql-apollo-client-usage 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.

What does the Apollo GRAPHQL GRAPHQL Apollo Client Usage skill do?

应用 GraphQL 和 Apollo Client 使用的最佳实践，包括状态管理、数据获取和错误处理 It is listed under Integrations & APIs on SkillMD.

Is Apollo GRAPHQL GRAPHQL Apollo Client Usage safe to use?

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.

Which AI agents work with Apollo GRAPHQL GRAPHQL Apollo Client Usage?

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.

Is Apollo GRAPHQL GRAPHQL Apollo Client Usage free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Apollo GRAPHQL GRAPHQL Apollo Client Usage?

liaosw97 (@liaosw97) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Apollo GRAPHQL GRAPHQL Apollo Client Usage by liaosw97

Name: Apollo GRAPHQL GRAPHQL Apollo Client Usage
Rating: 4.2 (5 reviews)
Author: liaosw97

File contents

使用 Apollo Client 进行状态管理和数据获取：
- 利用 useQuery Hook 进行数据查询，处理加载状态、错误和数据。
- 使用 useMutation Hook 执行数据修改操作，并在成功后更新缓存或重新获取相关数据。
- 结合 useSubscription Hook 实现实时数据更新。

实现查询组件进行数据获取：

推荐使用基于 Hook 的方式（如 useQuery）而非旧版 Query 组件，以更好地利用 React Hooks 的特性。

示例：

import { useQuery, gql } from '@apollo/client';

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      text
      completed
    }
  }
`;

function TodosList() {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :({error.message}</p>;

  return (
    <ul>
      {data.todos.map(({ id, text, completed }) => (
        <li key={id} style={{ textDecoration: completed ? 'line-through' : 'none' }}>
          {text}
        </li>
      ))}
    </ul>
  );
}

利用变更操作进行数据修改：
- 使用 useMutation Hook 发送变更请求，并利用 update 函数或 refetchQueries 选项在变更成功后更新 Apollo 缓存，确保 UI 状态与后端数据同步。
使用片段创建可重用的查询部分：
- 定义 GraphQL 片段（Fragments）来封装可重用的字段集，提高查询的可维护性和复用性。
- 示例：
```
fragment UserFields on User {
  id
  name
  email
}

query GetUserDetails($id: ID!) {
  user(id: $id) {
    ...UserFields
  }
}
```
实现适当的错误处理和加载状态：
- 在组件中处理 loading 和 error 状态，向用户提供友好的加载指示和错误反馈。
- 可以结合 ErrorLink 或自定义错误边界（Error Boundaries）来集中处理 GraphQL 错误。

---name: apollo-graphql-graphql-apollo-client-usagedescription: 应用 GraphQL 和 Apollo Client 使用的最佳实践，包括状态管理、数据获取和错误处理---- **使用 Apollo Client 进行状态管理和数据获取**： - 利用 `useQuery` Hook 进行数据查询，处理加载状态、错误和数据。 - 使用 `useMutation` Hook 执行数据修改操作，并在成功后更新缓存或重新获取相关数据。 - 结合 `useSubscription` Hook 实现实时数据更新。- **实现查询组件进行数据获取**： - 推荐使用基于 Hook 的方式（如 `useQuery`）而非旧版 `Query` 组件，以更好地利用 React Hooks 的特性。 - 示例： ```typescript import { useQuery, gql } from '@apollo/client'; const GET_TODOS = gql` query GetTodos { todos { id text completed } } `; function TodosList() { const { loading, error, data } = useQuery(GET_TODOS); if (loading) return <p>Loading...</p>; if (error) return <p>Error :({error.message}</p>; return ( <ul> {data.todos.map(({ id, text, completed }) => ( <li key={id} style={{ textDecoration: completed ? 'line-through' : 'none' }}> {text} </li> ))} </ul> ); } ```- **利用变更操作进行数据修改**： - 使用 `useMutation` Hook 发送变更请求，并利用 `update` 函数或 `refetchQueries` 选项在变更成功后更新 Apollo 缓存，确保 UI 状态与后端数据同步。- **使用片段创建可重用的查询部分**： - 定义 GraphQL 片段（Fragments）来封装可重用的字段集，提高查询的可维护性和复用性。 - 示例： ```graphql fragment UserFields on User { id name email } query GetUserDetails($id: ID!) { user(id: $id) { ...UserFields } } ```- **实现适当的错误处理和加载状态**： - 在组件中处理 `loading` 和 `error` 状态，向用户提供友好的加载指示和错误反馈。 - 可以结合 `ErrorLink` 或自定义错误边界（Error Boundaries）来集中处理 GraphQL 错误。

Frequently asked questions

Apollo GRAPHQL GRAPHQL Apollo Client Usage