apollo-client by apollographql/skills
npx skills add https://github.com/apollographql/skills --skill apollo-clientApollo Client 是一个全面的 JavaScript 状态管理库,使您能够使用 GraphQL 管理本地和远程数据。版本 4.x 带来了改进的缓存、更好的 TypeScript 支持以及与 React 19 的兼容性。
选择与您的应用程序设置匹配的集成指南:
每个指南都包含安装步骤、配置以及针对该环境优化的框架特定模式。
import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client/react";
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
`;
function UserProfile({ userId }: { userId: string }) {
const { loading, error, data, dataState } = useQuery(GET_USER, {
variables: { id: userId },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
// TypeScript: 与仅检查 data 相比,dataState === "ready" 提供了更好的类型收窄
return <div>{data.user.name}</div>;
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { gql } from "@apollo/client";
import { useMutation } from "@apollo/client/react";
const CREATE_USER = gql`
mutation CreateUser($input: CreateUserInput!) {
createUser(input: $input) {
id
name
}
}
`;
function CreateUserForm() {
const [createUser, { loading, error }] = useMutation(CREATE_USER);
const handleSubmit = async (name: string) => {
await createUser({ variables: { input: { name } } });
};
return <button onClick={() => handleSubmit("John")}>Create User</button>;
}
import { Suspense } from "react";
import { useSuspenseQuery } from "@apollo/client/react";
function UserProfile({ userId }: { userId: string }) {
const { data } = useSuspenseQuery(GET_USER, {
variables: { id: userId },
});
return <div>{data.user.name}</div>;
}
function App() {
return (
<Suspense fallback={<p>Loading user...</p>}>
<UserProfile userId="1" />
</Suspense>
);
}
特定主题的详细文档:
useFragment 或 useSuspenseFragment。使用 @defer 允许首屏以下的慢速字段稍后流式加载,避免阻塞页面加载。useQuery、useLazyQuery)时,始终在 UI 中处理 loading 和 error 状态。使用 Suspense 钩子(useSuspenseQuery、useBackgroundQuery)时,React 通过 <Suspense> 边界和错误边界处理此问题。fetchPolicy 控制每个查询的缓存行为refetchQueries(首选让缓存自动更新)id 字段的类型配置 keyFieldskeyFields: false 来禁用规范化typePolicies 进行分页和计算字段fetchPolicy@defer 进行延迟查询部分的增量交付,使用 @stream 进行列表字段的流式传输(@stream 在 Apollo Client 4.1+ 中可用)useSuspenseQuery、useBackgroundQuery),以获得更好的加载状态处理和代码简洁性ApolloProvider 包装您的应用useSuspenseQuery、useBackgroundQuery)以获得更好的开发者体验cache-first,对于实时数据首选 network-only每周安装量
1.1K
仓库
GitHub 星标
31
首次出现
2026年1月23日
安全审计
安装于
github-copilot856
opencode842
codex823
gemini-cli792
claude-code780
amp725
Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Version 4.x brings improved caching, better TypeScript support, and React 19 compatibility.
Choose the integration guide that matches your application setup:
Each guide includes installation steps, configuration, and framework-specific patterns optimized for that environment.
import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client/react";
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
`;
function UserProfile({ userId }: { userId: string }) {
const { loading, error, data, dataState } = useQuery(GET_USER, {
variables: { id: userId },
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
// TypeScript: dataState === "ready" provides better type narrowing than just checking data
return <div>{data.user.name}</div>;
}
import { gql } from "@apollo/client";
import { useMutation } from "@apollo/client/react";
const CREATE_USER = gql`
mutation CreateUser($input: CreateUserInput!) {
createUser(input: $input) {
id
name
}
}
`;
function CreateUserForm() {
const [createUser, { loading, error }] = useMutation(CREATE_USER);
const handleSubmit = async (name: string) => {
await createUser({ variables: { input: { name } } });
};
return <button onClick={() => handleSubmit("John")}>Create User</button>;
}
import { Suspense } from "react";
import { useSuspenseQuery } from "@apollo/client/react";
function UserProfile({ userId }: { userId: string }) {
const { data } = useSuspenseQuery(GET_USER, {
variables: { id: userId },
});
return <div>{data.user.name}</div>;
}
function App() {
return (
<Suspense fallback={<p>Loading user...</p>}>
<UserProfile userId="1" />
</Suspense>
);
}
Detailed documentation for specific topics:
useFragment or useSuspenseFragment in all non-page-components. Use @defer to allow slow fields below the fold to stream in later and avoid blocking the page load.loading and error states in UI when using non-suspenseful hooks (useQuery, useLazyQuery). When using Suspense hooks (useSuspenseQuery, ), React handles this through boundaries and error boundaries.refetchQueries sparingly (prefer letting the cache update automatically)keyFields for types without id fieldkeyFields: false for types that don't include an identifier and are meant to group related fields under the parenttypePolicies for pagination and computed fieldsfetchPolicy per use case@defer for incremental delivery of deferred query parts, and @stream for streaming list fields (@stream available in Apollo Client 4.1+)useSuspenseQuery, useBackgroundQuery) in modern applications for better loading state handling and code simplicityApolloProvideruseSuspenseQuery, useBackgroundQuery) in modern applications for better DXcache-first for read-heavy data, network-only for real-time dataWeekly Installs
1.1K
Repository
GitHub Stars
31
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot856
opencode842
codex823
gemini-cli792
claude-code780
amp725
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
useBackgroundQuery<Suspense>fetchPolicy to control cache behavior per query