[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-apollo-graphql-apollo-client":3,"mdc-x0eqz4-key":37,"related-repo-apollo-graphql-apollo-client":2306,"related-org-apollo-graphql-apollo-client":2405},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":24,"repoUrl":25,"updatedAt":26,"license":27,"forks":28,"topics":29,"repo":32,"sourceUrl":35,"mdContent":36},"apollo-client","build React apps with Apollo Client","Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"apollo-graphql","Apollo GraphQL","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fapollo-graphql.png","apollographql",[13,17,20,21],{"name":14,"slug":15,"type":16},"React","react","tag",{"name":18,"slug":19,"type":16},"GraphQL","graphql",{"name":9,"slug":8,"type":16},{"name":22,"slug":23,"type":16},"Frontend","frontend",97,"https:\u002F\u002Fgithub.com\u002Fapollographql\u002Fskills","2026-04-06T18:01:12.268638","MIT",11,[30,31,19],"agent-skills","apollo",{"repoUrl":25,"stars":24,"forks":28,"topics":33,"description":34},[30,31,19],"Apollo GraphQL Agent Skills","https:\u002F\u002Fgithub.com\u002Fapollographql\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fapollo-client","---\nname: apollo-client\ndescription: >\n  Guide for building React applications with Apollo Client 4.x. Use this skill when:\n  (1) setting up Apollo Client in a React project,\n  (2) writing GraphQL queries or mutations with hooks,\n  (3) configuring caching or cache policies,\n  (4) managing local state with reactive variables,\n  (5) troubleshooting Apollo Client errors or performance issues.\nlicense: MIT\ncompatibility: React 18+, React 19 (Suspense\u002FRSC). Works with Next.js, Vite, CRA, and other React frameworks.\nmetadata:\n  author: apollographql\n  version: \"1.0.0\"\nallowed-tools: Bash(npm:*) Bash(npx:*) Bash(node:*) Read Write Edit Glob Grep\n---\n\n# Apollo Client 4.x Guide\n\nApollo 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.\n\n## Integration Guides\n\nChoose the integration guide that matches your application setup:\n\n- **[Client-Side Apps](references\u002Fintegration-client.md)** - For client-side React applications without SSR (Vite, Create React App, etc.)\n- **[Next.js App Router](references\u002Fintegration-nextjs.md)** - For Next.js applications using the App Router with React Server Components\n- **[React Router Framework Mode](references\u002Fintegration-react-router.md)** - For React Router 7 applications with streaming SSR\n- **[TanStack Start](references\u002Fintegration-tanstack-start.md)** - For TanStack Start applications with modern routing\n\nEach guide includes installation steps, configuration, and framework-specific patterns optimized for that environment.\n\n## Quick Reference\n\n### Basic Query\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n    }\n  }\n`;\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { loading, error, data, dataState } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n  if (error) return \u003Cp>Error: {error.message}\u003C\u002Fp>;\n\n  \u002F\u002F TypeScript note: for stricter type narrowing, you can also check `dataState === \"complete\"` before accessing data\n  return \u003Cdiv>{data?.user.name}\u003C\u002Fdiv>;\n}\n```\n\n### Basic Mutation\n\n```tsx\nimport { gql } from \"@apollo\u002Fclient\";\nimport { useMutation } from \"@apollo\u002Fclient\u002Freact\";\n\nconst CREATE_USER = gql`\n  mutation CreateUser($input: CreateUserInput!) {\n    createUser(input: $input) {\n      id\n      name\n    }\n  }\n`;\n\nfunction CreateUserForm() {\n  const [createUser, { loading, error }] = useMutation(CREATE_USER);\n\n  const handleSubmit = async (name: string) => {\n    await createUser({ variables: { input: { name } } });\n  };\n\n  return \u003Cbutton onClick={() => handleSubmit(\"John\")}>Create User\u003C\u002Fbutton>;\n}\n```\n\n### Suspense Query\n\n```tsx\nimport { Suspense } from \"react\";\nimport { useSuspenseQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data } = useSuspenseQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading user...\u003C\u002Fp>}>\n      \u003CUserProfile userId=\"1\" \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n## Reference Files\n\nDetailed documentation for specific topics:\n\n- [TypeScript Code Generation](references\u002Ftypescript-codegen.md) - GraphQL Code Generator setup for type-safe operations\n- [Queries](references\u002Fqueries.md) - useQuery, useLazyQuery, polling, refetching\n- [Suspense Hooks](references\u002Fsuspense-hooks.md) - useSuspenseQuery, useBackgroundQuery, useReadQuery, useLoadableQuery\n- [Mutations](references\u002Fmutations.md) - useMutation, optimistic UI, cache updates\n- [Fragments](references\u002Ffragments.md) - Fragment colocation, useFragment, useSuspenseFragment, data masking\n- [Caching](references\u002Fcaching.md) - InMemoryCache, typePolicies, cache manipulation\n- [State Management](references\u002Fstate-management.md) - Reactive variables, local state\n- [Error Handling](references\u002Ferror-handling.md) - Error policies, error links, retries\n- [Troubleshooting](references\u002Ftroubleshooting.md) - Common issues and solutions\n\n## Key Rules\n\n### Query Best Practices\n\n- **Each page should generally only have one query, composed from colocated fragments.** Use `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.\n- **Fragments are for colocation, not reuse.** Each fragment should describe exactly the data needs of a specific component, not be shared across components for common fields. See [Fragments reference](references\u002Ffragments.md) for details on fragment colocation and data masking.\n- Always handle `loading` and `error` states in UI when using non-suspenseful hooks (`useQuery`, `useLazyQuery`). When using Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`), React handles this through `\u003CSuspense>` boundaries and error boundaries.\n- Use `fetchPolicy` to control cache behavior per query\n- Use the TypeScript type server to look up documentation for functions and options (Apollo Client has extensive docblocks)\n\n### Mutation Best Practices\n\n- **If the schema permits, mutation return values should return everything necessary to update the cache.** Neither manual updates nor refetching should be necessary.\n- If the mutation response is insufficient, carefully weigh manual cache manipulation vs refetching. Manual updates risk missing server logic. Consider optimistic updates with a granular refetch if needed.\n- Handle errors gracefully in the UI\n- Use `refetchQueries` sparingly (prefer letting the cache update automatically)\n\n### Caching Best Practices\n\n- Configure `keyFields` for types without `id` field\n- Disable normalization by setting `keyFields: false` for types that don't include an identifier and are meant to group related fields under the parent\n- Use `typePolicies` for pagination and computed fields\n- Understand cache normalization to debug issues\n- **Enable [data masking](references\u002Ffragments.md#data-masking) for all new applications** - it prevents components from accessing fragment data they don't own, enforcing proper data boundaries and preventing over-rendering\n\n### Performance\n\n- Avoid over-fetching with proper field selection\n- Configure appropriate `fetchPolicy` per use case\n- Use `@defer` for incremental delivery of deferred query parts, and `@stream` for streaming list fields (`@stream` available in Apollo Client 4.1+)\n- **Prefer Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications** for better loading state handling and code simplicity\n\n## Ground Rules\n\n- ALWAYS use Apollo Client 4.x patterns (not v3 or earlier)\n- ALWAYS wrap your app with `ApolloProvider`\n- ALWAYS handle loading and error states when using non-suspenseful hooks\n- PREFER Suspense hooks (`useSuspenseQuery`, `useBackgroundQuery`) in modern applications for better DX\n- NEVER store Apollo Client in React state (use module-level or context)\n- PREFER `cache-first` for read-heavy data, `network-only` for real-time data\n- USE TypeScript for better type safety with GraphQL\n- IMPLEMENT proper cache updates instead of refetching entire queries\n- ADVISE the human steering you to look into Apollo DevTools when collaboratively debugging Apollo Client issues\n",{"data":38,"body":43},{"name":4,"description":6,"license":27,"compatibility":39,"metadata":40,"allowed-tools":42},"React 18+, React 19 (Suspense\u002FRSC). Works with Next.js, Vite, CRA, and other React frameworks.",{"author":11,"version":41},"1.0.0","Bash(npm:*) Bash(npx:*) Bash(node:*) Read Write Edit Glob Grep",{"type":44,"children":45},"root",[46,55,61,68,73,136,141,147,154,797,803,1298,1304,1762,1768,1773,1875,1881,1887,2017,2023,2058,2064,2136,2142,2211,2217,2300],{"type":47,"tag":48,"props":49,"children":51},"element","h1",{"id":50},"apollo-client-4x-guide",[52],{"type":53,"value":54},"text","Apollo Client 4.x Guide",{"type":47,"tag":56,"props":57,"children":58},"p",{},[59],{"type":53,"value":60},"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.",{"type":47,"tag":62,"props":63,"children":65},"h2",{"id":64},"integration-guides",[66],{"type":53,"value":67},"Integration Guides",{"type":47,"tag":56,"props":69,"children":70},{},[71],{"type":53,"value":72},"Choose the integration guide that matches your application setup:",{"type":47,"tag":74,"props":75,"children":76},"ul",{},[77,94,108,122],{"type":47,"tag":78,"props":79,"children":80},"li",{},[81,92],{"type":47,"tag":82,"props":83,"children":84},"strong",{},[85],{"type":47,"tag":86,"props":87,"children":89},"a",{"href":88},"references\u002Fintegration-client.md",[90],{"type":53,"value":91},"Client-Side Apps",{"type":53,"value":93}," - For client-side React applications without SSR (Vite, Create React App, etc.)",{"type":47,"tag":78,"props":95,"children":96},{},[97,106],{"type":47,"tag":82,"props":98,"children":99},{},[100],{"type":47,"tag":86,"props":101,"children":103},{"href":102},"references\u002Fintegration-nextjs.md",[104],{"type":53,"value":105},"Next.js App Router",{"type":53,"value":107}," - For Next.js applications using the App Router with React Server Components",{"type":47,"tag":78,"props":109,"children":110},{},[111,120],{"type":47,"tag":82,"props":112,"children":113},{},[114],{"type":47,"tag":86,"props":115,"children":117},{"href":116},"references\u002Fintegration-react-router.md",[118],{"type":53,"value":119},"React Router Framework Mode",{"type":53,"value":121}," - For React Router 7 applications with streaming SSR",{"type":47,"tag":78,"props":123,"children":124},{},[125,134],{"type":47,"tag":82,"props":126,"children":127},{},[128],{"type":47,"tag":86,"props":129,"children":131},{"href":130},"references\u002Fintegration-tanstack-start.md",[132],{"type":53,"value":133},"TanStack Start",{"type":53,"value":135}," - For TanStack Start applications with modern routing",{"type":47,"tag":56,"props":137,"children":138},{},[139],{"type":53,"value":140},"Each guide includes installation steps, configuration, and framework-specific patterns optimized for that environment.",{"type":47,"tag":62,"props":142,"children":144},{"id":143},"quick-reference",[145],{"type":53,"value":146},"Quick Reference",{"type":47,"tag":148,"props":149,"children":151},"h3",{"id":150},"basic-query",[152],{"type":53,"value":153},"Basic Query",{"type":47,"tag":155,"props":156,"children":161},"pre",{"className":157,"code":158,"language":159,"meta":160,"style":160},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { gql } from \"@apollo\u002Fclient\";\nimport { useQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nconst GET_USER = gql`\n  query GetUser($id: ID!) {\n    user(id: $id) {\n      id\n      name\n    }\n  }\n`;\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { loading, error, data, dataState } = useQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return \u003Cp>Loading...\u003C\u002Fp>;\n  if (error) return \u003Cp>Error: {error.message}\u003C\u002Fp>;\n\n  \u002F\u002F TypeScript note: for stricter type narrowing, you can also check `dataState === \"complete\"` before accessing data\n  return \u003Cdiv>{data?.user.name}\u003C\u002Fdiv>;\n}\n","tsx","",[162],{"type":47,"tag":163,"props":164,"children":165},"code",{"__ignoreMap":160},[166,221,263,273,303,312,321,330,339,348,357,369,377,437,514,549,567,575,637,711,719,729,788],{"type":47,"tag":167,"props":168,"children":171},"span",{"class":169,"line":170},"line",1,[172,178,184,190,195,200,205,211,216],{"type":47,"tag":167,"props":173,"children":175},{"style":174},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[176],{"type":53,"value":177},"import",{"type":47,"tag":167,"props":179,"children":181},{"style":180},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[182],{"type":53,"value":183}," {",{"type":47,"tag":167,"props":185,"children":187},{"style":186},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[188],{"type":53,"value":189}," gql",{"type":47,"tag":167,"props":191,"children":192},{"style":180},[193],{"type":53,"value":194}," }",{"type":47,"tag":167,"props":196,"children":197},{"style":174},[198],{"type":53,"value":199}," from",{"type":47,"tag":167,"props":201,"children":202},{"style":180},[203],{"type":53,"value":204}," \"",{"type":47,"tag":167,"props":206,"children":208},{"style":207},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[209],{"type":53,"value":210},"@apollo\u002Fclient",{"type":47,"tag":167,"props":212,"children":213},{"style":180},[214],{"type":53,"value":215},"\"",{"type":47,"tag":167,"props":217,"children":218},{"style":180},[219],{"type":53,"value":220},";\n",{"type":47,"tag":167,"props":222,"children":224},{"class":169,"line":223},2,[225,229,233,238,242,246,250,255,259],{"type":47,"tag":167,"props":226,"children":227},{"style":174},[228],{"type":53,"value":177},{"type":47,"tag":167,"props":230,"children":231},{"style":180},[232],{"type":53,"value":183},{"type":47,"tag":167,"props":234,"children":235},{"style":186},[236],{"type":53,"value":237}," useQuery",{"type":47,"tag":167,"props":239,"children":240},{"style":180},[241],{"type":53,"value":194},{"type":47,"tag":167,"props":243,"children":244},{"style":174},[245],{"type":53,"value":199},{"type":47,"tag":167,"props":247,"children":248},{"style":180},[249],{"type":53,"value":204},{"type":47,"tag":167,"props":251,"children":252},{"style":207},[253],{"type":53,"value":254},"@apollo\u002Fclient\u002Freact",{"type":47,"tag":167,"props":256,"children":257},{"style":180},[258],{"type":53,"value":215},{"type":47,"tag":167,"props":260,"children":261},{"style":180},[262],{"type":53,"value":220},{"type":47,"tag":167,"props":264,"children":266},{"class":169,"line":265},3,[267],{"type":47,"tag":167,"props":268,"children":270},{"emptyLinePlaceholder":269},true,[271],{"type":53,"value":272},"\n",{"type":47,"tag":167,"props":274,"children":276},{"class":169,"line":275},4,[277,283,288,293,298],{"type":47,"tag":167,"props":278,"children":280},{"style":279},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[281],{"type":53,"value":282},"const",{"type":47,"tag":167,"props":284,"children":285},{"style":186},[286],{"type":53,"value":287}," GET_USER ",{"type":47,"tag":167,"props":289,"children":290},{"style":180},[291],{"type":53,"value":292},"=",{"type":47,"tag":167,"props":294,"children":296},{"style":295},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[297],{"type":53,"value":189},{"type":47,"tag":167,"props":299,"children":300},{"style":180},[301],{"type":53,"value":302},"`\n",{"type":47,"tag":167,"props":304,"children":306},{"class":169,"line":305},5,[307],{"type":47,"tag":167,"props":308,"children":309},{"style":207},[310],{"type":53,"value":311},"  query GetUser($id: ID!) {\n",{"type":47,"tag":167,"props":313,"children":315},{"class":169,"line":314},6,[316],{"type":47,"tag":167,"props":317,"children":318},{"style":207},[319],{"type":53,"value":320},"    user(id: $id) {\n",{"type":47,"tag":167,"props":322,"children":324},{"class":169,"line":323},7,[325],{"type":47,"tag":167,"props":326,"children":327},{"style":207},[328],{"type":53,"value":329},"      id\n",{"type":47,"tag":167,"props":331,"children":333},{"class":169,"line":332},8,[334],{"type":47,"tag":167,"props":335,"children":336},{"style":207},[337],{"type":53,"value":338},"      name\n",{"type":47,"tag":167,"props":340,"children":342},{"class":169,"line":341},9,[343],{"type":47,"tag":167,"props":344,"children":345},{"style":207},[346],{"type":53,"value":347},"    }\n",{"type":47,"tag":167,"props":349,"children":351},{"class":169,"line":350},10,[352],{"type":47,"tag":167,"props":353,"children":354},{"style":207},[355],{"type":53,"value":356},"  }\n",{"type":47,"tag":167,"props":358,"children":359},{"class":169,"line":28},[360,365],{"type":47,"tag":167,"props":361,"children":362},{"style":180},[363],{"type":53,"value":364},"`",{"type":47,"tag":167,"props":366,"children":367},{"style":180},[368],{"type":53,"value":220},{"type":47,"tag":167,"props":370,"children":372},{"class":169,"line":371},12,[373],{"type":47,"tag":167,"props":374,"children":375},{"emptyLinePlaceholder":269},[376],{"type":53,"value":272},{"type":47,"tag":167,"props":378,"children":380},{"class":169,"line":379},13,[381,386,391,396,402,407,411,416,421,427,432],{"type":47,"tag":167,"props":382,"children":383},{"style":279},[384],{"type":53,"value":385},"function",{"type":47,"tag":167,"props":387,"children":388},{"style":295},[389],{"type":53,"value":390}," UserProfile",{"type":47,"tag":167,"props":392,"children":393},{"style":180},[394],{"type":53,"value":395},"({",{"type":47,"tag":167,"props":397,"children":399},{"style":398},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[400],{"type":53,"value":401}," userId",{"type":47,"tag":167,"props":403,"children":404},{"style":180},[405],{"type":53,"value":406}," }:",{"type":47,"tag":167,"props":408,"children":409},{"style":180},[410],{"type":53,"value":183},{"type":47,"tag":167,"props":412,"children":414},{"style":413},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[415],{"type":53,"value":401},{"type":47,"tag":167,"props":417,"children":418},{"style":180},[419],{"type":53,"value":420},":",{"type":47,"tag":167,"props":422,"children":424},{"style":423},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[425],{"type":53,"value":426}," string",{"type":47,"tag":167,"props":428,"children":429},{"style":180},[430],{"type":53,"value":431}," })",{"type":47,"tag":167,"props":433,"children":434},{"style":180},[435],{"type":53,"value":436}," {\n",{"type":47,"tag":167,"props":438,"children":440},{"class":169,"line":439},14,[441,446,450,455,460,465,469,474,478,483,487,492,496,501,506,510],{"type":47,"tag":167,"props":442,"children":443},{"style":279},[444],{"type":53,"value":445},"  const",{"type":47,"tag":167,"props":447,"children":448},{"style":180},[449],{"type":53,"value":183},{"type":47,"tag":167,"props":451,"children":452},{"style":186},[453],{"type":53,"value":454}," loading",{"type":47,"tag":167,"props":456,"children":457},{"style":180},[458],{"type":53,"value":459},",",{"type":47,"tag":167,"props":461,"children":462},{"style":186},[463],{"type":53,"value":464}," error",{"type":47,"tag":167,"props":466,"children":467},{"style":180},[468],{"type":53,"value":459},{"type":47,"tag":167,"props":470,"children":471},{"style":186},[472],{"type":53,"value":473}," data",{"type":47,"tag":167,"props":475,"children":476},{"style":180},[477],{"type":53,"value":459},{"type":47,"tag":167,"props":479,"children":480},{"style":186},[481],{"type":53,"value":482}," dataState",{"type":47,"tag":167,"props":484,"children":485},{"style":180},[486],{"type":53,"value":194},{"type":47,"tag":167,"props":488,"children":489},{"style":180},[490],{"type":53,"value":491}," =",{"type":47,"tag":167,"props":493,"children":494},{"style":295},[495],{"type":53,"value":237},{"type":47,"tag":167,"props":497,"children":498},{"style":413},[499],{"type":53,"value":500},"(",{"type":47,"tag":167,"props":502,"children":503},{"style":186},[504],{"type":53,"value":505},"GET_USER",{"type":47,"tag":167,"props":507,"children":508},{"style":180},[509],{"type":53,"value":459},{"type":47,"tag":167,"props":511,"children":512},{"style":180},[513],{"type":53,"value":436},{"type":47,"tag":167,"props":515,"children":517},{"class":169,"line":516},15,[518,523,527,531,536,540,544],{"type":47,"tag":167,"props":519,"children":520},{"style":413},[521],{"type":53,"value":522},"    variables",{"type":47,"tag":167,"props":524,"children":525},{"style":180},[526],{"type":53,"value":420},{"type":47,"tag":167,"props":528,"children":529},{"style":180},[530],{"type":53,"value":183},{"type":47,"tag":167,"props":532,"children":533},{"style":413},[534],{"type":53,"value":535}," id",{"type":47,"tag":167,"props":537,"children":538},{"style":180},[539],{"type":53,"value":420},{"type":47,"tag":167,"props":541,"children":542},{"style":186},[543],{"type":53,"value":401},{"type":47,"tag":167,"props":545,"children":546},{"style":180},[547],{"type":53,"value":548}," },\n",{"type":47,"tag":167,"props":550,"children":552},{"class":169,"line":551},16,[553,558,563],{"type":47,"tag":167,"props":554,"children":555},{"style":180},[556],{"type":53,"value":557},"  }",{"type":47,"tag":167,"props":559,"children":560},{"style":413},[561],{"type":53,"value":562},")",{"type":47,"tag":167,"props":564,"children":565},{"style":180},[566],{"type":53,"value":220},{"type":47,"tag":167,"props":568,"children":570},{"class":169,"line":569},17,[571],{"type":47,"tag":167,"props":572,"children":573},{"emptyLinePlaceholder":269},[574],{"type":53,"value":272},{"type":47,"tag":167,"props":576,"children":578},{"class":169,"line":577},18,[579,584,589,594,599,604,609,613,618,623,628,632],{"type":47,"tag":167,"props":580,"children":581},{"style":174},[582],{"type":53,"value":583},"  if",{"type":47,"tag":167,"props":585,"children":586},{"style":413},[587],{"type":53,"value":588}," (",{"type":47,"tag":167,"props":590,"children":591},{"style":186},[592],{"type":53,"value":593},"loading",{"type":47,"tag":167,"props":595,"children":596},{"style":413},[597],{"type":53,"value":598},") ",{"type":47,"tag":167,"props":600,"children":601},{"style":174},[602],{"type":53,"value":603},"return",{"type":47,"tag":167,"props":605,"children":606},{"style":180},[607],{"type":53,"value":608}," \u003C",{"type":47,"tag":167,"props":610,"children":611},{"style":413},[612],{"type":53,"value":56},{"type":47,"tag":167,"props":614,"children":615},{"style":180},[616],{"type":53,"value":617},">",{"type":47,"tag":167,"props":619,"children":620},{"style":186},[621],{"type":53,"value":622},"Loading...",{"type":47,"tag":167,"props":624,"children":625},{"style":180},[626],{"type":53,"value":627},"\u003C\u002F",{"type":47,"tag":167,"props":629,"children":630},{"style":413},[631],{"type":53,"value":56},{"type":47,"tag":167,"props":633,"children":634},{"style":180},[635],{"type":53,"value":636},">;\n",{"type":47,"tag":167,"props":638,"children":640},{"class":169,"line":639},19,[641,645,649,654,658,662,666,670,674,679,684,688,693,698,703,707],{"type":47,"tag":167,"props":642,"children":643},{"style":174},[644],{"type":53,"value":583},{"type":47,"tag":167,"props":646,"children":647},{"style":413},[648],{"type":53,"value":588},{"type":47,"tag":167,"props":650,"children":651},{"style":186},[652],{"type":53,"value":653},"error",{"type":47,"tag":167,"props":655,"children":656},{"style":413},[657],{"type":53,"value":598},{"type":47,"tag":167,"props":659,"children":660},{"style":174},[661],{"type":53,"value":603},{"type":47,"tag":167,"props":663,"children":664},{"style":180},[665],{"type":53,"value":608},{"type":47,"tag":167,"props":667,"children":668},{"style":413},[669],{"type":53,"value":56},{"type":47,"tag":167,"props":671,"children":672},{"style":180},[673],{"type":53,"value":617},{"type":47,"tag":167,"props":675,"children":676},{"style":186},[677],{"type":53,"value":678},"Error: ",{"type":47,"tag":167,"props":680,"children":681},{"style":180},[682],{"type":53,"value":683},"{",{"type":47,"tag":167,"props":685,"children":686},{"style":186},[687],{"type":53,"value":653},{"type":47,"tag":167,"props":689,"children":690},{"style":180},[691],{"type":53,"value":692},".",{"type":47,"tag":167,"props":694,"children":695},{"style":186},[696],{"type":53,"value":697},"message",{"type":47,"tag":167,"props":699,"children":700},{"style":180},[701],{"type":53,"value":702},"}\u003C\u002F",{"type":47,"tag":167,"props":704,"children":705},{"style":413},[706],{"type":53,"value":56},{"type":47,"tag":167,"props":708,"children":709},{"style":180},[710],{"type":53,"value":636},{"type":47,"tag":167,"props":712,"children":714},{"class":169,"line":713},20,[715],{"type":47,"tag":167,"props":716,"children":717},{"emptyLinePlaceholder":269},[718],{"type":53,"value":272},{"type":47,"tag":167,"props":720,"children":722},{"class":169,"line":721},21,[723],{"type":47,"tag":167,"props":724,"children":726},{"style":725},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[727],{"type":53,"value":728},"  \u002F\u002F TypeScript note: for stricter type narrowing, you can also check `dataState === \"complete\"` before accessing data\n",{"type":47,"tag":167,"props":730,"children":732},{"class":169,"line":731},22,[733,738,742,747,752,757,762,767,771,776,780,784],{"type":47,"tag":167,"props":734,"children":735},{"style":174},[736],{"type":53,"value":737},"  return",{"type":47,"tag":167,"props":739,"children":740},{"style":180},[741],{"type":53,"value":608},{"type":47,"tag":167,"props":743,"children":744},{"style":413},[745],{"type":53,"value":746},"div",{"type":47,"tag":167,"props":748,"children":749},{"style":180},[750],{"type":53,"value":751},">{",{"type":47,"tag":167,"props":753,"children":754},{"style":186},[755],{"type":53,"value":756},"data",{"type":47,"tag":167,"props":758,"children":759},{"style":180},[760],{"type":53,"value":761},"?.",{"type":47,"tag":167,"props":763,"children":764},{"style":186},[765],{"type":53,"value":766},"user",{"type":47,"tag":167,"props":768,"children":769},{"style":180},[770],{"type":53,"value":692},{"type":47,"tag":167,"props":772,"children":773},{"style":186},[774],{"type":53,"value":775},"name",{"type":47,"tag":167,"props":777,"children":778},{"style":180},[779],{"type":53,"value":702},{"type":47,"tag":167,"props":781,"children":782},{"style":413},[783],{"type":53,"value":746},{"type":47,"tag":167,"props":785,"children":786},{"style":180},[787],{"type":53,"value":636},{"type":47,"tag":167,"props":789,"children":791},{"class":169,"line":790},23,[792],{"type":47,"tag":167,"props":793,"children":794},{"style":180},[795],{"type":53,"value":796},"}\n",{"type":47,"tag":148,"props":798,"children":800},{"id":799},"basic-mutation",[801],{"type":53,"value":802},"Basic Mutation",{"type":47,"tag":155,"props":804,"children":806},{"className":157,"code":805,"language":159,"meta":160,"style":160},"import { gql } from \"@apollo\u002Fclient\";\nimport { useMutation } from \"@apollo\u002Fclient\u002Freact\";\n\nconst CREATE_USER = gql`\n  mutation CreateUser($input: CreateUserInput!) {\n    createUser(input: $input) {\n      id\n      name\n    }\n  }\n`;\n\nfunction CreateUserForm() {\n  const [createUser, { loading, error }] = useMutation(CREATE_USER);\n\n  const handleSubmit = async (name: string) => {\n    await createUser({ variables: { input: { name } } });\n  };\n\n  return \u003Cbutton onClick={() => handleSubmit(\"John\")}>Create User\u003C\u002Fbutton>;\n}\n",[807],{"type":47,"tag":163,"props":808,"children":809},{"__ignoreMap":160},[810,849,889,896,920,928,936,943,950,957,964,975,982,1003,1070,1077,1127,1199,1207,1214,1291],{"type":47,"tag":167,"props":811,"children":812},{"class":169,"line":170},[813,817,821,825,829,833,837,841,845],{"type":47,"tag":167,"props":814,"children":815},{"style":174},[816],{"type":53,"value":177},{"type":47,"tag":167,"props":818,"children":819},{"style":180},[820],{"type":53,"value":183},{"type":47,"tag":167,"props":822,"children":823},{"style":186},[824],{"type":53,"value":189},{"type":47,"tag":167,"props":826,"children":827},{"style":180},[828],{"type":53,"value":194},{"type":47,"tag":167,"props":830,"children":831},{"style":174},[832],{"type":53,"value":199},{"type":47,"tag":167,"props":834,"children":835},{"style":180},[836],{"type":53,"value":204},{"type":47,"tag":167,"props":838,"children":839},{"style":207},[840],{"type":53,"value":210},{"type":47,"tag":167,"props":842,"children":843},{"style":180},[844],{"type":53,"value":215},{"type":47,"tag":167,"props":846,"children":847},{"style":180},[848],{"type":53,"value":220},{"type":47,"tag":167,"props":850,"children":851},{"class":169,"line":223},[852,856,860,865,869,873,877,881,885],{"type":47,"tag":167,"props":853,"children":854},{"style":174},[855],{"type":53,"value":177},{"type":47,"tag":167,"props":857,"children":858},{"style":180},[859],{"type":53,"value":183},{"type":47,"tag":167,"props":861,"children":862},{"style":186},[863],{"type":53,"value":864}," useMutation",{"type":47,"tag":167,"props":866,"children":867},{"style":180},[868],{"type":53,"value":194},{"type":47,"tag":167,"props":870,"children":871},{"style":174},[872],{"type":53,"value":199},{"type":47,"tag":167,"props":874,"children":875},{"style":180},[876],{"type":53,"value":204},{"type":47,"tag":167,"props":878,"children":879},{"style":207},[880],{"type":53,"value":254},{"type":47,"tag":167,"props":882,"children":883},{"style":180},[884],{"type":53,"value":215},{"type":47,"tag":167,"props":886,"children":887},{"style":180},[888],{"type":53,"value":220},{"type":47,"tag":167,"props":890,"children":891},{"class":169,"line":265},[892],{"type":47,"tag":167,"props":893,"children":894},{"emptyLinePlaceholder":269},[895],{"type":53,"value":272},{"type":47,"tag":167,"props":897,"children":898},{"class":169,"line":275},[899,903,908,912,916],{"type":47,"tag":167,"props":900,"children":901},{"style":279},[902],{"type":53,"value":282},{"type":47,"tag":167,"props":904,"children":905},{"style":186},[906],{"type":53,"value":907}," CREATE_USER ",{"type":47,"tag":167,"props":909,"children":910},{"style":180},[911],{"type":53,"value":292},{"type":47,"tag":167,"props":913,"children":914},{"style":295},[915],{"type":53,"value":189},{"type":47,"tag":167,"props":917,"children":918},{"style":180},[919],{"type":53,"value":302},{"type":47,"tag":167,"props":921,"children":922},{"class":169,"line":305},[923],{"type":47,"tag":167,"props":924,"children":925},{"style":207},[926],{"type":53,"value":927},"  mutation CreateUser($input: CreateUserInput!) {\n",{"type":47,"tag":167,"props":929,"children":930},{"class":169,"line":314},[931],{"type":47,"tag":167,"props":932,"children":933},{"style":207},[934],{"type":53,"value":935},"    createUser(input: $input) {\n",{"type":47,"tag":167,"props":937,"children":938},{"class":169,"line":323},[939],{"type":47,"tag":167,"props":940,"children":941},{"style":207},[942],{"type":53,"value":329},{"type":47,"tag":167,"props":944,"children":945},{"class":169,"line":332},[946],{"type":47,"tag":167,"props":947,"children":948},{"style":207},[949],{"type":53,"value":338},{"type":47,"tag":167,"props":951,"children":952},{"class":169,"line":341},[953],{"type":47,"tag":167,"props":954,"children":955},{"style":207},[956],{"type":53,"value":347},{"type":47,"tag":167,"props":958,"children":959},{"class":169,"line":350},[960],{"type":47,"tag":167,"props":961,"children":962},{"style":207},[963],{"type":53,"value":356},{"type":47,"tag":167,"props":965,"children":966},{"class":169,"line":28},[967,971],{"type":47,"tag":167,"props":968,"children":969},{"style":180},[970],{"type":53,"value":364},{"type":47,"tag":167,"props":972,"children":973},{"style":180},[974],{"type":53,"value":220},{"type":47,"tag":167,"props":976,"children":977},{"class":169,"line":371},[978],{"type":47,"tag":167,"props":979,"children":980},{"emptyLinePlaceholder":269},[981],{"type":53,"value":272},{"type":47,"tag":167,"props":983,"children":984},{"class":169,"line":379},[985,989,994,999],{"type":47,"tag":167,"props":986,"children":987},{"style":279},[988],{"type":53,"value":385},{"type":47,"tag":167,"props":990,"children":991},{"style":295},[992],{"type":53,"value":993}," CreateUserForm",{"type":47,"tag":167,"props":995,"children":996},{"style":180},[997],{"type":53,"value":998},"()",{"type":47,"tag":167,"props":1000,"children":1001},{"style":180},[1002],{"type":53,"value":436},{"type":47,"tag":167,"props":1004,"children":1005},{"class":169,"line":439},[1006,1010,1015,1020,1024,1028,1032,1036,1040,1045,1049,1053,1057,1062,1066],{"type":47,"tag":167,"props":1007,"children":1008},{"style":279},[1009],{"type":53,"value":445},{"type":47,"tag":167,"props":1011,"children":1012},{"style":180},[1013],{"type":53,"value":1014}," [",{"type":47,"tag":167,"props":1016,"children":1017},{"style":186},[1018],{"type":53,"value":1019},"createUser",{"type":47,"tag":167,"props":1021,"children":1022},{"style":180},[1023],{"type":53,"value":459},{"type":47,"tag":167,"props":1025,"children":1026},{"style":180},[1027],{"type":53,"value":183},{"type":47,"tag":167,"props":1029,"children":1030},{"style":186},[1031],{"type":53,"value":454},{"type":47,"tag":167,"props":1033,"children":1034},{"style":180},[1035],{"type":53,"value":459},{"type":47,"tag":167,"props":1037,"children":1038},{"style":186},[1039],{"type":53,"value":464},{"type":47,"tag":167,"props":1041,"children":1042},{"style":180},[1043],{"type":53,"value":1044}," }]",{"type":47,"tag":167,"props":1046,"children":1047},{"style":180},[1048],{"type":53,"value":491},{"type":47,"tag":167,"props":1050,"children":1051},{"style":295},[1052],{"type":53,"value":864},{"type":47,"tag":167,"props":1054,"children":1055},{"style":413},[1056],{"type":53,"value":500},{"type":47,"tag":167,"props":1058,"children":1059},{"style":186},[1060],{"type":53,"value":1061},"CREATE_USER",{"type":47,"tag":167,"props":1063,"children":1064},{"style":413},[1065],{"type":53,"value":562},{"type":47,"tag":167,"props":1067,"children":1068},{"style":180},[1069],{"type":53,"value":220},{"type":47,"tag":167,"props":1071,"children":1072},{"class":169,"line":516},[1073],{"type":47,"tag":167,"props":1074,"children":1075},{"emptyLinePlaceholder":269},[1076],{"type":53,"value":272},{"type":47,"tag":167,"props":1078,"children":1079},{"class":169,"line":551},[1080,1084,1089,1093,1098,1102,1106,1110,1114,1118,1123],{"type":47,"tag":167,"props":1081,"children":1082},{"style":279},[1083],{"type":53,"value":445},{"type":47,"tag":167,"props":1085,"children":1086},{"style":186},[1087],{"type":53,"value":1088}," handleSubmit",{"type":47,"tag":167,"props":1090,"children":1091},{"style":180},[1092],{"type":53,"value":491},{"type":47,"tag":167,"props":1094,"children":1095},{"style":279},[1096],{"type":53,"value":1097}," async",{"type":47,"tag":167,"props":1099,"children":1100},{"style":180},[1101],{"type":53,"value":588},{"type":47,"tag":167,"props":1103,"children":1104},{"style":398},[1105],{"type":53,"value":775},{"type":47,"tag":167,"props":1107,"children":1108},{"style":180},[1109],{"type":53,"value":420},{"type":47,"tag":167,"props":1111,"children":1112},{"style":423},[1113],{"type":53,"value":426},{"type":47,"tag":167,"props":1115,"children":1116},{"style":180},[1117],{"type":53,"value":562},{"type":47,"tag":167,"props":1119,"children":1120},{"style":279},[1121],{"type":53,"value":1122}," =>",{"type":47,"tag":167,"props":1124,"children":1125},{"style":180},[1126],{"type":53,"value":436},{"type":47,"tag":167,"props":1128,"children":1129},{"class":169,"line":569},[1130,1135,1140,1144,1148,1153,1157,1161,1166,1170,1174,1179,1183,1187,1191,1195],{"type":47,"tag":167,"props":1131,"children":1132},{"style":174},[1133],{"type":53,"value":1134},"    await",{"type":47,"tag":167,"props":1136,"children":1137},{"style":295},[1138],{"type":53,"value":1139}," createUser",{"type":47,"tag":167,"props":1141,"children":1142},{"style":413},[1143],{"type":53,"value":500},{"type":47,"tag":167,"props":1145,"children":1146},{"style":180},[1147],{"type":53,"value":683},{"type":47,"tag":167,"props":1149,"children":1150},{"style":413},[1151],{"type":53,"value":1152}," variables",{"type":47,"tag":167,"props":1154,"children":1155},{"style":180},[1156],{"type":53,"value":420},{"type":47,"tag":167,"props":1158,"children":1159},{"style":180},[1160],{"type":53,"value":183},{"type":47,"tag":167,"props":1162,"children":1163},{"style":413},[1164],{"type":53,"value":1165}," input",{"type":47,"tag":167,"props":1167,"children":1168},{"style":180},[1169],{"type":53,"value":420},{"type":47,"tag":167,"props":1171,"children":1172},{"style":180},[1173],{"type":53,"value":183},{"type":47,"tag":167,"props":1175,"children":1176},{"style":186},[1177],{"type":53,"value":1178}," name",{"type":47,"tag":167,"props":1180,"children":1181},{"style":180},[1182],{"type":53,"value":194},{"type":47,"tag":167,"props":1184,"children":1185},{"style":180},[1186],{"type":53,"value":194},{"type":47,"tag":167,"props":1188,"children":1189},{"style":180},[1190],{"type":53,"value":194},{"type":47,"tag":167,"props":1192,"children":1193},{"style":413},[1194],{"type":53,"value":562},{"type":47,"tag":167,"props":1196,"children":1197},{"style":180},[1198],{"type":53,"value":220},{"type":47,"tag":167,"props":1200,"children":1201},{"class":169,"line":577},[1202],{"type":47,"tag":167,"props":1203,"children":1204},{"style":180},[1205],{"type":53,"value":1206},"  };\n",{"type":47,"tag":167,"props":1208,"children":1209},{"class":169,"line":639},[1210],{"type":47,"tag":167,"props":1211,"children":1212},{"emptyLinePlaceholder":269},[1213],{"type":53,"value":272},{"type":47,"tag":167,"props":1215,"children":1216},{"class":169,"line":713},[1217,1221,1225,1230,1235,1240,1244,1248,1252,1256,1261,1265,1269,1274,1279,1283,1287],{"type":47,"tag":167,"props":1218,"children":1219},{"style":174},[1220],{"type":53,"value":737},{"type":47,"tag":167,"props":1222,"children":1223},{"style":180},[1224],{"type":53,"value":608},{"type":47,"tag":167,"props":1226,"children":1227},{"style":413},[1228],{"type":53,"value":1229},"button",{"type":47,"tag":167,"props":1231,"children":1232},{"style":279},[1233],{"type":53,"value":1234}," onClick",{"type":47,"tag":167,"props":1236,"children":1237},{"style":180},[1238],{"type":53,"value":1239},"={()",{"type":47,"tag":167,"props":1241,"children":1242},{"style":279},[1243],{"type":53,"value":1122},{"type":47,"tag":167,"props":1245,"children":1246},{"style":295},[1247],{"type":53,"value":1088},{"type":47,"tag":167,"props":1249,"children":1250},{"style":186},[1251],{"type":53,"value":500},{"type":47,"tag":167,"props":1253,"children":1254},{"style":180},[1255],{"type":53,"value":215},{"type":47,"tag":167,"props":1257,"children":1258},{"style":207},[1259],{"type":53,"value":1260},"John",{"type":47,"tag":167,"props":1262,"children":1263},{"style":180},[1264],{"type":53,"value":215},{"type":47,"tag":167,"props":1266,"children":1267},{"style":186},[1268],{"type":53,"value":562},{"type":47,"tag":167,"props":1270,"children":1271},{"style":180},[1272],{"type":53,"value":1273},"}>",{"type":47,"tag":167,"props":1275,"children":1276},{"style":186},[1277],{"type":53,"value":1278},"Create User",{"type":47,"tag":167,"props":1280,"children":1281},{"style":180},[1282],{"type":53,"value":627},{"type":47,"tag":167,"props":1284,"children":1285},{"style":413},[1286],{"type":53,"value":1229},{"type":47,"tag":167,"props":1288,"children":1289},{"style":180},[1290],{"type":53,"value":636},{"type":47,"tag":167,"props":1292,"children":1293},{"class":169,"line":721},[1294],{"type":47,"tag":167,"props":1295,"children":1296},{"style":180},[1297],{"type":53,"value":796},{"type":47,"tag":148,"props":1299,"children":1301},{"id":1300},"suspense-query",[1302],{"type":53,"value":1303},"Suspense Query",{"type":47,"tag":155,"props":1305,"children":1307},{"className":157,"code":1306,"language":159,"meta":160,"style":160},"import { Suspense } from \"react\";\nimport { useSuspenseQuery } from \"@apollo\u002Fclient\u002Freact\";\n\nfunction UserProfile({ userId }: { userId: string }) {\n  const { data } = useSuspenseQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  return \u003Cdiv>{data.user.name}\u003C\u002Fdiv>;\n}\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003Cp>Loading user...\u003C\u002Fp>}>\n      \u003CUserProfile userId=\"1\" \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n",[1308],{"type":47,"tag":163,"props":1309,"children":1310},{"__ignoreMap":160},[1311,1351,1391,1398,1445,1488,1519,1534,1541,1592,1599,1606,1626,1638,1687,1726,1743,1755],{"type":47,"tag":167,"props":1312,"children":1313},{"class":169,"line":170},[1314,1318,1322,1327,1331,1335,1339,1343,1347],{"type":47,"tag":167,"props":1315,"children":1316},{"style":174},[1317],{"type":53,"value":177},{"type":47,"tag":167,"props":1319,"children":1320},{"style":180},[1321],{"type":53,"value":183},{"type":47,"tag":167,"props":1323,"children":1324},{"style":186},[1325],{"type":53,"value":1326}," Suspense",{"type":47,"tag":167,"props":1328,"children":1329},{"style":180},[1330],{"type":53,"value":194},{"type":47,"tag":167,"props":1332,"children":1333},{"style":174},[1334],{"type":53,"value":199},{"type":47,"tag":167,"props":1336,"children":1337},{"style":180},[1338],{"type":53,"value":204},{"type":47,"tag":167,"props":1340,"children":1341},{"style":207},[1342],{"type":53,"value":15},{"type":47,"tag":167,"props":1344,"children":1345},{"style":180},[1346],{"type":53,"value":215},{"type":47,"tag":167,"props":1348,"children":1349},{"style":180},[1350],{"type":53,"value":220},{"type":47,"tag":167,"props":1352,"children":1353},{"class":169,"line":223},[1354,1358,1362,1367,1371,1375,1379,1383,1387],{"type":47,"tag":167,"props":1355,"children":1356},{"style":174},[1357],{"type":53,"value":177},{"type":47,"tag":167,"props":1359,"children":1360},{"style":180},[1361],{"type":53,"value":183},{"type":47,"tag":167,"props":1363,"children":1364},{"style":186},[1365],{"type":53,"value":1366}," useSuspenseQuery",{"type":47,"tag":167,"props":1368,"children":1369},{"style":180},[1370],{"type":53,"value":194},{"type":47,"tag":167,"props":1372,"children":1373},{"style":174},[1374],{"type":53,"value":199},{"type":47,"tag":167,"props":1376,"children":1377},{"style":180},[1378],{"type":53,"value":204},{"type":47,"tag":167,"props":1380,"children":1381},{"style":207},[1382],{"type":53,"value":254},{"type":47,"tag":167,"props":1384,"children":1385},{"style":180},[1386],{"type":53,"value":215},{"type":47,"tag":167,"props":1388,"children":1389},{"style":180},[1390],{"type":53,"value":220},{"type":47,"tag":167,"props":1392,"children":1393},{"class":169,"line":265},[1394],{"type":47,"tag":167,"props":1395,"children":1396},{"emptyLinePlaceholder":269},[1397],{"type":53,"value":272},{"type":47,"tag":167,"props":1399,"children":1400},{"class":169,"line":275},[1401,1405,1409,1413,1417,1421,1425,1429,1433,1437,1441],{"type":47,"tag":167,"props":1402,"children":1403},{"style":279},[1404],{"type":53,"value":385},{"type":47,"tag":167,"props":1406,"children":1407},{"style":295},[1408],{"type":53,"value":390},{"type":47,"tag":167,"props":1410,"children":1411},{"style":180},[1412],{"type":53,"value":395},{"type":47,"tag":167,"props":1414,"children":1415},{"style":398},[1416],{"type":53,"value":401},{"type":47,"tag":167,"props":1418,"children":1419},{"style":180},[1420],{"type":53,"value":406},{"type":47,"tag":167,"props":1422,"children":1423},{"style":180},[1424],{"type":53,"value":183},{"type":47,"tag":167,"props":1426,"children":1427},{"style":413},[1428],{"type":53,"value":401},{"type":47,"tag":167,"props":1430,"children":1431},{"style":180},[1432],{"type":53,"value":420},{"type":47,"tag":167,"props":1434,"children":1435},{"style":423},[1436],{"type":53,"value":426},{"type":47,"tag":167,"props":1438,"children":1439},{"style":180},[1440],{"type":53,"value":431},{"type":47,"tag":167,"props":1442,"children":1443},{"style":180},[1444],{"type":53,"value":436},{"type":47,"tag":167,"props":1446,"children":1447},{"class":169,"line":305},[1448,1452,1456,1460,1464,1468,1472,1476,1480,1484],{"type":47,"tag":167,"props":1449,"children":1450},{"style":279},[1451],{"type":53,"value":445},{"type":47,"tag":167,"props":1453,"children":1454},{"style":180},[1455],{"type":53,"value":183},{"type":47,"tag":167,"props":1457,"children":1458},{"style":186},[1459],{"type":53,"value":473},{"type":47,"tag":167,"props":1461,"children":1462},{"style":180},[1463],{"type":53,"value":194},{"type":47,"tag":167,"props":1465,"children":1466},{"style":180},[1467],{"type":53,"value":491},{"type":47,"tag":167,"props":1469,"children":1470},{"style":295},[1471],{"type":53,"value":1366},{"type":47,"tag":167,"props":1473,"children":1474},{"style":413},[1475],{"type":53,"value":500},{"type":47,"tag":167,"props":1477,"children":1478},{"style":186},[1479],{"type":53,"value":505},{"type":47,"tag":167,"props":1481,"children":1482},{"style":180},[1483],{"type":53,"value":459},{"type":47,"tag":167,"props":1485,"children":1486},{"style":180},[1487],{"type":53,"value":436},{"type":47,"tag":167,"props":1489,"children":1490},{"class":169,"line":314},[1491,1495,1499,1503,1507,1511,1515],{"type":47,"tag":167,"props":1492,"children":1493},{"style":413},[1494],{"type":53,"value":522},{"type":47,"tag":167,"props":1496,"children":1497},{"style":180},[1498],{"type":53,"value":420},{"type":47,"tag":167,"props":1500,"children":1501},{"style":180},[1502],{"type":53,"value":183},{"type":47,"tag":167,"props":1504,"children":1505},{"style":413},[1506],{"type":53,"value":535},{"type":47,"tag":167,"props":1508,"children":1509},{"style":180},[1510],{"type":53,"value":420},{"type":47,"tag":167,"props":1512,"children":1513},{"style":186},[1514],{"type":53,"value":401},{"type":47,"tag":167,"props":1516,"children":1517},{"style":180},[1518],{"type":53,"value":548},{"type":47,"tag":167,"props":1520,"children":1521},{"class":169,"line":323},[1522,1526,1530],{"type":47,"tag":167,"props":1523,"children":1524},{"style":180},[1525],{"type":53,"value":557},{"type":47,"tag":167,"props":1527,"children":1528},{"style":413},[1529],{"type":53,"value":562},{"type":47,"tag":167,"props":1531,"children":1532},{"style":180},[1533],{"type":53,"value":220},{"type":47,"tag":167,"props":1535,"children":1536},{"class":169,"line":332},[1537],{"type":47,"tag":167,"props":1538,"children":1539},{"emptyLinePlaceholder":269},[1540],{"type":53,"value":272},{"type":47,"tag":167,"props":1542,"children":1543},{"class":169,"line":341},[1544,1548,1552,1556,1560,1564,1568,1572,1576,1580,1584,1588],{"type":47,"tag":167,"props":1545,"children":1546},{"style":174},[1547],{"type":53,"value":737},{"type":47,"tag":167,"props":1549,"children":1550},{"style":180},[1551],{"type":53,"value":608},{"type":47,"tag":167,"props":1553,"children":1554},{"style":413},[1555],{"type":53,"value":746},{"type":47,"tag":167,"props":1557,"children":1558},{"style":180},[1559],{"type":53,"value":751},{"type":47,"tag":167,"props":1561,"children":1562},{"style":186},[1563],{"type":53,"value":756},{"type":47,"tag":167,"props":1565,"children":1566},{"style":180},[1567],{"type":53,"value":692},{"type":47,"tag":167,"props":1569,"children":1570},{"style":186},[1571],{"type":53,"value":766},{"type":47,"tag":167,"props":1573,"children":1574},{"style":180},[1575],{"type":53,"value":692},{"type":47,"tag":167,"props":1577,"children":1578},{"style":186},[1579],{"type":53,"value":775},{"type":47,"tag":167,"props":1581,"children":1582},{"style":180},[1583],{"type":53,"value":702},{"type":47,"tag":167,"props":1585,"children":1586},{"style":413},[1587],{"type":53,"value":746},{"type":47,"tag":167,"props":1589,"children":1590},{"style":180},[1591],{"type":53,"value":636},{"type":47,"tag":167,"props":1593,"children":1594},{"class":169,"line":350},[1595],{"type":47,"tag":167,"props":1596,"children":1597},{"style":180},[1598],{"type":53,"value":796},{"type":47,"tag":167,"props":1600,"children":1601},{"class":169,"line":28},[1602],{"type":47,"tag":167,"props":1603,"children":1604},{"emptyLinePlaceholder":269},[1605],{"type":53,"value":272},{"type":47,"tag":167,"props":1607,"children":1608},{"class":169,"line":371},[1609,1613,1618,1622],{"type":47,"tag":167,"props":1610,"children":1611},{"style":279},[1612],{"type":53,"value":385},{"type":47,"tag":167,"props":1614,"children":1615},{"style":295},[1616],{"type":53,"value":1617}," App",{"type":47,"tag":167,"props":1619,"children":1620},{"style":180},[1621],{"type":53,"value":998},{"type":47,"tag":167,"props":1623,"children":1624},{"style":180},[1625],{"type":53,"value":436},{"type":47,"tag":167,"props":1627,"children":1628},{"class":169,"line":379},[1629,1633],{"type":47,"tag":167,"props":1630,"children":1631},{"style":174},[1632],{"type":53,"value":737},{"type":47,"tag":167,"props":1634,"children":1635},{"style":413},[1636],{"type":53,"value":1637}," (\n",{"type":47,"tag":167,"props":1639,"children":1640},{"class":169,"line":439},[1641,1646,1651,1656,1661,1665,1669,1674,1678,1682],{"type":47,"tag":167,"props":1642,"children":1643},{"style":180},[1644],{"type":53,"value":1645},"    \u003C",{"type":47,"tag":167,"props":1647,"children":1648},{"style":423},[1649],{"type":53,"value":1650},"Suspense",{"type":47,"tag":167,"props":1652,"children":1653},{"style":279},[1654],{"type":53,"value":1655}," fallback",{"type":47,"tag":167,"props":1657,"children":1658},{"style":180},[1659],{"type":53,"value":1660},"={\u003C",{"type":47,"tag":167,"props":1662,"children":1663},{"style":413},[1664],{"type":53,"value":56},{"type":47,"tag":167,"props":1666,"children":1667},{"style":180},[1668],{"type":53,"value":617},{"type":47,"tag":167,"props":1670,"children":1671},{"style":186},[1672],{"type":53,"value":1673},"Loading user...",{"type":47,"tag":167,"props":1675,"children":1676},{"style":180},[1677],{"type":53,"value":627},{"type":47,"tag":167,"props":1679,"children":1680},{"style":413},[1681],{"type":53,"value":56},{"type":47,"tag":167,"props":1683,"children":1684},{"style":180},[1685],{"type":53,"value":1686},">}>\n",{"type":47,"tag":167,"props":1688,"children":1689},{"class":169,"line":516},[1690,1695,1700,1704,1708,1712,1717,1721],{"type":47,"tag":167,"props":1691,"children":1692},{"style":180},[1693],{"type":53,"value":1694},"      \u003C",{"type":47,"tag":167,"props":1696,"children":1697},{"style":423},[1698],{"type":53,"value":1699},"UserProfile",{"type":47,"tag":167,"props":1701,"children":1702},{"style":279},[1703],{"type":53,"value":401},{"type":47,"tag":167,"props":1705,"children":1706},{"style":180},[1707],{"type":53,"value":292},{"type":47,"tag":167,"props":1709,"children":1710},{"style":180},[1711],{"type":53,"value":215},{"type":47,"tag":167,"props":1713,"children":1714},{"style":207},[1715],{"type":53,"value":1716},"1",{"type":47,"tag":167,"props":1718,"children":1719},{"style":180},[1720],{"type":53,"value":215},{"type":47,"tag":167,"props":1722,"children":1723},{"style":180},[1724],{"type":53,"value":1725}," \u002F>\n",{"type":47,"tag":167,"props":1727,"children":1728},{"class":169,"line":551},[1729,1734,1738],{"type":47,"tag":167,"props":1730,"children":1731},{"style":180},[1732],{"type":53,"value":1733},"    \u003C\u002F",{"type":47,"tag":167,"props":1735,"children":1736},{"style":423},[1737],{"type":53,"value":1650},{"type":47,"tag":167,"props":1739,"children":1740},{"style":180},[1741],{"type":53,"value":1742},">\n",{"type":47,"tag":167,"props":1744,"children":1745},{"class":169,"line":569},[1746,1751],{"type":47,"tag":167,"props":1747,"children":1748},{"style":413},[1749],{"type":53,"value":1750},"  )",{"type":47,"tag":167,"props":1752,"children":1753},{"style":180},[1754],{"type":53,"value":220},{"type":47,"tag":167,"props":1756,"children":1757},{"class":169,"line":577},[1758],{"type":47,"tag":167,"props":1759,"children":1760},{"style":180},[1761],{"type":53,"value":796},{"type":47,"tag":62,"props":1763,"children":1765},{"id":1764},"reference-files",[1766],{"type":53,"value":1767},"Reference Files",{"type":47,"tag":56,"props":1769,"children":1770},{},[1771],{"type":53,"value":1772},"Detailed documentation for specific topics:",{"type":47,"tag":74,"props":1774,"children":1775},{},[1776,1787,1798,1809,1820,1831,1842,1853,1864],{"type":47,"tag":78,"props":1777,"children":1778},{},[1779,1785],{"type":47,"tag":86,"props":1780,"children":1782},{"href":1781},"references\u002Ftypescript-codegen.md",[1783],{"type":53,"value":1784},"TypeScript Code Generation",{"type":53,"value":1786}," - GraphQL Code Generator setup for type-safe operations",{"type":47,"tag":78,"props":1788,"children":1789},{},[1790,1796],{"type":47,"tag":86,"props":1791,"children":1793},{"href":1792},"references\u002Fqueries.md",[1794],{"type":53,"value":1795},"Queries",{"type":53,"value":1797}," - useQuery, useLazyQuery, polling, refetching",{"type":47,"tag":78,"props":1799,"children":1800},{},[1801,1807],{"type":47,"tag":86,"props":1802,"children":1804},{"href":1803},"references\u002Fsuspense-hooks.md",[1805],{"type":53,"value":1806},"Suspense Hooks",{"type":53,"value":1808}," - useSuspenseQuery, useBackgroundQuery, useReadQuery, useLoadableQuery",{"type":47,"tag":78,"props":1810,"children":1811},{},[1812,1818],{"type":47,"tag":86,"props":1813,"children":1815},{"href":1814},"references\u002Fmutations.md",[1816],{"type":53,"value":1817},"Mutations",{"type":53,"value":1819}," - useMutation, optimistic UI, cache updates",{"type":47,"tag":78,"props":1821,"children":1822},{},[1823,1829],{"type":47,"tag":86,"props":1824,"children":1826},{"href":1825},"references\u002Ffragments.md",[1827],{"type":53,"value":1828},"Fragments",{"type":53,"value":1830}," - Fragment colocation, useFragment, useSuspenseFragment, data masking",{"type":47,"tag":78,"props":1832,"children":1833},{},[1834,1840],{"type":47,"tag":86,"props":1835,"children":1837},{"href":1836},"references\u002Fcaching.md",[1838],{"type":53,"value":1839},"Caching",{"type":53,"value":1841}," - InMemoryCache, typePolicies, cache manipulation",{"type":47,"tag":78,"props":1843,"children":1844},{},[1845,1851],{"type":47,"tag":86,"props":1846,"children":1848},{"href":1847},"references\u002Fstate-management.md",[1849],{"type":53,"value":1850},"State Management",{"type":53,"value":1852}," - Reactive variables, local state",{"type":47,"tag":78,"props":1854,"children":1855},{},[1856,1862],{"type":47,"tag":86,"props":1857,"children":1859},{"href":1858},"references\u002Ferror-handling.md",[1860],{"type":53,"value":1861},"Error Handling",{"type":53,"value":1863}," - Error policies, error links, retries",{"type":47,"tag":78,"props":1865,"children":1866},{},[1867,1873],{"type":47,"tag":86,"props":1868,"children":1870},{"href":1869},"references\u002Ftroubleshooting.md",[1871],{"type":53,"value":1872},"Troubleshooting",{"type":53,"value":1874}," - Common issues and solutions",{"type":47,"tag":62,"props":1876,"children":1878},{"id":1877},"key-rules",[1879],{"type":53,"value":1880},"Key Rules",{"type":47,"tag":148,"props":1882,"children":1884},{"id":1883},"query-best-practices",[1885],{"type":53,"value":1886},"Query Best Practices",{"type":47,"tag":74,"props":1888,"children":1889},{},[1890,1924,1941,1999,2012],{"type":47,"tag":78,"props":1891,"children":1892},{},[1893,1898,1900,1906,1908,1914,1916,1922],{"type":47,"tag":82,"props":1894,"children":1895},{},[1896],{"type":53,"value":1897},"Each page should generally only have one query, composed from colocated fragments.",{"type":53,"value":1899}," Use ",{"type":47,"tag":163,"props":1901,"children":1903},{"className":1902},[],[1904],{"type":53,"value":1905},"useFragment",{"type":53,"value":1907}," or ",{"type":47,"tag":163,"props":1909,"children":1911},{"className":1910},[],[1912],{"type":53,"value":1913},"useSuspenseFragment",{"type":53,"value":1915}," in all non-page-components. Use ",{"type":47,"tag":163,"props":1917,"children":1919},{"className":1918},[],[1920],{"type":53,"value":1921},"@defer",{"type":53,"value":1923}," to allow slow fields below the fold to stream in later and avoid blocking the page load.",{"type":47,"tag":78,"props":1925,"children":1926},{},[1927,1932,1934,1939],{"type":47,"tag":82,"props":1928,"children":1929},{},[1930],{"type":53,"value":1931},"Fragments are for colocation, not reuse.",{"type":53,"value":1933}," Each fragment should describe exactly the data needs of a specific component, not be shared across components for common fields. See ",{"type":47,"tag":86,"props":1935,"children":1936},{"href":1825},[1937],{"type":53,"value":1938},"Fragments reference",{"type":53,"value":1940}," for details on fragment colocation and data masking.",{"type":47,"tag":78,"props":1942,"children":1943},{},[1944,1946,1951,1953,1958,1960,1966,1968,1974,1976,1982,1983,1989,1991,1997],{"type":53,"value":1945},"Always handle ",{"type":47,"tag":163,"props":1947,"children":1949},{"className":1948},[],[1950],{"type":53,"value":593},{"type":53,"value":1952}," and ",{"type":47,"tag":163,"props":1954,"children":1956},{"className":1955},[],[1957],{"type":53,"value":653},{"type":53,"value":1959}," states in UI when using non-suspenseful hooks (",{"type":47,"tag":163,"props":1961,"children":1963},{"className":1962},[],[1964],{"type":53,"value":1965},"useQuery",{"type":53,"value":1967},", ",{"type":47,"tag":163,"props":1969,"children":1971},{"className":1970},[],[1972],{"type":53,"value":1973},"useLazyQuery",{"type":53,"value":1975},"). When using Suspense hooks (",{"type":47,"tag":163,"props":1977,"children":1979},{"className":1978},[],[1980],{"type":53,"value":1981},"useSuspenseQuery",{"type":53,"value":1967},{"type":47,"tag":163,"props":1984,"children":1986},{"className":1985},[],[1987],{"type":53,"value":1988},"useBackgroundQuery",{"type":53,"value":1990},"), React handles this through ",{"type":47,"tag":163,"props":1992,"children":1994},{"className":1993},[],[1995],{"type":53,"value":1996},"\u003CSuspense>",{"type":53,"value":1998}," boundaries and error boundaries.",{"type":47,"tag":78,"props":2000,"children":2001},{},[2002,2004,2010],{"type":53,"value":2003},"Use ",{"type":47,"tag":163,"props":2005,"children":2007},{"className":2006},[],[2008],{"type":53,"value":2009},"fetchPolicy",{"type":53,"value":2011}," to control cache behavior per query",{"type":47,"tag":78,"props":2013,"children":2014},{},[2015],{"type":53,"value":2016},"Use the TypeScript type server to look up documentation for functions and options (Apollo Client has extensive docblocks)",{"type":47,"tag":148,"props":2018,"children":2020},{"id":2019},"mutation-best-practices",[2021],{"type":53,"value":2022},"Mutation Best Practices",{"type":47,"tag":74,"props":2024,"children":2025},{},[2026,2036,2041,2046],{"type":47,"tag":78,"props":2027,"children":2028},{},[2029,2034],{"type":47,"tag":82,"props":2030,"children":2031},{},[2032],{"type":53,"value":2033},"If the schema permits, mutation return values should return everything necessary to update the cache.",{"type":53,"value":2035}," Neither manual updates nor refetching should be necessary.",{"type":47,"tag":78,"props":2037,"children":2038},{},[2039],{"type":53,"value":2040},"If the mutation response is insufficient, carefully weigh manual cache manipulation vs refetching. Manual updates risk missing server logic. Consider optimistic updates with a granular refetch if needed.",{"type":47,"tag":78,"props":2042,"children":2043},{},[2044],{"type":53,"value":2045},"Handle errors gracefully in the UI",{"type":47,"tag":78,"props":2047,"children":2048},{},[2049,2050,2056],{"type":53,"value":2003},{"type":47,"tag":163,"props":2051,"children":2053},{"className":2052},[],[2054],{"type":53,"value":2055},"refetchQueries",{"type":53,"value":2057}," sparingly (prefer letting the cache update automatically)",{"type":47,"tag":148,"props":2059,"children":2061},{"id":2060},"caching-best-practices",[2062],{"type":53,"value":2063},"Caching Best Practices",{"type":47,"tag":74,"props":2065,"children":2066},{},[2067,2088,2101,2113,2118],{"type":47,"tag":78,"props":2068,"children":2069},{},[2070,2072,2078,2080,2086],{"type":53,"value":2071},"Configure ",{"type":47,"tag":163,"props":2073,"children":2075},{"className":2074},[],[2076],{"type":53,"value":2077},"keyFields",{"type":53,"value":2079}," for types without ",{"type":47,"tag":163,"props":2081,"children":2083},{"className":2082},[],[2084],{"type":53,"value":2085},"id",{"type":53,"value":2087}," field",{"type":47,"tag":78,"props":2089,"children":2090},{},[2091,2093,2099],{"type":53,"value":2092},"Disable normalization by setting ",{"type":47,"tag":163,"props":2094,"children":2096},{"className":2095},[],[2097],{"type":53,"value":2098},"keyFields: false",{"type":53,"value":2100}," for types that don't include an identifier and are meant to group related fields under the parent",{"type":47,"tag":78,"props":2102,"children":2103},{},[2104,2105,2111],{"type":53,"value":2003},{"type":47,"tag":163,"props":2106,"children":2108},{"className":2107},[],[2109],{"type":53,"value":2110},"typePolicies",{"type":53,"value":2112}," for pagination and computed fields",{"type":47,"tag":78,"props":2114,"children":2115},{},[2116],{"type":53,"value":2117},"Understand cache normalization to debug issues",{"type":47,"tag":78,"props":2119,"children":2120},{},[2121,2134],{"type":47,"tag":82,"props":2122,"children":2123},{},[2124,2126,2132],{"type":53,"value":2125},"Enable ",{"type":47,"tag":86,"props":2127,"children":2129},{"href":2128},"references\u002Ffragments.md#data-masking",[2130],{"type":53,"value":2131},"data masking",{"type":53,"value":2133}," for all new applications",{"type":53,"value":2135}," - it prevents components from accessing fragment data they don't own, enforcing proper data boundaries and preventing over-rendering",{"type":47,"tag":148,"props":2137,"children":2139},{"id":2138},"performance",[2140],{"type":53,"value":2141},"Performance",{"type":47,"tag":74,"props":2143,"children":2144},{},[2145,2150,2162,2188],{"type":47,"tag":78,"props":2146,"children":2147},{},[2148],{"type":53,"value":2149},"Avoid over-fetching with proper field selection",{"type":47,"tag":78,"props":2151,"children":2152},{},[2153,2155,2160],{"type":53,"value":2154},"Configure appropriate ",{"type":47,"tag":163,"props":2156,"children":2158},{"className":2157},[],[2159],{"type":53,"value":2009},{"type":53,"value":2161}," per use case",{"type":47,"tag":78,"props":2163,"children":2164},{},[2165,2166,2171,2173,2179,2181,2186],{"type":53,"value":2003},{"type":47,"tag":163,"props":2167,"children":2169},{"className":2168},[],[2170],{"type":53,"value":1921},{"type":53,"value":2172}," for incremental delivery of deferred query parts, and ",{"type":47,"tag":163,"props":2174,"children":2176},{"className":2175},[],[2177],{"type":53,"value":2178},"@stream",{"type":53,"value":2180}," for streaming list fields (",{"type":47,"tag":163,"props":2182,"children":2184},{"className":2183},[],[2185],{"type":53,"value":2178},{"type":53,"value":2187}," available in Apollo Client 4.1+)",{"type":47,"tag":78,"props":2189,"children":2190},{},[2191,2209],{"type":47,"tag":82,"props":2192,"children":2193},{},[2194,2196,2201,2202,2207],{"type":53,"value":2195},"Prefer Suspense hooks (",{"type":47,"tag":163,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":53,"value":1981},{"type":53,"value":1967},{"type":47,"tag":163,"props":2203,"children":2205},{"className":2204},[],[2206],{"type":53,"value":1988},{"type":53,"value":2208},") in modern applications",{"type":53,"value":2210}," for better loading state handling and code simplicity",{"type":47,"tag":62,"props":2212,"children":2214},{"id":2213},"ground-rules",[2215],{"type":53,"value":2216},"Ground Rules",{"type":47,"tag":74,"props":2218,"children":2219},{},[2220,2225,2236,2241,2259,2264,2285,2290,2295],{"type":47,"tag":78,"props":2221,"children":2222},{},[2223],{"type":53,"value":2224},"ALWAYS use Apollo Client 4.x patterns (not v3 or earlier)",{"type":47,"tag":78,"props":2226,"children":2227},{},[2228,2230],{"type":53,"value":2229},"ALWAYS wrap your app with ",{"type":47,"tag":163,"props":2231,"children":2233},{"className":2232},[],[2234],{"type":53,"value":2235},"ApolloProvider",{"type":47,"tag":78,"props":2237,"children":2238},{},[2239],{"type":53,"value":2240},"ALWAYS handle loading and error states when using non-suspenseful hooks",{"type":47,"tag":78,"props":2242,"children":2243},{},[2244,2246,2251,2252,2257],{"type":53,"value":2245},"PREFER Suspense hooks (",{"type":47,"tag":163,"props":2247,"children":2249},{"className":2248},[],[2250],{"type":53,"value":1981},{"type":53,"value":1967},{"type":47,"tag":163,"props":2253,"children":2255},{"className":2254},[],[2256],{"type":53,"value":1988},{"type":53,"value":2258},") in modern applications for better DX",{"type":47,"tag":78,"props":2260,"children":2261},{},[2262],{"type":53,"value":2263},"NEVER store Apollo Client in React state (use module-level or context)",{"type":47,"tag":78,"props":2265,"children":2266},{},[2267,2269,2275,2277,2283],{"type":53,"value":2268},"PREFER ",{"type":47,"tag":163,"props":2270,"children":2272},{"className":2271},[],[2273],{"type":53,"value":2274},"cache-first",{"type":53,"value":2276}," for read-heavy data, ",{"type":47,"tag":163,"props":2278,"children":2280},{"className":2279},[],[2281],{"type":53,"value":2282},"network-only",{"type":53,"value":2284}," for real-time data",{"type":47,"tag":78,"props":2286,"children":2287},{},[2288],{"type":53,"value":2289},"USE TypeScript for better type safety with GraphQL",{"type":47,"tag":78,"props":2291,"children":2292},{},[2293],{"type":53,"value":2294},"IMPLEMENT proper cache updates instead of refetching entire queries",{"type":47,"tag":78,"props":2296,"children":2297},{},[2298],{"type":53,"value":2299},"ADVISE the human steering you to look into Apollo DevTools when collaboratively debugging Apollo Client issues",{"type":47,"tag":2301,"props":2302,"children":2303},"style",{},[2304],{"type":53,"value":2305},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2307,"total":439},[2308,2315,2330,2343,2364,2379,2392],{"slug":4,"name":4,"fn":5,"description":6,"org":2309,"tags":2310,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2311,2312,2313,2314],{"name":9,"slug":8,"type":16},{"name":22,"slug":23,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"slug":2316,"name":2316,"fn":2317,"description":2318,"org":2319,"tags":2320,"stars":24,"repoUrl":25,"updatedAt":2329},"apollo-connectors","integrate REST APIs with Apollo Connectors","Guide for integrating REST APIs into GraphQL supergraphs using Apollo Connectors with @source and @connect directives. Use this skill when the user: (1) mentions \"connectors\", \"Apollo Connectors\", or \"REST Connector\", (2) wants to integrate a REST API into GraphQL, (3) references @source or @connect directives, (4) works with files containing \"# Note to AI Friends: This is an Apollo Connectors schema\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2321,2324,2325,2326],{"name":2322,"slug":2323,"type":16},"API Development","api-development",{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2327,"slug":2328,"type":16},"REST API","rest-api","2026-04-06T18:01:23.758345",{"slug":2331,"name":2331,"fn":2332,"description":2333,"org":2334,"tags":2335,"stars":24,"repoUrl":25,"updatedAt":2342},"apollo-federation","author Apollo Federation subgraph schemas","Guide for authoring Apollo Federation subgraph schemas. Use this skill when: (1) creating new subgraph schemas for a federated supergraph, (2) defining or modifying entities with @key, (3) sharing types\u002Ffields across subgraphs with @shareable, (4) working with federation directives (@external, @requires, @provides, @override, @inaccessible), (5) troubleshooting composition errors, (6) any task involving federation schema design patterns.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2336,2337,2338,2341],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":2339,"slug":2340,"type":16},"Architecture","architecture",{"name":18,"slug":19,"type":16},"2026-07-30T05:31:51.648593",{"slug":2344,"name":2344,"fn":2345,"description":2346,"org":2347,"tags":2348,"stars":24,"repoUrl":25,"updatedAt":2363},"apollo-ios","build Apple apps with Apollo iOS","Guide for building Apple-platform applications with Apollo iOS, the strongly-typed GraphQL client for Swift. Use this skill when: (1) adding Apollo iOS to a Swift Package Manager or Xcode project, (2) configuring `apollo-codegen-config.json` and running code generation, (3) configuring an `ApolloClient` with auth, interceptors, and caching, (4) writing queries, mutations, or subscriptions from SwiftUI views, (5) writing tests against generated operation mocks.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2349,2350,2351,2354,2357,2360],{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2352,"slug":2353,"type":16},"iOS","ios",{"name":2355,"slug":2356,"type":16},"Mobile","mobile",{"name":2358,"slug":2359,"type":16},"Swift","swift",{"name":2361,"slug":2362,"type":16},"Xcode","xcode","2026-04-29T05:35:21.329969",{"slug":2365,"name":2365,"fn":2366,"description":2367,"org":2368,"tags":2369,"stars":24,"repoUrl":25,"updatedAt":2378},"apollo-kotlin","build Kotlin apps with Apollo GraphQL","Guide for building applications with Apollo Kotlin, the GraphQL client library for Android and Kotlin. Use this skill when: (1) setting up Apollo Kotlin in a Gradle project for Android, Kotlin\u002FJVM, or KMP, (2) configuring schema download and codegen for GraphQL services, (3) configuring an `ApolloClient` with auth, interceptors, and caching, (4) writing queries, mutations, or subscriptions,\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2370,2373,2374,2375],{"name":2371,"slug":2372,"type":16},"Android","android",{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2376,"slug":2377,"type":16},"Kotlin","kotlin","2026-04-06T18:01:15.005978",{"slug":2380,"name":2380,"fn":2381,"description":2382,"org":2383,"tags":2384,"stars":24,"repoUrl":25,"updatedAt":2391},"apollo-mcp-server","connect MCP agents to GraphQL APIs","Guide for using Apollo MCP Server to connect AI agents with GraphQL APIs. Use this skill when: (1) setting up or configuring Apollo MCP Server, (2) defining MCP tools from GraphQL operations, (3) using introspection tools (introspect, search, validate, execute), (4) troubleshooting MCP server connectivity or tool execution issues.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2385,2386,2387,2388],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2389,"slug":2390,"type":16},"MCP","mcp","2026-04-06T18:01:20.578589",{"slug":2393,"name":2393,"fn":2394,"description":2395,"org":2396,"tags":2397,"stars":24,"repoUrl":25,"updatedAt":2404},"apollo-router","configure Apollo Router for GraphQL federation","Version-aware guide for configuring and running Apollo Router for federated GraphQL supergraphs. Generates correct YAML for both Router v1.x and v2.x. Use this skill when: (1) setting up Apollo Router to run a supergraph, (2) configuring routing, headers, or CORS, (3) implementing custom plugins (Rhai scripts or coprocessors), (4) configuring telemetry (tracing, metrics, logging), (5) troubleshooting Router performance or connectivity issues, (6) securing the graph with JWT, declarative field-level authorization directives, or persisted-query safelisting, (7) managing router.yaml as version-controlled config with CI\u002FCD validation.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2398,2399,2400,2403],{"name":9,"slug":8,"type":16},{"name":2339,"slug":2340,"type":16},{"name":2401,"slug":2402,"type":16},"Deployment","deployment",{"name":18,"slug":19,"type":16},"2026-07-30T05:31:54.665938",{"items":2406,"total":516},[2407,2414,2421,2428,2437,2444,2451,2458,2473,2489,2499,2510],{"slug":4,"name":4,"fn":5,"description":6,"org":2408,"tags":2409,"stars":24,"repoUrl":25,"updatedAt":26},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2410,2411,2412,2413],{"name":9,"slug":8,"type":16},{"name":22,"slug":23,"type":16},{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"slug":2316,"name":2316,"fn":2317,"description":2318,"org":2415,"tags":2416,"stars":24,"repoUrl":25,"updatedAt":2329},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2417,2418,2419,2420],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2327,"slug":2328,"type":16},{"slug":2331,"name":2331,"fn":2332,"description":2333,"org":2422,"tags":2423,"stars":24,"repoUrl":25,"updatedAt":2342},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2424,2425,2426,2427],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":2339,"slug":2340,"type":16},{"name":18,"slug":19,"type":16},{"slug":2344,"name":2344,"fn":2345,"description":2346,"org":2429,"tags":2430,"stars":24,"repoUrl":25,"updatedAt":2363},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2431,2432,2433,2434,2435,2436],{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2352,"slug":2353,"type":16},{"name":2355,"slug":2356,"type":16},{"name":2358,"slug":2359,"type":16},{"name":2361,"slug":2362,"type":16},{"slug":2365,"name":2365,"fn":2366,"description":2367,"org":2438,"tags":2439,"stars":24,"repoUrl":25,"updatedAt":2378},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2440,2441,2442,2443],{"name":2371,"slug":2372,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2376,"slug":2377,"type":16},{"slug":2380,"name":2380,"fn":2381,"description":2382,"org":2445,"tags":2446,"stars":24,"repoUrl":25,"updatedAt":2391},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2447,2448,2449,2450],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2389,"slug":2390,"type":16},{"slug":2393,"name":2393,"fn":2394,"description":2395,"org":2452,"tags":2453,"stars":24,"repoUrl":25,"updatedAt":2404},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2454,2455,2456,2457],{"name":9,"slug":8,"type":16},{"name":2339,"slug":2340,"type":16},{"name":2401,"slug":2402,"type":16},{"name":18,"slug":19,"type":16},{"slug":2459,"name":2459,"fn":2460,"description":2461,"org":2462,"tags":2463,"stars":24,"repoUrl":25,"updatedAt":2472},"apollo-router-plugin-creator","write Apollo Router Rust plugins","Guide for writing Apollo Router native Rust plugins. Use this skill when: (1) users want to create a new router plugin, (2) users want to add service hooks (router_service, supergraph_service, execution_service, subgraph_service), (3) users want to modify an existing router plugin, (4) users need to understand router plugin patterns or the request lifecycle. (5) triggers on requests like \"create a new plugin\", \"add a router plugin\", \"modify the X plugin\", or \"add subgraph_service hook\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2464,2465,2466,2469],{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2467,"slug":2468,"type":16},"Plugin Development","plugin-development",{"name":2470,"slug":2471,"type":16},"Rust","rust","2026-04-06T18:01:27.176974",{"slug":2474,"name":2474,"fn":2475,"description":2476,"org":2477,"tags":2478,"stars":24,"repoUrl":25,"updatedAt":2488},"apollo-server","build GraphQL servers with Apollo Server","Guide for building GraphQL servers with Apollo Server 5.x. Use this skill when: (1) setting up a new Apollo Server project, (2) writing resolvers or defining GraphQL schemas, (3) implementing authentication or authorization, (4) creating plugins or custom data sources, (5) troubleshooting Apollo Server errors or performance issues.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2479,2480,2481,2482,2485],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},{"name":2483,"slug":2484,"type":16},"Node.js","nodejs",{"name":2486,"slug":2487,"type":16},"TypeScript","typescript","2026-04-06T18:01:13.653038",{"slug":2490,"name":2490,"fn":2491,"description":2492,"org":2493,"tags":2494,"stars":24,"repoUrl":25,"updatedAt":2498},"graphql-operations","write GraphQL queries and mutations","Guide for writing GraphQL operations (queries, mutations, fragments) following best practices. Use this skill when: (1) writing GraphQL queries or mutations, (2) organizing operations with fragments, (3) optimizing data fetching patterns, (4) setting up type generation or linting, (5) reviewing operations for efficiency.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2495,2496,2497],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:01:25.530906",{"slug":2500,"name":2500,"fn":2501,"description":2502,"org":2503,"tags":2504,"stars":24,"repoUrl":25,"updatedAt":2509},"graphql-schema","design GraphQL schemas","Guide for designing GraphQL schemas following industry best practices. Use this skill when: (1) designing a new GraphQL schema or API, (2) reviewing existing schema for improvements, (3) deciding on type structures or nullability, (4) implementing pagination or error patterns, (5) ensuring security in schema design.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2505,2506,2507,2508],{"name":2322,"slug":2323,"type":16},{"name":9,"slug":8,"type":16},{"name":2339,"slug":2340,"type":16},{"name":18,"slug":19,"type":16},"2026-04-06T18:01:19.140592",{"slug":2511,"name":2511,"fn":2512,"description":2513,"org":2514,"tags":2515,"stars":24,"repoUrl":25,"updatedAt":2521},"rover","manage GraphQL schemas with Apollo Rover","Guide for using Apollo Rover CLI to manage GraphQL schemas and federation. Use this skill when: (1) publishing or fetching subgraph\u002Fgraph schemas, (2) composing supergraph schemas locally or via GraphOS, (3) running local supergraph development with rover dev, (4) validating schemas with check and lint commands, (5) configuring Rover authentication and environment, (6) exploring or searching a graph's schema for agent-driven discovery (rover schema describe \u002F rover schema search).\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2516,2517,2520],{"name":9,"slug":8,"type":16},{"name":2518,"slug":2519,"type":16},"CLI","cli",{"name":18,"slug":19,"type":16},"2026-07-30T05:31:52.675547"]