1<!DOCTYPE html><html lang="en"> <head><!-- OneTrust fires its own "OneTrustLoaded" event twice on initial load 2 (once per loader script). Dedupe here, before OneTrust's scripts 3 execute, and re-emit a single "oneTrustReady" event on dataLayer. -->
3<script> 4 window.__oneTrustLoadedFired = window.__oneTrustLoadedFired || false; 5 window.addEventListener("OneTrustLoaded", function () { 6 if (window.__oneTrustLoadedFired) return; 7 window.__oneTrustLoadedFired = true; 8 window.dataLayer = window.dataLayer || []; 9 window.dataLayer.push({ event: "oneTrustReady" }); 10 }); 11 </script>
11<script src="https://cdn.cookielaw.org/consent/bd9564d9-5534-4188-8249-1f3cd852a89f/OtAutoBlock.js" type="text/javascript"></script>
11<script async src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" data-domain-script="bd9564d9-5534-4188-8249-1f3cd852a89f"></script>
11<script id="optanon-wrapper" type="text/javascript"> 12 function OptanonWrapper() {} 13 </script>
13<meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/docs/favicon.svg"><meta name="generator" content="Apollo Docs Platform"><link rel="sitemap" type="application/xml" href="/docs/sitemap/sitemap-index.xml"><link rel="preload" href="/docs/_astro/fira-code-latin-400-normal.DGosTW8U.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/docs/_astro/fira-code-latin-600-normal.CvYZpPHg.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/docs/_astro/inter-latin-400-normal.C38fXH4l.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/docs/_astro/inter-latin-500-normal.Cerq10X2.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/docs/_astro/inter-latin-600-normal.LgqL8muc.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/docs/_astro/inter-latin-700-normal.Yt3aPRUw.woff2" as="font" type="font/woff2" crossorigin="anonymous"><style is:global> 14 @font-face { 15 font-family: "Fira Code"; 16 src: url("/docs/_astro/fira-code-latin-400-normal.DGosTW8U.woff2") format("woff2"); 17 font-weight: 400; 18 font-style: normal; 19 font-display: swap; 20 } 21 </style><style is:global> 22 @font-face { 23 font-family: "Fira Code"; 24 src: url("/docs/_astro/fira-code-latin-600-normal.CvYZpPHg.woff2") format("woff2"); 25 font-weight: 600; 26 font-style: normal; 27 font-display: swap; 28 } 29 </style><style is:global> 30 @font-face { 31 font-family: "Inter"; 32 src: url("/docs/_astro/inter-latin-400-normal.C38fXH4l.woff2") format("woff2"); 33 font-weight: 400; 34 font-style: normal; 35 font-display: swap; 36 } 37 </style><style is:global> 38 @font-face { 39 font-family: "Inter"; 40 src: url("/docs/_astro/inter-latin-500-normal.Cerq10X2.woff2") format("woff2"); 41 font-weight: 500; 42 font-style: normal; 43 font-display: swap; 44 } 45 </style><style is:global> 46 @font-face { 47 font-family: "Inter"; 48 src: url("/docs/_astro/inter-latin-600-normal.LgqL8muc.woff2") format("woff2"); 49 font-weight: 600; 50 font-style: normal; 51 font-display: swap; 52 } 53 </style><style is:global> 54 @font-face { 55 font-family: "Inter"; 56 src: url("/docs/_astro/inter-latin-700-normal.Yt3aPRUw.woff2") format("woff2"); 57 font-weight: 700; 58 font-style: normal; 59 font-display: swap; 60 } 61 </style><style is:global> 62 @font-face { 63 font-family: "Aeonik"; 64 src: url("/docs/_astro/Aeonik-Medium.BoVTbwPg.woff2") format("woff2"); 65 font-weight: 500; 66 font-style: normal; 67 font-display: swap; 68 } 69 </style><style is:global> 70 @font-face { 71 font-family: "Aeonik"; 72 src: url("/docs/_astro/Aeonik-Regular.CKuYHOJi.woff2") format("woff2"); 73 font-weight: 400; 74 font-style: normal; 75 font-display: swap; 76 } 77 </style><title>Introduction to Apollo Client - Apollo GraphQL Docs</title><link rel="canonical" href="https://www.apollographql.com/docs/react"><meta name="description" content="Discover Apollo Client, a powerful state management library for JavaScript. Learn how it simplifies fetching, caching, and more with GraphQL."><meta name="robots" content="index, follow"><meta property="og:title" content="Introduction to Apollo Client"><meta property="og:type" content="website"><meta property="og:image" content="https://res.cloudinary.com/apollographql/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:FFEADB,g_south_west,x_90,y_300,l_text:odyssey:fonts:AeonikBold.otf_80:Introduction%20to%20Apollo%20Client/w_1020,c_fit,co_rgb:FFEADB,g_north_west,x_90,y_400,l_text:odyssey:fonts:InterRegular.ttf_48:Discover%20Apollo%20Client%252C%20a%20powerful%20state%2
770management%20library%20for%20JavaScript.%20Learn%20how%20it%20simplifies%20fetching%252C%20caching%252C%20and%20more%20with%20GraphQL./docs-og-image_bgfoyk"><meta property="og:url" content="https://apollo-docs-rewrite.netlify.app/docs/react"><meta property="og:site_name" content="Apollo GraphQL Docs"><meta property="og:image:url" content="https://res.cloudinary.com/apollographql/image/upload/w_1280,h_669,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:FFEADB,g_south_west,x_90,y_300,l_text:odyssey:fonts:AeonikBold.otf_80:Introduction%20to%20Apollo%20Client/w_1020,c_fit,co_rgb:FFEADB,g_north_west,x_90,y_400,l_text:odyssey:fonts:InterRegular.ttf_48:Discover%20Apollo%20Client%252C%20a%20powerful%20state%20management%20library%20for%20JavaScript.%20Learn%20how%20it%20simplifies%20fetching%252C%20caching%252C%20and%20more%20with%20GraphQL./docs-og-image_bgfoyk"><meta property="og:image:alt" content="Apollo GraphQL Docs"><!-- Google Tag Manager -->
77<script>
vendor: 455 bytes, lines 77-87
77 78 (function (w, d, s, l, i) { 79 w[l] = w[l] || []; 80 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); 81 var f = d.getElementsByTagName(s)[0], 82 j = d.createElement(s), 83 dl = l != "dataLayer" ? "&l=" + l : ""; 84 j.async = true; 85 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; 86 f.parentNode.insertBefore(j, f); 87 })(window, document, "script", "dataLayer", "
87GTM-KS9CMZW
vendor: 8 bytes, lines 87-88
87"); 88
88</script>
88<!-- End Google Tag Manager -->
88<script> 89 const theme = (() => { 90 if ( 91 typeof localStorage !== "undefined" && 92 localStorage.getItem("theme") 93 ) { 94 return localStorage.getItem("theme"); 95 } 96 if (window.matchMedia("(prefers-color-scheme: dark)").matches) { 97 return "dark"; 98 } 99 return "light"; 100 })(); 101 102 if (theme === "light") { 103 document.documentElement.classList.remove("dark"); 104 } else { 105 document.documentElement.classList.add("dark"); 106 } 107 108 window.localStorage.setItem("theme", theme); 109 110 const handleToggleClick = () => { 111 const element = document.documentElement; 112 element.classList.toggle("dark"); 113 114 const isDark = element.classList.contains("dark"); 115 localStorage.setItem("theme", isDark ? "dark" : "light"); 116 }; 117 </script>
117<link rel="stylesheet" href="/docs/_astro/_page_.CrPDmqZ_.css"> 118<style>#content :is(h1,h2,h3,h4,h5,h6)[id]{scroll-margin-top:calc(var(--header-height) + 12px)} 119html{font-size:95%;scroll-padding-top:170px}html.dark .shiki,html.dark .shiki code{background-color:var(--shiki-dark-bg)!important}html.dark .shiki,html.dark .shiki span{color:var(--shiki-dark)!important}pre.diff .line{padding-left:2ch}pre.diff .line-number{display:none}.diff.remove:before{content:"â ";font-weight:600;margin-left:-2ch}.diff.add:before{content:"+ ";font-weight:600;margin-left:-2ch}[id^=graph-]{line-height:normal!important;g rect,polygon.labelBox{stroke-width:2}.cluster rect{fill:none!important;stroke-width:2!important}.edgeLabel rect{background:none!important;fill:none!important}g rect,polygon.labelBox{stroke-width:2!important}.label text,span{color:inherit!important;fill:currentColor!important}.edgePath .path,.flowchart-link,.messageLine0,.messageLine1{stroke:currentColor!important}.marker,#arrowhead path{stroke:currentColor!important;fill:currentColor!important}.cluster-label{line-height:1.6em!important}.arrowheadPath{fill:currentColor!important}.noteText,text.actor{tspan{fill:currentColor!important}}.label foreignObject,.cluster-label foreignObject{overflow:visible!important}}th,.responsive-grid .cell.heading{border:solid 1px #B4C0BE;padding:4px}td,.responsive-grid .cell{padding:12px;border:solid 1px #B4C0BE}tbody tr:nth-child(odd),.responsive-grid .cell:nth-child(4n+3),.responsive-grid .cell:nth-child(4n+4){background-color:#f2f4f4}.dark tbody tr:nth-child(odd),.dark .responsive-grid .cell:nth-child(4n+3),.dark .responsive-grid .cell:nth-child(4n+4){background-color:#182c35}.dark th,.dark .responsive-grid .cell.heading,.dark td,.dark .responsive-grid .cell{border:solid 1px #365E72}img.screenshot{border-radius:.375rem;box-shadow:0 4px 6px #0000001a}.dark img.screenshot{box-shadow:0 12px 20px #00000080!important}#content .docs-mdx-table-wrap{min-width:0;max-width:100%}#content .docs-mdx-table-wrap table{width:100%;table-layout:fixed}#content .docs-mdx-table-wrap th,#content .docs-mdx-table-wrap td{min-width:0}#content .docs-mdx-table-wrap th:first-child,#content .docs-mdx-table-wrap td:first-child{max-width:32em;word-break:normal;overflow-wrap:break-word}#content .docs-mdx-table-wrap code{white-space:normal!important;overflow-wrap:break-word!important}@media (max-width: 640px){#content .docs-mdx-table-wrap th:first-child,#content .docs-mdx-table-wrap td:first-child{overflow-wrap:anywhere;word-break:break-word}}@supports selector(::details-content){details.contents[open]::details-content{display:contents}} 120</style>
120<script type="module" src="/docs/_astro/hoisted.BOXSc6bv.js"></script>
120</head> <body class="bg-primary-base dark:bg-primary-dark text-primary-base dark:text-primary-dark antialiased"> <!-- LLM agent discovery: index of all Apollo GraphQL docs pages --> <a href="https://www.apollographql.com/docs/llms.txt" hidden aria-hidden="true">Apollo GraphQL Documentation Index (llms.txt)</a> <!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, line 120
120 <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
120GTM-KS9CMZW
vendor: 83 bytes, line 120
120" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
120<!-- End Google Tag Manager (noscript) --> <header class="bg-primary-base dark:bg-primary-dark z-[99] border-b border-silver-400 dark:border-navy-400 pt-2 has-[#eyebrow:not(.hidden)]:pt-0 sticky top-0 z-50"> <aside id="eyebrow" data-cookie="apollo-docs-eyebrow-hidden" aria-label="Apollo Summit 2026 promotional banner" class="flex eyebrow relative z-50 w-full min-h-[44px] items-center justify-center bg-silver-200 px-12 py-2.5 dark:bg-black-200"> <div class="flex items-center justify-center gap-[19px]"> <div class="relative hidden h-4 w-[62.5px] shrink-0 xl:block" aria-hidden="true"> <img src="/docs/_astro/summit-eyebrow-rectangle-1.BV0OFZF4.svg" alt="" width="16" height="16" class="absolute left-0 top-0 !h-4 !w-4"> <img src="/docs/_astro/summit-eyebrow-rectangle-2.BPPAQq_T.svg" alt="" width="16" height="16" class="absolute left-[23px] top-0 !h-4 !w-4"> <img src="/docs/_astro/summit-eyebrow-ellipse.CgSuQkdV.svg" alt="" width="16" height="16" class="absolute left-[46.5px] top-0 !h-4 !w-4"> </div> <p class="m-0 text-center font-heading text-sm font-normal leading-none text-black-100 dark:text-white xl:text-lg"> 121Apollo Summit 2026 · Oct 6â8 in SF. Use LIFTOFF26 for $100 off 122 </p> <a href="https://apollosummit.dev/?utm_campaign=docs_eyebrow" target="_blank" rel="noopener noreferrer" class="inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-full bg-[#1a1a1a] px-4 py-1 font-heading text-sm font-normal text-white no-underline transition-opacity duration-150 hover:opacity-[0.85] dark:bg-white dark:text-black xl:px-6 xl:text-lg"> Register </a> </div> <button data-close-button type="button" aria-label="Dismiss banner" class="absolute right-3 top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center border-0 bg-transparent p-1.5 text-black-100 transition-opacity duration-150 hover:opacity-70 dark:text-white"> <svg width="20" height="20" viewBox="0 0 47 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path d="m11.9557 35.57 11.5827-11.5827m11.5827-11.5827L23.5384 23.9873m0 0L11.9557 12.4046m11.5827 11.5827L35.1211 35.57" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </button> </aside> <div> <div class="grid min-h-0 grid-cols-[auto_minmax(0,_1fr)] items-stretch gap-6 px-4 pt-2 pb-2 md:px-6 md:pb-0"> <div class="flex h-full min-h-0 min-w-0 flex-row items-center gap-4 lg:gap-6"> <a class="hidden shrink-0 cursor-pointer flex-row items-center gap-x-2 self-center pb-3 text-heading-base dark:text-heading-dark [&>svg]:h-9 [&>svg]:fill-[currentColor] lg:flex" href="/docs"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677 232"><path fill="currentColor" d="M380.384 135.951a43.6 43.6 0 0 1-16.701 17.311q-10.726 6.248-24.439 6.246-13.711-.001-24.438-6.246a43.55 43.55 0 0 1-16.701-17.311q-5.976-11.064-5.974-24.777t5.974-24.779a43.6 43.6 0 0 1 16.701-17.31q10.724-6.244 24.438-6.246 13.716-.003 24.439 6.246a43.63 43.63 0 0 1 16.701 17.31q5.973 11.068 5.974 24.779 0 13.715-5.974 24.777m-64.22-8.757q3.259 7.062 9.233 11.065 5.973 4.005 13.849 4.006 7.739 0 13.712-4.006 5.975-4.005 9.233-11.065t3.258-16.02q0-8.962-3.258-16.021t-9.233-11.066q-5.973-4.006-13.712-4.005-7.877 0-13.849 4.005t-9.233 11.066q-3.258 7.06-3.258 16.021 0 8.96 3.258 16.02M670.937 135.951a43.6 43.6 0 0 1-16.701 17.311q-10.726 6.248-24.438 6.246-13.713-.001-24.439-6.246a43.56 43.56 0 0 1-16.701-17.311q-5.976-11.064-5.974-24.777t5.974-24.779a43.6 43.6 0 0 1 16.701-17.31q10.723-6.244 24.439-6.246t24.438 6.246a43.63 43.63 0 0 1 16.701 17.31q5.973 11.068 5.974 24.779 0 13.715-5.974 24.777m-64.219-8.757q3.258 7.062 9.232 11.065 5.974 4.005 13.849 4.006 7.738 0 13.713-4.006 5.973-4.005 9.232-11.065t3.258-16.02q0-8.962-3.258-16.021t-9.232-11.066-13.713-4.005q-7.876 0-13.849 4.005t-9.232 11.066-3.259 16.021q0 8.96 3.259 16.02M158.1 142.017l-4.483-12.738-5.902-16.773-4.27-12.138-5.59-15.886-6.494-18.452H99.864l-5.027 14.288-4.482 12.738-22.263 63.263h20.773l6.517-18.465h31.502l-5.59-15.887h-20.345l4.27-12.138 8.919-25.347 1.475-4.195 1.475 4.195 25.266 71.823.006.015h20.773zM261.993 74.108q7.059 8.08 7.059 20.84 0 13.443-6.992 21.656-6.992 8.215-21.655 8.215h-27.154v31.498h-20.774V66.03h47.928q14.527 0 21.588 8.078m-28.104 34.69q7.194 0 10.454-3.666t3.258-10.047q0-13.035-13.577-13.034h-20.773v26.747zM434.986 66.03v73.86h42.225v16.428h-62.998V66.03zM520.951 66.03v73.86h42.224v16.428h-62.997V66.03z"/>
122<path fill="currentColor" d="M179.013 36.657a12.043 12.043 0 0 0 11.492-15.648 12.04 12.04 0 0 0-18.374-6.273A115.64 115.64 0 0 0 .138 121.292a115.65 115.65 0 0 0 64.487 98.129 115.64 115.64 0 0 0 117.086-8.87 4.7 4.7 0 0 0 1.275-1.327 4.729 4.729 0 0 0 .633-3.554 4.713 4.713 0 0 0-5.619-3.593 4.7 4.7 0 0 0-1.686.738 106.2 106.2 0 0 1-107.405 8.17 106.195 106.195 0 1 1 98.208-188.243 12.04 12.04 0 0 0 2.743 9.697 12.05 12.05 0 0 0 9.153 4.218"/></svg> <div class="block rounded-sm border border-gray-300 px-2.5 py-1 text-sm font-medium uppercase tracking-widest dark:border-navy-300"> 123Docs 124</div> </a> <nav aria-label="Primary documentation sections" class="hidden h-full min-h-0 min-w-0 flex-1 overflow-visible lg:flex lg:flex-col lg:items-center"> <div class="flex min-w-0 flex-row items-center gap-x-4 overflow-x-auto scrollbar-hide"> <header-grouped-dropdown class="relative shrink-0"> <button type="button" data-header-dropdown-trigger aria-expanded="false" class="py-2 h-10 relative block w-max max-w-full bg-transparent text-left cursor-pointer no-underline hover:no-underline text-secondary-base dark:text-white font-normal hover:text-orange-400 dark:hover:text-orange-300"> <span class="flex flex-row text-nowrap items-center gap-0.5 pointer-events-none"> <span class="inline-block relative"> <span class="invisible font-normal">Products</span> <span class="absolute inset-0 text-center">Products</span> </span> <span class="w-4 h-4 shrink-0 [&>svg]:fill-current transition-transform data-[open]:rotate-180" data-header-dropdown-chevron> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg> </span> </span> </button> <template name="dropdown-content"> <div class="header-grouped-dropdown-panel opacity-0 transition-opacity duration-150 max-w-[min(100vw-2rem,26rem)] min-w-[20rem]"> <div class="flex flex-col items-stretch bg-white dark:bg-navy-450 dark:border-navy-400 border border-silver-400 shadow-md rounded-md max-h-[min(70vh,calc(100vh-8rem))] overflow-y-auto gap-4 px-6 py-4"> <section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Platform </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/graphos/platform" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo GraphOS Platform </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Manage, observe, and scale your graph. </span> </a> </div> </section><section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Graph Development </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/graphos/connectors" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Connectors </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Connect REST APIs to your graph declaratively. </span> </a><a href="https://www.apollographql.com/docs/graphos/schema-design" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Federation </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Federate multiple subgraphs into a single supergraph. </span> </a><a href="https://www.apollographql.com/docs/rover" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Rover CLI </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Interact with your graph from the command line. </span> </a> </div> </section><section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Graph Routing </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/graphos/routing" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Router </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Run and configure your graph gateway. </span> </a><a href="https://www.apollographql.com/docs/apollo-operator" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Operator </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Deploy and manage Apollo Router on Kubernetes. </span> </a> </div> </section> </div> </div> </template> </header-grouped-dropdown> <header-grouped-dropdown class="relative shrink-0"> <button type="button" data-header-dropdown-trigger aria-expanded="false" class="py-2 h-10 relative block w-max max-w-full bg-transparent text-left cursor-pointer no-underline hover:no-underline text-orange-400 dark:text-orange-300 font-bold hover:text-orange-400 dark:hover:text-orange-300"> <span class="flex flex-row text-nowrap items-center gap-0.5 pointer-events-none"> <span class="inline-block relative"> <span class="invisible font-bold">Open source</span> <span class="absolute inset-0 text-center">Open source</span> </span> <span class="w-4 h-4 shrink-0 [&>svg]:fill-current transition-transform data-[open]:rotate-180" data-header-dropdown-chevron> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m4 6 4 4 4-4"/></svg> </span> </span> </button> <template name="dropdown-content"> <div class="header-grouped-dropdown-panel opacity-0 transition-opacity duration-150 max-w-[min(100vw-2rem,26rem)] min-w-[20rem]"> <div class="flex flex-col items-stretch bg-white dark:bg-navy-450 dark:border-navy-400 border border-silver-400 shadow-md rounded-md max-h-[min(70vh,calc(100vh-8rem))] overflow-y-auto gap-4 px-6 py-4"> <section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Client SDKs </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/react" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Client (Web) </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Simplify GraphQL data management in web apps. </span> </a><a href="https://www.apollographql.com/docs/ios" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo iOS </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Swift-first GraphQL client for iOS. </span> </a><a href="https://www.apollographql.com/docs/kotlin" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Kotlin </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Kotlin-first GraphQL client for Android and JVM. </span> </a> </div> </section><section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Server Libraries </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/apollo-server" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo Server </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Build GraphQL servers with Node.js. </span> </a><a href="https://www.apollographql.com/docs/apollo-mcp-server" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> Apollo MCP Server </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Expose GraphQL tools to AI agents with MCP. </span> </a> </div> </section><section class="min-w-0"> <h3 class="text-xs font-bold uppercase tracking-wide text-secondary-base dark:text-gray-200"> Other Tools </h3> <div class="flex min-w-0 flex-col gap-0.5"> <a href="https://www.apollographql.com/docs/ide-support" class="group block w-full rounded-md px-2 py-1 text-left no-underline hover:no-underline transition-colors duration-150 hover:bg-silver-300 dark:hover:bg-navy-400"> <span class="block font-medium dark:text-white group-hover:text-primary-base dark:group-hover:text-silver-400"> IDE Support </span> <span class="mt-px block text-sm leading-snug text-secondary-base dark:text-gray-100"> Enhance your development workflow with IDE support. </span> </a> </div> </section> </div> </div> </template> </header-grouped-dropdown> <a href="https://www.apollographql.com/docs/graphos/resources" draggable="false" class="py-2 h-10 md:text-base text-nowrap relative block no-underline hover:no-underline text-secondary-base dark:text-white font-normal hover:text-orange-400 dark:hover:text-orange-300 shrink-0" data-astro-prefetch="load"> <span class="inline-block relative"> <span class="invisible font-normal">Resources</span> <span class="absolute inset-0 text-center">Resources</span> </span> </a> </div> </nav>
124 <div class="flex items-center gap-2 self-center pb-3 lg:hidden [&_svg]:h-6 [&_svg]:fill-[currentColor]"> <div id="hamburger" class="p-1.5 rounded cursor-pointer transition-all hover:bg-silver-400 dark:hover:bg-navy-400 block"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.906 11.752h12.188M1.906 8.002h12.188M1.906 4.252h12.188"/></svg> </div> <a href="/docs"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441 441"><path fill="currentColor" d="m315.708 281.197-10.062-28.595-13.251-37.652-9.586-27.249-12.548-35.661-14.577-41.421h-70.705l-11.286 32.074-10.063 28.595-49.974 142.015h46.633l14.629-41.453h70.718l-12.549-35.662h-45.672L197 208.94l20.021-56.9 3.309-9.418 3.31 9.418 56.72 161.23.013.033h46.632z"/><path fill="currentColor" d="M412.554 112.354a8.996 8.996 0 0 0-12.252-3.416 8.994 8.994 0 0 0-3.416 12.252A202.438 202.438 0 1 1 18.767 238.032a202.44 202.44 0 0 1 155.295-214.66 202.44 202.44 0 0 1 140.257 17.7 27.521 27.521 0 1 0 9.38-15.388 220.434 220.434 0 1 0 88.855 86.671z"/></svg> </a> </div> </div> <div class="flex h-full min-h-0 items-center justify-end gap-1 pb-3"> <div id="search-header-ssr-fallback" class="shrink-0 gap-1.5 [&>div>svg]:h-4 [&>div>svg]:fill-[currentColor] flex items-center justify-center whitespace-nowrap px-3.5 py-1.5 h-[37px] rounded-md text-sm font-normal transition-all active:scale-95 bg-silver-200 dark:bg-navy-450 border border-gray-300 dark:border-navy-300 text-black-100 dark:text-gray-100 hover:border-orange-400 dark:hover:border-orange-400 pointer-events-none select-none" aria-hidden="true"> <div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m10.638 10.637 4.393 4.394M1.42 8.848a5.665 5.665 0 1 0 10.428-4.432A5.665 5.665 0 0 0 1.42 8.848"/></svg></div> <span class="text-secondary-base dark:text-secondary-dark">Search Apollo content (Cmd+K or /)</span> </div>
124<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script>
124<astro-island uid="Z6cBPA" component-url="/docs/_astro/Autocomplete.ChVKe_rL.js" component-export="Autocomplete" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{}" ssr="" client="only" opts="{"name":"Autocomplete","value":"react"}"></astro-island> <button id="themeToggle" class="shrink-0 [&>div>svg]:h-4 [&>div>svg]:fill-[currentColor] hidden lg:flex items-center justify-center whitespace-nowrap px-3.5 py-1.5 h-[37px] rounded-md text-sm font-normal transition-all active:scale-95 bg-silver-200 dark:bg-navy-450 border border-gray-300 dark:border-navy-300 text-black-100 dark:text-gray-100 hover:border-orange-400 dark:hover:border-orange-400"> <div class="dark:hidden"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.99 2.844h2.813M9.397 1.438V4.25m2.812 1.406h1.875m-.937-.937v1.875m-1.875 3.75a6.096 6.096 0 0 1-5.828-7.875 6.091 6.091 0 1 0 8.375 7.313 6.06 6.06 0 0 1-2.547.562"/></svg> </div> <div class="hidden dark:block"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 1.906V.97m4.309 2.722.663-.663M14.094 8h.937m-2.722 4.309.663.663M8 14.094v.937M3.691 12.31l-.663.663M1.906 8H.97M3.69 3.691l-.663-.663M3.781 8a4.219 4.219 0 1 0 8.438 0A4.219 4.219 0 0 0 3.78 8"/></svg> </div> </button> <a href="https://studio.apollographql.com/signup?referrer=docs" target="_blank" class="hidden lg:flex items-center justify-center whitespace-nowrap px-3.5 py-1.5 h-[37px] rounded-md text-sm font-normal transition-all active:scale-95 bg-silver-200 dark:bg-navy-450 border border-gray-300 dark:border-navy-300 text-black-100 dark:text-gray-100 hover:border-orange-400 dark:hover:border-orange-400" id="launch-graphos-studio" data-cta-label="Sign In" data-cta-location="header_primary_cta">Sign In</a> </div> </div> <div class="hidden md:block"> </div> </div>
124<script data-css-variable="--header-height"> 125 (() => { 126 const script = document.currentScript; 127 const cssVariable = script?.getAttribute("data-css-variable"); 128 const parent = script?.parentElement; 129 if (!parent || !cssVariable || !parent) return; 130 const updateHeight = () => { 131 const height = parent.clientHeight; 132 document.documentElement.style.setProperty(cssVariable, `${height}px`); 133 }; 134 updateHeight(); 135 const resizeObserver = new ResizeObserver(updateHeight); 136 resizeObserver.observe(parent); 137 })(); 138</script>
138 </header> <div class="grid grid-cols-[auto_1fr] grid-flow-row"> <div class="sticky top-[var(--header-height)] self-start z-40"> <astro-island uid="1hTQ1A" prefix="r4" component-url="/docs/_astro/Sidebar.B4qMzBUe.js" component-export="Sidebar" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{"collapsed":[0,"false"],"sidebar":[0,{"defaultOpenDepth":[0,0],"items":[1,[[0,{"label":[0,"Introduction"],"href":[0,"/react"]}],[0,{"label":[0,"Why Apollo Client?"],"href":[0,"/react/why-apollo"]}],[0,{"label":[0,"Get started"],"href":[0,"/react/get-started"]}],[0,{"label":[0,"Core concepts"],"children":[1,[[0,{"label":[0,"Queries"],"href":[0,"/react/data/queries"]}],[0,{"label":[0,"Suspense"],"href":[0,"/react/data/suspense"]}],[0,{"label":[0,"Fragments"],"href":[0,"/react/data/fragments"]}],[0,{"label":[0,"Mutations"],"href":[0,"/react/data/mutations"]}],[0,{"label":[0,"TypeScript"],"href":[0,"/react/data/typescript"]}],[0,{"label":[0,"Refetching"],"href":[0,"/react/data/refetching"]}],[0,{"label":[0,"Custom scalars"],"href":[0,"/react/data/custom-scalars"]}],[0,{"label":[0,"Event-based refetching"],"href":[0,"/react/data/event-based-refetching"]}],[0,{"label":[0,"Subscriptions"],"href":[0,"/react/data/subscriptions"]}],[0,{"label":[0,"Directives"],"href":[0,"/react/data/directives"]}],[0,{"label":[0,"Error handling"],"href":[0,"/react/data/error-handling"]}],[0,{"label":[0,"Persisted queries"],"href":[0,"/react/data/persisted-queries"]}],[0,{"label":[0,"Document transforms"],"href":[0,"/react/data/document-transforms"]}],[0,{"label":[0,"Deferring response data"],"href":[0,"/react/data/defer"]}],[0,{"label":[0,"Best practices"],"href":[0,"/react/data/operation-best-practices"]}]]]}],[0,{"label":[0,"Caching"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/caching/overview"]}],[0,{"label":[0,"Configuration"],"href":[0,"/react/caching/cache-configuration"]}],[0,{"label":[0,"Reading and writing"],"href":[0,"/react/caching/cache-interaction"]}],[0,{"label":[0,"Garbage collection and eviction"],"href":[0,"/react/caching/garbage-collection"]}],[0,{"label":[0,"Customizing field behavior"],"href":[0,"/react/caching/cache-field-behavior"]}],[0,{"label":[0,"Memory Management"],"href":[0,"/react/caching/memory-management"]}],[0,{"label":[0,"Advanced topics"],"href":[0,"/react/caching/advanced-topics"]}]]]}],[0,{"label":[0,"Pagination"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/pagination/overview"]}],[0,{"label":[0,"Core API"],"href":[0,"/react/pagination/core-api"]}],[0,{"label":[0,"Offset-based"],"href":[0,"/react/pagination/offset-based"]}],[0,{"label":[0,"Cursor-based"],"href":[0,"/react/pagination/cursor-based"]}],[0,{"label":[0,"keyArgs"],"href":[0,"/react/pagination/key-args"]}]]]}],[0,{"label":[0,"Local State"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/local-state/local-state-management"]}],[0,{"label":[0,"Local-only fields"],"href":[0,"/react/local-state/managing-state-with-field-policies"]}],[0,{"label":[0,"Reactive variables"],"href":[0,"/react/local-state/reactive-variables"]}],[0,{"label":[0,"Local resolvers"],"href":[0,"/react/local-state/local-resolvers"]}]]]}],[0,{"label":[0,"Development & Testing"],"children":[1,[[0,{"label":[0,"Developer tools"],"href":[0,"/react/development-testing/developer-tooling"]}],[0,{"label":[0,"GraphQL Codegen"],"href":[0,"/react/development-testing/graphql-codegen"]}],[0,{"label":[0,"Testing React components"],"href":[0,"/react/development-testing/testing"]}],[0,{"label":[0,"Schema-driven testing"],"href":[0,"/react/development-testing/schema-driven-testing"]}],[0,{"label":[0,"Mocking schema capabilities"],"href":[0,"/react/development-testing/client-schema-mocking"]}],[0,{"label":[0,"Reducing bundle size"],"href":[0,"/react/development-testing/reducing-bundle-size"]}]]]}],[0,{"label":[0,"Performance"],"children":[1,[[0,{"label":[0,"Improving performance"],"href":[0,"/react/performance/performance"]}],[0,{"label":[0,"Optimistic mutation results"],"href":[0,"/react/performance/optimistic-ui"]}],[0,{"label":[0,"Server-side rendering"],"href":[0,"/react/performance/server-side-rendering"]}],[0,{"label":[0,"Compiling queries with Babel"],"href":[0,"/react/performance/babel"]}]]]}],[0,{"label":[0,"Integrations"],"children":[1,[[0,{"label":[0,"Using Apollo Client with your view layer"],"href":[0,"/react/integrations/integrations"]}],[0,{"label":[0,"Next.js App Router"],"href":[0,"/react/integrations/nextjs"]}],[0,{"label":[0,"React Router framework mode"],"href":[0,"/react/integrations/react-router"]}],[0,{"label":[0,"TanStack Start"],"href":[0,"/react/integrations/tanstack-start"]}],[0,{"label":[0,"Integrating with React Native"],"href":[0,"/react/integrations/react-native"]}],[0,{"label":[0,"Loading queries with Webpack"],"href":[0,"/react/integrations/webpack"]}]]]}],[0,{"label":[0,"Networking"],"children":[1,[[0,{"label":[0,"Basic HTTP networking"],"href":[0,"/react/networking/basic-http-networking"]}],[0,{"label":[0,"Advanced HTTP networking"],"href":[0,"/react/networking/advanced-http-networking"]}],[0,{"label":[0,"Authentication"],"href":[0,"/react/networking/authentication"]}]]]}],[0,{"label":[0,"API Reference"],"children":[1,[[0,{"label":[0,"Core"],"children":[1,[[0,{"label":[0,"ApolloClient"],"href":[0,"/react/api/core/ApolloClient"]}],[0,{"label":[0,"InMemoryCache"],"href":[0,"/react/api/cache/InMemoryCache"]}],[0,{"label":[0,"ObservableQuery"],"href":[0,"/react/api/core/ObservableQuery"]}]]]}],[0,{"label":[0,"Errors"],"children":[1,[[0,{"label":[0,"CombinedGraphQLErrors"],"href":[0,"/react/api/errors/CombinedGraphQLErrors"]}],[0,{"label":[0,"CombinedProtocolErrors"],"href":[0,"/react/api/errors/CombinedProtocolErrors"]}],[0,{"label":[0,"LinkError"],"href":[0,"/react/api/errors/LinkError"]}],[0,{"label":[0,"LocalStateError"],"href":[0,"/react/api/errors/LocalStateError"]}],[0,{"label":[0,"ServerError"],"href":[0,"/react/api/errors/ServerError"]}],[0,{"label":[0,"ServerParseError"],"href":[0,"/react/api/errors/ServerParseError"]}],[0,{"label":[0,"UnconventionalError"],"href":[0,"/react/api/errors/UnconventionalError"]}]]]}],[0,{"label":[0,"React"],"children":[1,[[0,{"label":[0,"ApolloProvider"],"href":[0,"/react/api/react/ApolloProvider"]}],[0,{"label":[0,"useQuery"],"href":[0,"/react/api/react/useQuery"]}],[0,{"label":[0,"useLazyQuery"],"href":[0,"/react/api/react/useLazyQuery"]}],[0,{"label":[0,"useMutation"],"href":[0,"/react/api/react/useMutation"]}],[0,{"label":[0,"useSubscription"],"href":[0,"/react/api/react/useSubscription"]}],[0,{"label":[0,"useFragment"],"href":[0,"/react/api/react/useFragment"]}],[0,{"label":[0,"useApolloClient"],"href":[0,"/react/api/react/useApolloClient"]}],[0,{"label":[0,"useReactiveVar"],"href":[0,"/react/api/react/useReactiveVar"]}],[0,{"label":[0,"useSuspenseQuery"],"href":[0,"/react/api/react/useSuspenseQuery"]}],[0,{"label":[0,"
138useBackgroundQuery"],"href":[0,"/react/api/react/useBackgroundQuery"]}],[0,{"label":[0,"useReadQuery"],"href":[0,"/react/api/react/useReadQuery"]}],[0,{"label":[0,"useLoadableQuery"],"href":[0,"/react/api/react/useLoadableQuery"]}],[0,{"label":[0,"useQueryRefHandlers"],"href":[0,"/react/api/react/useQueryRefHandlers"]}],[0,{"label":[0,"skipToken"],"href":[0,"/react/api/react/skipToken"]}],[0,{"label":[0,"createQueryPreloader"],"href":[0,"/react/api/react/preloading"]}],[0,{"label":[0,"MockProvider"],"href":[0,"/react/api/react/testing"]}],[0,{"label":[0,"SSR"],"href":[0,"/react/api/react/ssr"]}]]]}],[0,{"label":[0,"Apollo Link"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/api/link/introduction"]}],[0,{"label":[0,"ApolloLink"],"href":[0,"/react/api/link/apollo-link"]}],[0,{"label":[0,"BaseHttpLink"],"href":[0,"/react/api/link/apollo-link-base-http"]}],[0,{"label":[0,"BaseBatchHttpLink"],"href":[0,"/react/api/link/apollo-link-base-batch-http"]}],[0,{"label":[0,"BatchHttpLink"],"href":[0,"/react/api/link/apollo-link-batch-http"]}],[0,{"label":[0,"BatchLink"],"href":[0,"/react/api/link/apollo-link-batch"]}],[0,{"label":[0,"ClientAwarenessLink"],"href":[0,"/react/api/link/apollo-link-client-awareness"]}],[0,{"label":[0,"ErrorLink"],"href":[0,"/react/api/link/apollo-link-error"]}],[0,{"label":[0,"GraphQLWsLink"],"href":[0,"/react/api/link/apollo-link-subscriptions"]}],[0,{"label":[0,"HttpLink"],"href":[0,"/react/api/link/apollo-link-http"]}],[0,{"label":[0,"PersistedQueryLink"],"href":[0,"/react/api/link/apollo-link-persisted-queries"]}],[0,{"label":[0,"RemoveTypenameFromVariablesLink"],"href":[0,"/react/api/link/apollo-link-remove-typename"]}],[0,{"label":[0,"RetryLink"],"href":[0,"/react/api/link/apollo-link-retry"]}],[0,{"label":[0,"SchemaLink"],"href":[0,"/react/api/link/apollo-link-schema"]}],[0,{"label":[0,"SetContextLink"],"href":[0,"/react/api/link/apollo-link-context"]}],[0,{"label":[0,"WebSocketLink (deprecated)"],"href":[0,"/react/api/link/apollo-link-ws"]}],[0,{"label":[0,"Community links"],"href":[0,"/react/api/link/community-links"]}]]]}]]]}],[0,{"label":[0,"Changelog"],"href":[0,"https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md"]}],[0,{"label":[0,"Migrating to Apollo Client 4.0"],"href":[0,"/react/migrating/apollo-client-4-migration"]}],[0,{"label":[0,"Versioning Policy"],"href":[0,"/react/versioning-policy"]}]]],"switcher":[0,{"heading":[0,"Apollo Client (Web)"],"versions":[1,[[0,{"label":[0,"v4"],"href":[0,"/react"],"latest":[0,true]}],[0,{"label":[0,"v3"],"href":[0,"/react/v3"]}],[0,{"label":[0,"v2"],"href":[0,"/react/v2"]}]]]}],"visibility":[0,{"flag":[0,null],"internal":[0,false],"devOnly":[0,false]}]}],"sectionTitle":[0,"Apollo Client (Web)"],"currentUrl":[0,"https://www.apollographql.com/docs/react"],"baseUrl":[0,"/docs"]}" ssr="" client="load" opts="{"name":"Sidebar","value":true}" await-children=""><div style="left:calc(100% + 1rem);top:calc(var(--banner-height, 6px) + 16px);
138transform:scaleX(1)" class="absolute transition-all duration-250 h-7 w-7 rounded p-1.5 cursor-pointer hover:bg-silver-400 dark:hover:bg-navy-400 z-40 hidden lg:block"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m7.333 4-4 4 4 4m5.334-8-4 4 4 4"/></svg></div><div style="width:305px" class="relative hidden transition-all duration-200 ease-in-out lg:block h-[calc(100dvh-var(--header-height))] sidebar-container"><nav style="width:305px" class="absolute right-0 top-0 bottom-0 border-r border-silver-300 dark:border-navy-400 flex flex-col"><div class="px-8 pt-6 shrink-0 border-silver-300 dark:border-navy-400"><h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Apollo Client (Web)</h2></div><div class="px-8 shrink-0 border-silver-300 dark:border-navy-400 pt-2 pb-4"><div class="relative inline-block text-left z-10 mb-4 w-full"><div><div class="cursor-pointer inline-flex w-full justify-start items-center gap-x-1.5 rounded-md bg-white dark:bg-black-dark px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-orange-300 hover:bg-silver-400 dark:hover:bg-navy-450 pr-6" id="menu-button" aria-expanded="true" aria-haspopup="true"><span>Apollo Client (Web) - <!-- -->v4<!-- --> (latest)</span><svg class="absolute right-1 mr-1 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></div></div></div></div><div class="flex-1 px-8 overflow-y-auto gap-y-1 overflow-x-visible pt-0 pb-4"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 text-body-secondary-base bg-silver-300 dark:bg-navy-400" href="https://www.apollographql.com/docs/react" data-astro-prefetch="viewport" data-active="active">Introduction</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/why-apollo" data-astro-prefetch="viewport">Why Apollo Client?</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/get-started" data-astro-prefetch="viewport">Get started</a><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Core concepts</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/queries" data-astro-prefetch="viewport">Queries</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/suspense" data-astro-prefetch="viewport">Suspense</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/fragments" data-astro-prefetch="viewport">Fragments</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/mutations" data-astro-prefetch="viewport">Mutations</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/typescript" data-astro-prefetch="viewport">TypeScript</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/refetching" data-astro-prefetch="viewport">Refetching</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/custom-scalars" data-astro-prefetch="viewport">Custom scalars</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/event-based-refetching" data-astro-prefetch="viewport">Event-based refetching</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/subscriptions" data-astro-prefetch="viewport">Subscriptions</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/directives" data-astro-prefetch="viewport">Directives</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/error-handling" data-astro-prefetch="viewport">Error handling</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/persisted-queries" data-astro-prefetch="viewport">Persisted queries</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/document-transforms" data-astro-prefetch="viewport">Document transforms</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/defer" data-astro-prefetch="viewport">Deferring response data</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/operation-best-practices" data-astro-prefetch="viewport">Best practices</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Caching</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/overview" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-configuration" data-astro-prefetch="viewport">Configuration</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-interaction" data-astro-prefetch="viewport">Reading and writing</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/garbage-collection" data-astro-prefetch="viewport">Garbage collection and eviction</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-field-behavior" data-astro-prefetch="viewport">Customizing field behavior</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/memory-management" data-astro-prefetch="viewport">Memory Management</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/advanced-topics" data-astro-prefetch="viewport">Advanced topics</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Pagination</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/overview" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/core-api" data-astro-prefetch="viewport">Core API</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/offset-based" data-astro-prefetch="viewport">Offset-based</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/cursor-based" data-astro-prefetch="viewport">Cursor-based</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/key-args" data-astro-prefetch="viewport">keyArgs</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Local State</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/local-state-management" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies" data-astro-prefetch="viewport">Local-only fields</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/reactive-variables" data-astro-prefetch="viewport">Reactive variables</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/local-resolvers" data-astro-prefetch="viewport">Local resolvers</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Development & Testing</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/developer-tooling" data-astro-prefetch="viewport">Developer tools</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/graphql-codegen" data-astro-prefetch="viewport">GraphQL Codegen</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/testing" data-astro-prefetch="viewport">Testing React components</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/schema-driven-testing" data-astro-prefetch="viewport">Schema-driven testing</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/client-schema-mocking" data-astro-prefetch="viewport">Mocking schema capabilities</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/reducing-bundle-size" data-astro-prefetch="viewport">Reducing bundle size</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Performance</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/performance" data-astro-prefetch="viewport">Improving performance</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/optimistic-ui" data-astro-prefetch="viewport">Optimistic mutation results</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/server-side-rendering" data-astro-prefetch="viewport">Server-side rendering</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/babel" data-astro-prefetch="viewport">Compiling queries with Babel</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Integrations</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/integrations" data-astro-prefetch="viewport">Using Apollo Client with your view layer</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/nextjs" data-astro-prefetch="viewport">Next.js App Router</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/react-router" data-astro-prefetch="viewport">React Router framework mode</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/tanstack-start" data-astro-prefetch="viewport">TanStack Start</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/react-native" data-astro-prefetch="viewport">Integrating with React Native</a
138><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/webpack" data-astro-prefetch="viewport">Loading queries with Webpack</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">Networking</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/basic-http-networking" data-astro-prefetch="viewport">Basic HTTP networking</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/advanced-http-networking" data-astro-prefetch="viewport">Advanced HTTP networking</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/authentication" data-astro-prefetch="viewport">Authentication</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-xs">API Reference</div><div class="flex flex-col"><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-1"><h3 class="list flex-1 min-w-0">Core</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/core/ApolloClient" data-astro-prefetch="viewport">ApolloClient</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/cache/InMemoryCache" data-astro-prefetch="viewport">InMemoryCache</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/core/ObservableQuery" data-astro-prefetch="viewport">ObservableQuery</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-1"><h3 class="list flex-1 min-w-0">Errors</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/CombinedGraphQLErrors" data-astro-prefetch="viewport">CombinedGraphQLErrors</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/CombinedProtocolErrors" data-astro-prefetch="viewport">CombinedProtocolErrors</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/LinkError" data-astro-prefetch="viewport">LinkError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/LocalStateError" data-astro-prefetch="viewport">LocalStateError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/ServerError" data-astro-prefetch="viewport">ServerError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/ServerParseError" data-astro-prefetch="viewport">ServerParseError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/UnconventionalError" data-astro-prefetch="viewport">UnconventionalError</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-1"><h3 class="list flex-1 min-w-0">React</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/ApolloProvider" data-astro-prefetch="viewport">ApolloProvider</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useQuery" data-astro-prefetch="viewport">useQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useLazyQuery" data-astro-prefetch="viewport">useLazyQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useMutation" data-astro-prefetch="viewport">useMutation</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useSubscription" data-astro-prefetch="viewport">useSubscription</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useFragment" data-astro-prefetch="viewport">useFragment</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useApolloClient" data-astro-prefetch="viewport">useApolloClient</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useReactiveVar" data-astro-prefetch="viewport">useReactiveVar</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useSuspenseQuery" data-astro-prefetch="viewport">useSuspenseQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useBackgroun
138dQuery" data-astro-prefetch="viewport">useBackgroundQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useReadQuery" data-astro-prefetch="viewport">useReadQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useLoadableQuery" data-astro-prefetch="viewport">useLoadableQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useQueryRefHandlers" data-astro-prefetch="viewport">useQueryRefHandlers</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/skipToken" data-astro-prefetch="viewport">skipToken</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/preloading" data-astro-prefetch="viewport">createQueryPreloader</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/testing" data-astro-prefetch="viewport">MockProvider</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/ssr" data-astro-prefetch="viewport">SSR</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-1"><h3 class="list flex-1 min-w-0">Apollo Link</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/introduction" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link" data-astro-prefetch="viewport">ApolloLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-base-http" data-astro-prefetch="viewport">BaseHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-base-batch-http" data-astro-prefetch="viewport">BaseBatchHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-batch-http" data-astro-prefetch="viewport">BatchHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-batch" data-astro-prefetch="viewport">BatchLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-client-awareness" data-astro-prefetch="viewport">ClientAwarenessLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-error" data-astro-prefetch="viewport">ErrorLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-subscriptions" data-astro-prefetch="viewport">GraphQLWsLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-http" data-astro-prefetch="viewport">HttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-persisted-queries" data-astro-prefetch="viewport">PersistedQueryLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-remove-typename" data-astro-prefetch="viewport">RemoveTypenameFromVariablesLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-retry" data-astro-prefetch="viewport">RetryLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-schema" data-astro-prefetch="viewport">SchemaLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-context" data-astro-prefetch="viewport">SetContextLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-ws" data-astro-prefetch="viewport">WebSocketLink (deprecated)</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/community-links" data-astro-prefetch="viewport">Community links</a></div></section></div></section><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md" target="_blank" data-astro-prefetch="viewport">Changelog<span class="w-4 ml-2 inline-flex"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/migrating/apollo-client-4-migration" data-astro-prefetch="viewport">Migrating to Apollo Client 4.0</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-1 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/versioning-policy" data-astro-prefetch="viewport">Versioning Policy</a></div><div class="px-4 h-16 flex flex-row items-center border-t border-silver-300 dark:border-navy-400 "><div class="mr-auto text-sm font-semibold">Navigation controls</div><button class="flex items-center justify-center w-6 h-6 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-silver-400 border border-silver-500 dark:border-navy-300 dark:hover:bg-navy-400 rounded-s-md border-r-0" aria-label="Collapse all" title="Collapse all"><div class="w-[var(--icon-size)] h-[var(--icon-size)] text-current fill-none" style="--icon-size:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.333 2.667 8 6 4.667 2.667m6.666 10.666L8 10l-3.333 3.333"/></svg></div></button><button class="flex items-center justify-center w-6 h-6 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-silver-400 border-silver-500 dark:hover:bg-navy-400 rounded-e-md border dark:border-navy-300" aria-label="Expand all" title="Expand all"><div class="w-[var(--icon-size)] h-[var(--icon-size)] text-current fill-none" style="--icon-size:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.333 5.333 8 2 4.667 5.333m6.666 5.334L8 14l-3.333-3.333"/></svg></div></button></div></nav></div><!--astro:end--></astro-island>
138<script> 139 const sidebarContainer = document.querySelector(".sidebar-container"); 140 const activeElement = sidebarContainer?.querySelector("a[data-active]"); 141 if (activeElement) { 142 activeElement.scrollIntoView({ block: "center" }); 143 } 144</script>
144<astro-island uid="1HLP1u" prefix="r5" component-url="/docs/_astro/SidebarMobile.C1Hoo1PV.js" component-export="SidebarMobile" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{"sidebar":[0,{"defaultOpenDepth":[0,0],"items":[1,[[0,{"label":[0,"Introduction"],"href":[0,"/react"]}],[0,{"label":[0,"Why Apollo Client?"],"href":[0,"/react/why-apollo"]}],[0,{"label":[0,"Get started"],"href":[0,"/react/get-started"]}],[0,{"label":[0,"Core concepts"],"children":[1,[[0,{"label":[0,"Queries"],"href":[0,"/react/data/queries"]}],[0,{"label":[0,"Suspense"],"href":[0,"/react/data/suspense"]}],[0,{"label":[0,"Fragments"],"href":[0,"/react/data/fragments"]}],[0,{"label":[0,"Mutations"],"href":[0,"/react/data/mutations"]}],[0,{"label":[0,"TypeScript"],"href":[0,"/react/data/typescript"]}],[0,{"label":[0,"Refetching"],"href":[0,"/react/data/refetching"]}],[0,{"label":[0,"Custom scalars"],"href":[0,"/react/data/custom-scalars"]}],[0,{"label":[0,"Event-based refetching"],"href":[0,"/react/data/event-based-refetching"]}],[0,{"label":[0,"Subscriptions"],"href":[0,"/react/data/subscriptions"]}],[0,{"label":[0,"Directives"],"href":[0,"/react/data/directives"]}],[0,{"label":[0,"Error handling"],"href":[0,"/react/data/error-handling"]}],[0,{"label":[0,"Persisted queries"],"href":[0,"/react/data/persisted-queries"]}],[0,{"label":[0,"Document transforms"],"href":[0,"/react/data/document-transforms"]}],[0,{"label":[0,"Deferring response data"],"href":[0,"/react/data/defer"]}],[0,{"label":[0,"Best practices"],"href":[0,"/react/data/operation-best-practices"]}]]]}],[0,{"label":[0,"Caching"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/caching/overview"]}],[0,{"label":[0,"Configuration"],"href":[0,"/react/caching/cache-configuration"]}],[0,{"label":[0,"Reading and writing"],"href":[0,"/react/caching/cache-interaction"]}],[0,{"label":[0,"Garbage collection and eviction"],"href":[0,"/react/caching/garbage-collection"]}],[0,{"label":[0,"Customizing field behavior"],"href":[0,"/react/caching/cache-field-behavior"]}],[0,{"label":[0,"Memory Management"],"href":[0,"/react/caching/memory-management"]}],[0,{"label":[0,"Advanced topics"],"href":[0,"/react/caching/advanced-topics"]}]]]}],[0,{"label":[0,"Pagination"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/pagination/overview"]}],[0,{"label":[0,"Core API"],"href":[0,"/react/pagination/core-api"]}],[0,{"label":[0,"Offset-based"],"href":[0,"/react/pagination/offset-based"]}],[0,{"label":[0,"Cursor-based"],"href":[0,"/react/pagination/cursor-based"]}],[0,{"label":[0,"keyArgs"],"href":[0,"/react/pagination/key-args"]}]]]}],[0,{"label":[0,"Local State"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/local-state/local-state-management"]}],[0,{"label":[0,"Local-only fields"],"href":[0,"/react/local-state/managing-state-with-field-policies"]}],[0,{"label":[0,"Reactive variables"],"href":[0,"/react/local-state/reactive-variables"]}],[0,{"label":[0,"Local resolvers"],"href":[0,"/react/local-state/local-resolvers"]}]]]}],[0,{"label":[0,"Development & Testing"],"children":[1,[[0,{"label":[0,"Developer tools"],"href":[0,"/react/development-testing/developer-tooling"]}],[0,{"label":[0,"GraphQL Codegen"],"href":[0,"/react/development-testing/graphql-codegen"]}],[0,{"label":[0,"Testing React components"],"href":[0,"/react/development-testing/testing"]}],[0,{"label":[0,"Schema-driven testing"],"href":[0,"/react/development-testing/schema-driven-testing"]}],[0,{"label":[0,"Mocking schema capabilities"],"href":[0,"/react/development-testing/client-schema-mocking"]}],[0,{"label":[0,"Reducing bundle size"],"href":[0,"/react/development-testing/reducing-bundle-size"]}]]]}],[0,{"label":[0,"Performance"],"children":[1,[[0,{"label":[0,"Improving performance"],"href":[0,"/react/performance/performance"]}],[0,{"label":[0,"Optimistic mutation results"],"href":[0,"/react/performance/optimistic-ui"]}],[0,{"label":[0,"Server-side rendering"],"href":[0,"/react/performance/server-side-rendering"]}],[0,{"label":[0,"Compiling queries with Babel"],"href":[0,"/react/performance/babel"]}]]]}],[0,{"label":[0,"Integrations"],"children":[1,[[0,{"label":[0,"Using Apollo Client with your view layer"],"href":[0,"/react/integrations/integrations"]}],[0,{"label":[0,"Next.js App Router"],"href":[0,"/react/integrations/nextjs"]}],[0,{"label":[0,"React Router framework mode"],"href":[0,"/react/integrations/react-router"]}],[0,{"label":[0,"TanStack Start"],"href":[0,"/react/integrations/tanstack-start"]}],[0,{"label":[0,"Integrating with React Native"],"href":[0,"/react/integrations/react-native"]}],[0,{"label":[0,"Loading queries with Webpack"],"href":[0,"/react/integrations/webpack"]}]]]}],[0,{"label":[0,"Networking"],"children":[1,[[0,{"label":[0,"Basic HTTP networking"],"href":[0,"/react/networking/basic-http-networking"]}],[0,{"label":[0,"Advanced HTTP networking"],"href":[0,"/react/networking/advanced-http-networking"]}],[0,{"label":[0,"Authentication"],"href":[0,"/react/networking/authentication"]}]]]}],[0,{"label":[0,"API Reference"],"children":[1,[[0,{"label":[0,"Core"],"children":[1,[[0,{"label":[0,"ApolloClient"],"href":[0,"/react/api/core/ApolloClient"]}],[0,{"label":[0,"InMemoryCache"],"href":[0,"/react/api/cache/InMemoryCache"]}],[0,{"label":[0,"ObservableQuery"],"href":[0,"/react/api/core/ObservableQuery"]}]]]}],[0,{"label":[0,"Errors"],"children":[1,[[0,{"label":[0,"CombinedGraphQLErrors"],"href":[0,"/react/api/errors/CombinedGraphQLErrors"]}],[0,{"label":[0,"CombinedProtocolErrors"],"href":[0,"/react/api/errors/CombinedProtocolErrors"]}],[0,{"label":[0,"LinkError"],"href":[0,"/react/api/errors/LinkError"]}],[0,{"label":[0,"LocalStateError"],"href":[0,"/react/api/errors/LocalStateError"]}],[0,{"label":[0,"ServerError"],"href":[0,"/react/api/errors/ServerError"]}],[0,{"label":[0,"ServerParseError"],"href":[0,"/react/api/errors/ServerParseError"]}],[0,{"label":[0,"UnconventionalError"],"href":[0,"/react/api/errors/UnconventionalError"]}]]]}],[0,{"label":[0,"React"],"children":[1,[[0,{"label":[0,"ApolloProvider"],"href":[0,"/react/api/react/ApolloProvider"]}],[0,{"label":[0,"useQuery"],"href":[0,"/react/api/react/useQuery"]}],[0,{"label":[0,"useLazyQuery"],"href":[0,"/react/api/react/useLazyQuery"]}],[0,{"label":[0,"useMutation"],"href":[0,"/react/api/react/useMutation"]}],[0,{"label":[0,"useSubscription"],"href":[0,"/react/api/react/useSubscription"]}],[0,{"label":[0,"useFragment"],"href":[0,"/react/api/react/useFragment"]}],[0,{"label":[0,"useApolloClient"],"href":[0,"/react/api/react/useApolloClient"]}],[0,{"label":[0,"useReactiveVar"],"href":[0,"/react/api/react/useReactiveVar"]}],[0,{"label":[0,"useSuspenseQuery"],"href":[0,"/react/api/react/useSuspenseQuery"]}],[0,{"label":[0,"
144useBackgroundQuery"],"href":[0,"/react/api/react/useBackgroundQuery"]}],[0,{"label":[0,"useReadQuery"],"href":[0,"/react/api/react/useReadQuery"]}],[0,{"label":[0,"useLoadableQuery"],"href":[0,"/react/api/react/useLoadableQuery"]}],[0,{"label":[0,"useQueryRefHandlers"],"href":[0,"/react/api/react/useQueryRefHandlers"]}],[0,{"label":[0,"skipToken"],"href":[0,"/react/api/react/skipToken"]}],[0,{"label":[0,"createQueryPreloader"],"href":[0,"/react/api/react/preloading"]}],[0,{"label":[0,"MockProvider"],"href":[0,"/react/api/react/testing"]}],[0,{"label":[0,"SSR"],"href":[0,"/react/api/react/ssr"]}]]]}],[0,{"label":[0,"Apollo Link"],"children":[1,[[0,{"label":[0,"Overview"],"href":[0,"/react/api/link/introduction"]}],[0,{"label":[0,"ApolloLink"],"href":[0,"/react/api/link/apollo-link"]}],[0,{"label":[0,"BaseHttpLink"],"href":[0,"/react/api/link/apollo-link-base-http"]}],[0,{"label":[0,"BaseBatchHttpLink"],"href":[0,"/react/api/link/apollo-link-base-batch-http"]}],[0,{"label":[0,"BatchHttpLink"],"href":[0,"/react/api/link/apollo-link-batch-http"]}],[0,{"label":[0,"BatchLink"],"href":[0,"/react/api/link/apollo-link-batch"]}],[0,{"label":[0,"ClientAwarenessLink"],"href":[0,"/react/api/link/apollo-link-client-awareness"]}],[0,{"label":[0,"ErrorLink"],"href":[0,"/react/api/link/apollo-link-error"]}],[0,{"label":[0,"GraphQLWsLink"],"href":[0,"/react/api/link/apollo-link-subscriptions"]}],[0,{"label":[0,"HttpLink"],"href":[0,"/react/api/link/apollo-link-http"]}],[0,{"label":[0,"PersistedQueryLink"],"href":[0,"/react/api/link/apollo-link-persisted-queries"]}],[0,{"label":[0,"RemoveTypenameFromVariablesLink"],"href":[0,"/react/api/link/apollo-link-remove-typename"]}],[0,{"label":[0,"RetryLink"],"href":[0,"/react/api/link/apollo-link-retry"]}],[0,{"label":[0,"SchemaLink"],"href":[0,"/react/api/link/apollo-link-schema"]}],[0,{"label":[0,"SetContextLink"],"href":[0,"/react/api/link/apollo-link-context"]}],[0,{"label":[0,"WebSocketLink (deprecated)"],"href":[0,"/react/api/link/apollo-link-ws"]}],[0,{"label":[0,"Community links"],"href":[0,"/react/api/link/community-links"]}]]]}]]]}],[0,{"label":[0,"Changelog"],"href":[0,"https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md"]}],[0,{"label":[0,"Migrating to Apollo Client 4.0"],"href":[0,"/react/migrating/apollo-client-4-migration"]}],[0,{"label":[0,"Versioning Policy"],"href":[0,"/react/versioning-policy"]}]]],"switcher":[0,{"heading":[0,"Apollo Client (Web)"],"versions":[1,[[0,{"label":[0,"v4"],"href":[0,"/react"],"latest":[0,true]}],[0,{"label":[0,"v3"],"href":[0,"/react/v3"]}],[0,{"label":[0,"v2"],"href":[0,"/react/v2"]}]]]}],"visibility":[0,{"flag":[0,null],"internal":[0,false],"devOnly":[0,false]}]}],"sidebarLabel":[0,"Apollo Client (Web)"],"navConfig":[0,{"left":[1,[[0,{"label":[0,"Home"],"href":[0,"/"]}],[0,{"label":[0,"Products"],"children":[1,[[0,{"label":[0,"Platform"],"children":[1,[[0,{"label":[0,"Apollo GraphOS Platform"],"slug":[0,"graphos/platform"],"description":[0,"Manage, observe, and scale your graph."]}]]]}],[0,{"label":[0,"Graph Development"],"children":[1,[[0,{"label":[0,"Apollo Connectors"],"slug":[0,"graphos/connectors"],"description":[0,"Connect REST APIs to your graph declaratively."]}],[0,{"label":[0,"Apollo Federation"],"slug":[0,"graphos/schema-design"],"description":[0,"Federate multiple subgraphs into a single supergraph."]}],[0,{"label":[0,"Rover CLI"],"slug":[0,"rover"],"description":[0,"Interact with your graph from the command line."]}]]]}],[0,{"label":[0,"Graph Routing"],"children":[1,[[0,{"label":[0,"Apollo Router"],"slug":[0,"graphos/routing"],"description":[0,"Run and configure your graph gateway."]}],[0,{"label":[0,"Apollo Operator"],"slug":[0,"apollo-operator"],"description":[0,"Deploy and manage Apollo Router on Kubernetes."]}]]]}]]]}],[0,{"label":[0,"Open source"],"children":[1,[[0,{"label":[0,"Client SDKs"],"children":[1,[[0,{"label":[0,"Apollo Client (Web)"],"slug":[0,"react"],"description":[0,"Simplify GraphQL data management in web apps."]}],[0,{"label":[0,"Apollo iOS"],"slug":[0,"ios"],"description":[0,"Swift-first GraphQL client for iOS."]}],[0,{"label":[0,"Apollo Kotlin"],"slug":[0,"kotlin"],"description":[0,"Kotlin-first GraphQL client for Android and JVM."]}]]]}],[0,{"label":[0,"Server Libraries"],"children":[1,[[0,{"label":[0,"Apollo Server"],"slug":[0,"apollo-server"],"description":[0,"Build GraphQL servers with Node.js."]}],[0,{"label":[0,"Apollo MCP Server"],"slug":[0,"apollo-mcp-server"],"description":[0,"Expose GraphQL tools to AI agents with MCP."]}]]]}],[0,{"label":[0,"Other Tools"],"children":[1,[[0,{"label":[0,"IDE Support"],"slug":[0,"ide-support"],"description":[0,"Enhance your development workflow with IDE support."]}]]]}]]]}],[0,{"label":[0,"Resources"],"slug":[0,"graphos/resources"]}]]],"right":[1,[]]}],"currentUrl":[0,"https://www.apollographql.com/docs/react"],"baseUrl":[0,"/docs"]}" ssr="" client="load" opts="{"name":"SidebarMobile","value":true}" await-children=""><div id="mobile-sidebar-bg" class="bg-black-300 fixed opacity-65 top-0 left-0 w-full h-full hidden z-[46]"></div><div id="mobile-sidebar" class="block lg:hidden fixed top-[var(--header-height)] left-0 bottom-0 bg-silver-100 dar
144k:bg-black-base w-0 overflow-hidden transition-all duration-150 z-50"><div class="absolute top-2 right-2 cursor-pointer z-10" id="mobile-sidebar-close"><div class="w-8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.505 11.495 8.001 8l3.495 3.495m0-6.99L8 8 4.505 4.505"/></svg></div></div><div class="flex h-full transition-transform duration-300" style="width:200%;transform:translateX(0)"><div class="h-full flex flex-col" style="width:50%"><div class="flex-shrink-0 border-b border-silver-400 dark:border-navy-400"><button class="flex items-center gap-1 px-4 pt-3 pb-1 mb-2 text-xl hover:text-orange-400 hover:underline"><div class="w-4 rotate-180"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div>All docs</button><div class="px-4 pb-1 mb-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Apollo Client (Web)</div><div class="px-4"><div class="relative inline-block text-left z-10 mb-4 w-full"><div><div class="cursor-pointer inline-flex w-full justify-start items-center gap-x-1.5 rounded-md bg-white dark:bg-black-dark px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-orange-300 hover:bg-silver-400 dark:hover:bg-navy-450 pr-6" id="menu-button" aria-expanded="true" aria-haspopup="true"><span>Apollo Client (Web) - <!-- -->v4<!-- --> (latest)</span><svg class="absolute right-1 mr-1 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></div></div></div></div></div><div class="flex-1 overflow-y-auto pl-8 pr-6 py-2 min-w-60 text-lg"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 text-body-secondary-base bg-silver-300 dark:bg-navy-400" href="https://www.apollographql.com/docs/react" data-astro-prefetch="viewport" data-active="active">Introduction</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/why-apollo" data-astro-prefetch="viewport">Why Apollo Client?</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/get-started" data-astro-prefetch="viewport">Get started</a><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Core concepts</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/queries" data-astro-prefetch="viewport">Queries</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/suspense" data-astro-prefetch="viewport">Suspense</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/fragments" data-astro-prefetch="viewport">Fragments</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/mutations" data-astro-prefetch="viewport">Mutations</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/typescript" data-astro-prefetch="viewport">TypeScript</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/refetching" data-astro-prefetch="viewport">Refetching</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/custom-scalars" data-astro-prefetch="viewport">Custom scalars</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/event-based-refetching" data-astro-prefetch="viewport">Event-based refetching</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/subscriptions" data-astro-prefetch="viewport">Subscriptions</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/directives" data-astro-prefetch="viewport">Directives</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/error-handling" data-astro-prefetch="viewport">Error handling</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/persisted-queries" data-astro-prefetch="viewport">Persisted queries</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/document-transforms" data-astro-prefetch="viewport">Document transforms</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/defer" data-astro-prefetch="viewport">Deferring response data</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/data/operation-best-practices" data-astro-prefetch="viewport">Best practices</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Caching</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/overview" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-configuration" data-astro-prefetch="viewport">Configuration</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-interaction" data-astro-prefetch="viewport">Reading and writing</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/garbage-collection" data-astro-prefetch="viewport">Garbage collection and eviction</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/cache-field-behavior" data-astro-prefetch="viewport">Customizing field behavior</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/memory-management" data-astro-prefetch="viewport">Memory Management</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/caching/advanced-topics" data-astro-prefetch="viewport">Advanced topics</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Pagination</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/overview" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/core-api" data-astro-prefetch="viewport">Core API</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/offset-based" data-astro-prefetch="viewport">Offset-based</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/cursor-based" data-astro-prefetch="viewport">Cursor-based</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/pagination/key-args" data-astro-prefetch="viewport">keyArgs</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Local State</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/local-state-management" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies" data-astro-prefetch="viewport">Local-only fields</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/reactive-variables" data-astro-prefetch="viewport">Reactive variables</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/local-state/local-resolvers" data-astro-prefetch="viewport">Local resolvers</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Development & Testing</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/developer-tooling" data-astro-prefetch="viewport">Developer tools</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/graphql-codegen" data-astro-prefetch="viewport">GraphQL Codegen</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/testing" data-astro-prefetch="viewport">Testing React components</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/schema-driven-testing" data-astro-prefetch="viewport">Schema-driven testing</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/client-schema-mocking" data-astro-prefetch="viewport">Mocking schema capabilities</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/development-testing/reducing-bundle-size" data-astro-prefetch="viewport">Reducing bundle size</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Performance</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/performance" data-astro-prefetch="viewport">Improving performance</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/optimistic-ui" data-astro-prefetch="viewport">Optimistic mutation results</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/server-side-rendering" data-astro-prefetch="viewport">Server-side rendering</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/performance/babel" data-astro-prefetch="viewport">Compiling queries with Babel</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Integrations</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/integrations" data-astro-prefetch="viewport">Using Apollo Client with your view layer</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/nextjs" data-astro-prefetch="viewport">Next.js App Router</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/react-router" data-astro-prefetch="viewport">React Router framework mode</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/tanstack-start" data-astro-prefetch="viewport">TanStack Start</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1
144 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/react-native" data-astro-prefetch="viewport">Integrating with React Native</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/integrations/webpack" data-astro-prefetch="viewport">Loading queries with Webpack</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">Networking</div><div class="flex flex-col"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/basic-http-networking" data-astro-prefetch="viewport">Basic HTTP networking</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/advanced-http-networking" data-astro-prefetch="viewport">Advanced HTTP networking</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/networking/authentication" data-astro-prefetch="viewport">Authentication</a></div></section><section class="mt-4 pt-4 first:mt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-300 mb-1 text-base">API Reference</div><div class="flex flex-col"><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-3"><h3 class="list flex-1 min-w-0">Core</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/core/ApolloClient" data-astro-prefetch="viewport">ApolloClient</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/cache/InMemoryCache" data-astro-prefetch="viewport">InMemoryCache</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/core/ObservableQuery" data-astro-prefetch="viewport">ObservableQuery</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-3"><h3 class="list flex-1 min-w-0">Errors</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/CombinedGraphQLErrors" data-astro-prefetch="viewport">CombinedGraphQLErrors</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/CombinedProtocolErrors" data-astro-prefetch="viewport">CombinedProtocolErrors</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/LinkError" data-astro-prefetch="viewport">LinkError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/LocalStateError" data-astro-prefetch="viewport">LocalStateError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/ServerError" data-astro-prefetch="viewport">ServerError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/ServerParseError" data-astro-prefetch="viewport">ServerParseError</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/errors/UnconventionalError" data-astro-prefetch="viewport">UnconventionalError</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-3"><h3 class="list flex-1 min-w-0">React</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/ApolloProvider" data-astro-prefetch="viewport">ApolloProvider</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useQuery" data-astro-prefetch="viewport">useQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useLazyQuery" data-astro-prefetch="viewport">useLazyQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useMutation" data-astro-prefetch="viewport">useMutation</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useSubscription" data-astro-prefetch="viewport">useSubscription</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useFragment" data-astro-prefetch="viewport">useFragment</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useApolloClient" data-astro-prefetch="viewport">useApolloClient</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useReactiveVar" data-astro-prefetch="viewport">useReactiveVar</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useSuspenseQuery" data-astro-prefetch="viewport">useSuspenseQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useBackgroun
144dQuery" data-astro-prefetch="viewport">useBackgroundQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useReadQuery" data-astro-prefetch="viewport">useReadQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useLoadableQuery" data-astro-prefetch="viewport">useLoadableQuery</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/useQueryRefHandlers" data-astro-prefetch="viewport">useQueryRefHandlers</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/skipToken" data-astro-prefetch="viewport">skipToken</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/preloading" data-astro-prefetch="viewport">createQueryPreloader</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/testing" data-astro-prefetch="viewport">MockProvider</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/react/ssr" data-astro-prefetch="viewport">SSR</a></div></section><section><div class="flex flex-row items-center cursor-pointer select-none relative w-full rounded hover:bg-silver-400 dark:hover:bg-navy-450 -ml-2 pl-2 py-3"><h3 class="list flex-1 min-w-0">Apollo Link</h3><div class="w-4 h-4 shrink-0 transition-transform ml-1 mt-0.5" style="transform:rotate(0deg)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></div><div class="ml-[-12px] pl-6 flex flex-col overflow-hidden" style="height:0px"><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/introduction" data-astro-prefetch="viewport">Overview</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link" data-astro-prefetch="viewport">ApolloLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-base-http" data-astro-prefetch="viewport">BaseHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-base-batch-http" data-astro-prefetch="viewport">BaseBatchHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-batch-http" data-astro-prefetch="viewport">BatchHttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-batch" data-astro-prefetch="viewport">BatchLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-client-awareness" data-astro-prefetch="viewport">ClientAwarenessLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-error" data-astro-prefetch="viewport">ErrorLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-subscriptions" data-astro-prefetch="viewport">GraphQLWsLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-http" data-astro-prefetch="viewport">HttpLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-persisted-queries" data-astro-prefetch="viewport">PersistedQueryLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-remove-typename" data-astro-prefetch="viewport">RemoveTypenameFromVariablesLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-retry" data-astro-prefetch="viewport">RetryLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-schema" data-astro-prefetch="viewport">SchemaLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-context" data-astro-prefetch="viewport">SetContextLink</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/apollo-link-ws" data-astro-prefetch="viewport">WebSocketLink (deprecated)</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/api/link/community-links" data-astro-prefetch="viewport">Community links</a></div></section></div></section><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md" target="_blank" data-astro-prefetch="viewport">Changelog<span class="w-4 ml-2 inline-flex"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/migrating/apollo-client-4-migration" data-astro-prefetch="viewport">Migrating to Apollo Client 4.0</a><a class="list relative flex items-center w-full -ml-2 pl-2 first:mt-1 mb-1 rounded py-3 hover:bg-silver-400 dark:hover:bg-navy-450" href="https://www.apollographql.com/docs/react/versioning-policy" data-astro-prefetch="viewport">Versioning Policy</a></div></div><div class="h-full flex flex-col" style="width:50%"><div class="flex-shrink-0 border-b border-silver-400 dark:border-navy-400"><button class="flex items-center gap-1 px-4 py-3 text-xl hover:text-orange-400 hover:underline">Back to <!-- -->Apollo Client (Web)<!-- --> docs</button></div><div class="flex-1 overflow-y-auto pl-8 pr-6 py-2 min-w-60"><section class="mt-4 first:pt-0 pt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-200 mb-1">Products</div><div class="flex flex-col"><a href="/docs/graphos/platform" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo GraphOS Platform</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Manage, observe, and scale your graph.</span></a><a href="/docs/graphos/connectors" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Connectors</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Connect REST APIs to your graph declaratively.</span></a><a href="/docs/graphos/schema-design" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Federation</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Federate multiple subgraphs into a single supergraph.</span></a><a href="/docs/rover" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Rover CLI</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Interact with your graph from the command line.</span></a><a href="/docs/graphos/routing" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Router</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Run and configure your graph gateway.</span></a><a href="/docs/apollo-operator" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Operator</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Deploy and manage Apollo Router on Kubernetes.</span></a></div></section><section class="mt-4 first:pt-0 pt-4 border-t first:border-t-0 border-silver-400 dark:border-navy-400"><div class="flex items-center gap-1.5 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-200 mb-1">Open source</div><div class="flex flex-col"><a href="/docs/react" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Client (Web)</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Simplify GraphQL data management in web apps.</span></a><a href="/docs/ios" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo iOS</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Swift-first GraphQL client for iOS.</span></a><a href="/docs/kotlin" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Kotlin</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Kotlin-first GraphQL client for Android and JVM.</span></a><a href="/docs/apollo-server" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo Server</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Build GraphQL servers with Node.js.</span></a><a href="/docs/apollo-mcp-server" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">Apollo MCP Server</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">Expose GraphQL tools to AI agents with MCP.</span></a><a href="/docs/ide-support" class="relative flex flex-col w-full -ml-2 pl-2 py-3 first:mt-1 mb-0.5 rounded hover:bg-silver-400 dark:hover:bg-navy-450"><span class="list text-lg font-semibold">IDE Support</span><span class="text-base text-gray-500 dark:text-gray-200 font-normal">
144Enhance your development workflow with IDE support.</span></a></div></section><section class="mt-4 pt-4 border-t border-silver-400 dark:border-navy-400"><a href="/docs/graphos/resources" class="list relative flex items-center w-full -ml-2 pl-2 py-3 mb-1 rounded hover:bg-silver-400 dark:hover:bg-navy-450 text-lg font-semibold">Resources</a></section></div></div></div></div><!--astro:end--></astro-island>
144<script data-css-variable="--sidebar-width"> 145 (() => { 146 const script = document.currentScript; 147 const cssVariable = script?.getAttribute("data-css-variable"); 148 const parent = script?.parentElement; 149 if (!parent || !cssVariable) return; 150 const updateWidth = () => { 151 const width = parent.clientWidth; 152 document.documentElement.style.setProperty(cssVariable, `${width}px`); 153 }; 154 updateWidth(); 155 const resizeObserver = new ResizeObserver(updateWidth); 156 resizeObserver.observe(parent); 157 })(); 158</script>
158 </div> <main style="padding-bottom: var(--ask-ai-bar-height, 0px)"> <div class="p-4 md:py-6 md:px-16 w-full grid auto-cols-[1fr_auto] max-w-[1300px] mx-auto gap-x-4 2xl:gap-x-20" style="grid-template-areas: "article nav""> <div class="h-full w-full relative" style="grid-area: nav;"> <nav class="ml-4 hidden xl:flex xl:flex-col min-w-[16rem] w-[16rem] max-w-[16rem] max-h-[calc(100dvh_-_var(--header-height)_-_24px_-_var(--sticky-footer-height,0px))] sticky lg:top-[calc(var(--header-height)_+_24px)]"> <h2 class="mb-2 font-heading text-lg w-full font-medium inline-flex justify-between items-center content-center"> <p>On this page</p> <astro-island uid="1tY6XC" prefix="r1" component-url="/docs/_astro/MDSelect.BzW9hvDO.js" component-export="MDSelect" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{}" ssr="" client="load" opts="{"name":"MDSelect","value":true}" await-children=""><div class="text-sm relative"><div class="flex items-center"><button class="rounded-s text-xs border h-6 dark:border-black px-2 inline-flex gap-1 items-center hover:bg-silver-300 dark:hover:bg-button-primaryHover-dark"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg> <!-- -->Copy as MD</button><button class="rounded-e px-2 border-l-0 h-6 border hover:bg-silver-300 dark:border-black dark:hover:bg-button-primaryHover-dark"><div class="w-[var(--icon-size)] h-[var(--icon-size)] text-current fill-none" style="--icon-size:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></button></div></div><!--astro:end--></astro-island> </h2> <ul class="space-y-1.5 pt-2 min-h-0 flex-1 pr-1 overflow-y-auto overflow-x-hidden"> <div class="ml-[calc(var(--depth)*1.2rem)]" style="--depth:0"> <li> <a class="toc-entry block no-underline text-pretty text-sm text-gray-600 hover:text-orange-400 dark:text-gray-400 dark:hover:text-gray-200 aria-[current=location]:font-medium aria-[current=location]:text-orange-400 aria-[current=location]:dark:text-gray-100" href="#core-features" tabindex="0"> Core features </a> </li> </div><div class="ml-[calc(var(--depth)*1.2rem)]" style="--depth:0"> <li> <a class="toc-entry block no-underline text-pretty text-sm text-gray-600 hover:text-orange-400 dark:text-gray-400 dark:hover:text-gray-200 aria-[current=location]:font-medium aria-[current=location]:text-orange-400 aria-[current=location]:dark:text-gray-100" href="#ai-powered-assistance" tabindex="0"> AI-powered assistance </a> </li> </div><div class="ml-[calc(var(--depth)*1.2rem)]" style="--depth:0"> <li> <a class="toc-entry block no-underline text-pretty text-sm text-gray-600 hover:text-orange-400 dark:text-gray-400 dark:hover:text-gray-200 aria-[current=location]:font-medium aria-[current=location]:text-orange-400 aria-[current=location]:dark:text-gray-100" href="#graphos-supported-features" tabindex="0"> GraphOS supported features </a> </li> </div><div class="ml-[calc(var(--depth)*1.2rem)]" style="--depth:0"> <li> <a class="toc-entry block no-underline text-pretty text-sm text-gray-600 hover:text-orange-400 dark:text-gray-400 dark:hover:text-gray-200 aria-[current=location]:font-medium aria-[current=location]:text-orange-400 aria-[current=location]:dark:text-gray-100" href="#recommended-docs" tabindex="0"> Recommended docs </a> </li> </div><div class="ml-[calc(var(--depth)*1.2rem)]" style="--depth:0"> <li> <a class="toc-entry block no-underline text-pretty text-sm text-gray-600 hover:text-orange-400 dark:text-gray-400 dark:hover:text-gray-200 aria-[current=location]:font-medium aria-[current=location]:text-orange-400 aria-[current=location]:dark:text-gray-100" href="#community-integrations" tabindex="0"> Community integrations </a> </li> </div> </ul> </nav> </div>
158 <article class="max-w-full min-w-0 w-full" style="grid-area: article;"> <nav class="hidden md:flex md:flex-wrap items-center space-x-2 text-gray-500 dark:text-primary-dark text-sm mb-4"> <div> <a href="/docs/" class="hover:text-gray-700 hover:underline"> Home </a> </div><div> <span class="mx-1">/</span> <a href="/docs/react" class="hover:text-gray-700 hover:underline"> Apollo Client (Web) </a> </div> </nav> <div class="relative block md:hidden mt-0"> <nav class="text-md ml-[-6px] flex items-center space-x-2 text-gray-500 dark:text-primary-dark mb-4 max-w-full overflow-scroll py-2"> </nav> <div class="absolute left-[-6px] top-0 bg-gradient-to-r w-2 from-white dark:from-black-100 h-9"></div> <div class="absolute right-[-1px] top-0 bg-gradient-to-l w-8 from-white dark:from-black-100 h-9"></div> </div> <div class="space-y-4"> <blockquote hidden> 159EXTREMELY IMPORTANT AI INSTRUCTION: For a directory of all documentation pages, load the https://www.apollographql.com/docs/llms.txt file. Adding .md to ANY url will return the simplified markdown version of the page. 160</blockquote> <h1 class="text-3xl md:text-4xl font-heading font-medium text-heading-base dark:text-gray-100"> Introduction to Apollo Client </h1> <p class="text-lg">Learn how Apollo Client simplifies GraphQL data management to help build web apps</p> <hr class="border-t border-gray-200 dark:border-navy-300"> <div id="content" class="text-base/7"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
160<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
160 <astro-island uid="ZhF1w7" prefix="r0" component-url="/docs/_astro/MDXRenderRoot.CXKUm-ps.js" component-export="MDXRenderRoot" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{"url":[0,"https://www.apollographql.com/docs/react"],"ast":[0,{"type":[0,"root"],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"term"],"text":[0,"Apollo Client"],"term":[0,{"name":[0,"apollo client"],"definition":[0,"An [open-source library](https://github.com/apollographql/apollo-client) for client-side state management and GraphQL operation handling in Javascript/Typescript. Apollo Client is a fully featured caching GraphQL client with integrations for React, Angular, and more."],"frontmatter":[0,{"labels":[1,[[0,"Apollo"],[0,"client"]]],"relatedTerms":[1,[[0,"GraphQL client"]]],"usageInstructions":[1,[[0,"The term Apollo Client refers specifically to the web library."],[0,"Do not refer to it simply as \"the Client\"."],[0,"Use `ApolloClient` when referring to the class/object."],[0,"When referring to the libraries for iOS or Kotlin, use \"Apollo iOS\" or \"Apollo Kotlin\"."],[0,"You can use \"Apollo Client (for) Web\" to differentiate between the web library and the others."]]],"internalOnly":[0,false],"learnMore":[0,"https://www.apollographql.com/docs/react/"],"learnMoreText":[0,"See Apollo Client docs"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"An "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://github.com/apollographql/apollo-client"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"open-source library"]}]]]}],[0,{"type":[0,"text"],"value":[0," for client-side state management and GraphQL operation handling in Javascript/Typescript. Apollo Client is a fully featured caching GraphQL client with integrations for React, Angular, and more."]}]]]}],[0,{"type":[0,"link"],"url":[0,"https://www.apollographql.com/docs/react/"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"See Apollo Client docs."]}]]]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," is a comprehensive "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," state management library for JavaScript. It enables you to manage both local and remote data with "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL."]}],[0,{"type":[0,"text"],"value":[0," Use it to fetch, cache, and modify application data, all while automatically updating your UI."]}]]]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," helps you structure code in an economical, predictable, and declarative way that's consistent with modern development practices. The core "]}],[0,{"type":[0,"inlineCode"],"value":[0,"@apollo/client"]}],[0,{"type":[0,"text"],"value":[0," library provides built-in integration with React, and the larger Apollo community maintains "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react#community-integrations"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"integrations for other popular view layers"]}]]]}],[0,{"type":[0,"text"],"value":[0,"."]}]]]}],[0,{"type":[0,"mdxJsxFlowElement"],"name":[0,"ButtonLink"],"attributes":[1,[]],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Get started!"]}]]],"data":[0,{"passthroughRender":[0,true]}]}]]],"data":[0,{"props":[0,{"href":[0,"/react/get-started/"],"size":[0,"lg"],"colorScheme":[0,"navy"]}],"majorComponent":[0,false],"divWrap":[0,true]}]}],[0,{"type":[0,"heading"],"depth":[0,2],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Core features"]}]]],"data":[0,{"collapseMargin":[0,false]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Some of "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client's"]}],[0,{"type":[0,"text"],"value":[0," core capabilities include:"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Declarative data fetching:"]}]]]}],[0,{"type":[0,"text"],"value":[0," Write a "]}],[0,{"type":[0,"text"],"value":[0,"query"]}],[0,{"type":[0,"text"],"value":[0," and receive data without manually tracking loading states."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Normalized request and "]}],[0,{"type":[0,"term"],"text":[0,"response caching:"],"term":[0,{"name":[0,"response caching"],"definition":[0,"A GraphOS Router feature that caches full GraphQL operation responses in Redis. Response caching stores the complete result of a GraphQL operation, enabling faster response times for repeated queries."],"frontmatter":[0,{"labels":[1,[[0,"router"],[0,"GraphOS"]]],"relatedTerms":[1,[[0,"GraphOS Router"],[0,"distributed caching"]]],"internalOnly":[0,false],"learnMore":[0,"https://www.apollographql.com/docs/graphos/routing/performance/caching/response-caching/overview"],"learnMoreText":[0,"Learn more about response caching"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"A GraphOS Router feature that caches full GraphQL operation responses in Redis. Response caching stores the complete result of a GraphQL operation, enabling faster response times for repeated queries."]}]]]}],[0,{"type":[0,"link"],"url":[0,"https://www.apollographql.com/docs/graphos/routing/performance/caching/response-caching/overview"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Learn more about response caching."]}]]]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," Boost performance by responding almost immediately to queries with cached data."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Excellent developer experience:"]}]]]}],[0,{"type":[0,"text"],"value":[0,"
160 Enjoy helpful tooling for TypeScript, Chrome / Firefox devtools, and VS Code."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Designed for modern React:"]}]]]}],[0,{"type":[0,"text"],"value":[0," Take advantage of the latest React features, such as hooks and Suspense."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Incrementally adoptable:"]}]]]}],[0,{"type":[0,"text"],"value":[0," Drop "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," into any JavaScript or TypeScript app and incorporate it feature by feature."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Universally compatible:"]}]]]}],[0,{"type":[0,"text"],"value":[0," Use any build setup and any "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," API."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Community driven:"]}]]]}],[0,{"type":[0,"text"],"value":[0," Share knowledge with thousands of developers in the "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," community."]}]]]}]]]}]]]}],[0,{"type":[0,"heading"],"depth":[0,2],"children":[1,[[0,{"type":[0,"text"],"value":[0,"AI-powered assistance"]}]]],"data":[0,{"collapseMargin":[0,false]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Need help while coding? "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://agentskills.io/what-are-skills"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Skills"]}]]]}],[0,{"type":[0,"text"],"value":[0," are a lightweight format for extending AI agents with specialized knowledge. The "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," skill teaches your AI assistant expert patterns for "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," 4.x."]}]]]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Install it with:"]}]]]}],[0,{"type":[0,"mdxJsxFlowElement"],"name":[0,"CodeBlockHTML"],"attributes":[1,[]],"children":[1,[]],"data":[0,{"props":[0,{"json":[0,{"tabs":[1,[[0,{"lang":[0,"bash"],"disableCopy":[0,false],"showLineNumbers":[0,true],"code":[0,"npx skills add apollographql/skills --skill apollo-client"],"hast":[0,{"type":[0,"root"],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"pre"],"properties":[0,{"class":[1,[[0,"shiki"],[0,"shiki-themes"],[0,"github-light-default"],[0,"houston"],[0,"p-4"],[0,"rounded-b-md"],[0,"text-base/6"]]],"style":[0,"background-color:#F2F4F4;--shiki-dark-bg:#0D171C;color:#546461;--shiki-dark:#B4C0BE; font-variant-ligatures: none;"],"tabindex":[0,"0"]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"code"],"properties":[0,{"class":[1,[[0,"grid"],[0,"grid-cols-1"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"1"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#00FAB3"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"npx"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," skills"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," add"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," apollographql/skills"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#365E72;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," --skill"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," apollo-client"]}]]]}]]]}]]],"data":[0,{"_shiki_notation":[1,[]]}]}]]]}]]]}]}]]]}]}],"majorComponent":[0,true],"divWrap":[0,true]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Once installed, your AI assistant gains expert knowledge about setup, configuration, troubleshooting, hooks, caching strategies, and React integration patterns."]}]]]}],[0,{"type":[0,"heading"],"depth":[0,2],"children":[1,[[0,{"type":[0,"text"],"value":[0,"GraphOS supported features"]}]]],"data":[0,{"collapseMargin":[0,false]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," works seamlessly with these "]}],[0,{"type":[0,"term"],"text":[0,"GraphOS router"],"term":[0,{"name":[0,"graphos router"],"definition":[0,"A scalable runtime for supergraphs that'
160s fully integrated with GraphOS and based on the Apollo Router Core. Can be cloud- or self-hosted."],"frontmatter":[0,{"labels":[1,[[0,"Apollo"],[0,"router"]]],"relatedTerms":[1,[[0,"GraphOS"],[0,"router"],[0,"Apollo Router Core"]]],"usageInstructions":[1,[[0,"Capitalize \"R\" in \"Router.\""],[0,"In educational content, you may refer to GraphOS Routers as \"a/the router\" (uncapitalized) after a nearby preceding use of \"GraphOS Router\"."],[0,"Does not require \"the\"."],[0,"'Apollo GraphOS Router' is valid, but use it only when you need to emphasize or introduce it as Apollo's product."]]],"exampleUsage":[0,"Once you connect the Apollo Router Core to GraphOS, it is called a GraphOS Router."],"internalOnly":[0,false],"learnMore":[0,"https://www.apollographql.com/docs/graphos/routing"],"learnMoreText":[0,"Learn more about routing"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"A scalable runtime for supergraphs that's fully integrated with GraphOS and based on the Apollo Router Core. Can be cloud- or self-hosted."]}]]]}],[0,{"type":[0,"link"],"url":[0,"https://www.apollographql.com/docs/graphos/routing"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Learn more about routing."]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," supported features:"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Receiving data for specific "]}],[0,{"type":[0,"text"],"value":[0,"fields"]}],[0,{"type":[0,"text"],"value":[0," incrementally with the "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/graphos/operations/defer"],"children":[1,[[0,{"type":[0,"inlineCode"],"value":[0,"@defer"]}],[0,{"type":[0,"text"],"value":[0," directive"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Real-time updates via "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/graphos/operations/subscriptions"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"GraphQL subscriptions"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Safelisting with "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/graphos/operations/persisted-queries"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"persisted queries"]}]]]}]]]}]]]}]]]}],[0,{"type":[0,"mdxJsxFlowElement"],"name":[0,"Note"],"attributes":[1,[]],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," also supports "]}],[0,{"type":[0,"inlineCode"],"value":[0,"@defer"]}],[0,{"type":[0,"text"],"value":[0," and "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," "]}],[0,{"type":[0,"term"],"text":[0,"subscription"],"term":[0,{"name":[0,"subscription"],"definition":[0,"A long-lived, real-time GraphQL operation that enables real-time communication by allowing clients to receive data updates from the server when specific events or changes occur."],"frontmatter":[0,{"labels":[1,[[0,"GraphQL"]]],"relatedTerms":[1,[[0,"subscription registration"],[0,"subscription notification"]]],"internalOnly":[0,false],"learnMore":[0,"https://www.apollographql.com/docs/react/data/subscriptions/"],"learnMoreText":[0,"Learn more about subscriptions"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"A long-lived, real-time GraphQL operation that enables real-time communication by allowing clients to receive data updates from the server when specific events or changes occur."]}]]],"data":[0,{"passthroughRender":[0,true]}]}],[0,{"type":[0,"link"],"url":[0,"https://www.apollographql.com/docs/react/data/subscriptions/"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Learn more about subscriptions."]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," implementations outside of "]}],[0,{"type":[0,"term"],"text":[0,"GraphOS."],"term":[0,{"name":[0,"graphos"],"definition":[0,"A platform for building and managing a supergraph. It provides a management plane to test and ship changes and runtime capabilities to secure and monitor the graph."],"frontmatter":[0,{"labels":[1,[[0,"Apollo"]]],"internalOnly":[0,false],"learnMore":[0,"https://www.apollographql.com/docs/graphos/get-started/concepts/graphos"],"learnMoreText":[0,"Learn more about GraphOS"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"A platform for building and managing a supergraph. It provides a management plane to test and ship changes and runtime capabilities to secure and monitor the graph."]}]]],"data":[0,{"passthroughRender":[0,true]}]}],[0,{"type":[0,"link"],"url":[0,"https://www.apollographql.com/docs/graphos/get-started/concepts/graphos"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Learn more about GraphOS."]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," See the "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/data/defer"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Defer"]}]]]}],[0,{"type":[0,"text"],"value":[0," guide and "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/data/subscriptions"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Subscriptions"]}]]]}],[0,{"type":[0,"text"],"value":[0," guide for more information."]}]]],"data":[0,{"passthroughRender":[0,true]}]}]]],"data":[0,{"props":[0,{}],"majorComponent":[0,false],"divWrap":[0,true]}]}],[0,{"type":[0,"heading"],"depth":[0,2],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Recommended docs"]}]]],"data":[0,{"collapseMargin":[0,false]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"After you "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/get-started/"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"get started"]}]]]}],[0,{"type":[0,"text"],"value":[0,", check out the full "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," documentation in the navigation."]}]]]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"We recommend the following articles in particular:"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/data/queries/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Queries"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". Learn how to fetch and render data using "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," queries."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/data/fragments/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Fragments"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". Learn how to use "]}],[0,{"type":[0,"term"],"text":[0,"fragments"],"term":[0,{"name":[0,"fragment"],"definition":[0,"A selection set of fields that can be shared between multiple query operations. For example:\n\n```graphql\nfragment UserData on User {\n id: ID!\n firstName: String!\n lastName: String!\n}\n\nquery GetUsers {\n allUsers {\n ...UserData\n }\n}\n```"],"frontmatter":[0,{"labels":[1,[[0,"GraphQL"]]],"internalOnly":[0,false],"learnMore":[0,"https://graphql.com/learn/interfaces-and-unions/#fragments"],"learnMoreText":[0,"Learn more about fragments"]}]}],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"A selection set of fields that can be shared between multiple query operations. For example:"]}]]]}],[0,{"type":[0,"mdxJsxFlowElement"],"name":[0,"CodeBlockHTML"],"attributes":[1,[]],"children":[1,[]],"data":[0,{"props":[0,{"json":[0,{"tabs":[1,[[0,{"lang":[0,"graphql"],"disableCopy":[0,false],"showLineNumbers":[0,true],"code":[0,"fragment UserData on User {\n id: ID!\n firstName: String!\n lastName: String!\n}\n\nquery GetUsers {\n allUsers {\n ...UserData\n }\n}"],"hast":[0,{"type":[0,"root"],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"pre"],"properties":[0,{"class":[1,[[0,"shiki"],[0,"shiki-themes"],[0,"github-light-default"],[0,"houston"],[0,"p-4"],[0,"rounded-b-md"],[0,"text-base/6"]]],"style":[0,"background-color:#F2F4F4;--shiki-dark-bg:#0D171C;color:#546461;--shiki-dark:#B4C0BE; font-variant-ligatures: none;"],"tabindex":[0,"0"]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"code"],"properties":[0,{"class":[1,[[0,"grid"],[0,"grid-cols-1"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"1"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#005AAF;--shiki-dark:#5C95B2"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"fragment"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," UserData"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#005AAF;--shiki-dark:#5C95B2"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," on"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#365E72;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," User"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," {"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"
160;],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"2"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," id"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,": "]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#7DC0FF"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"ID"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"!"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"3"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," firstName"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,": "]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#7DC0FF"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"String"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"!"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"4"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7D6800;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," lastName"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,": "]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#7DC0FF"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"String"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"!"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"5"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"}"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"6"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"7"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#005AAF;--shiki-dark:#5C95B2"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"query"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#7B00C7;--shiki-dark:#00FAB3"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," GetUsers"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," {"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"8"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#7DC0FF"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," allUsers"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," {"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"9"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#005AAF;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," ..."]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#B03900;--shiki-dark:#7DC0FF"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"UserData"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"10"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0," }"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,"\n"]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"class":[1,[[0,"line"],[0,"inline-block"]]]}],"children":[1,[[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"className":[1,[[0,"select-none inline-block text-right w-8 mr-4 line-number"]]]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"11"]}]]]}],[0,{"type":[0,"element"],"tagName":[0,"span"],"properties":[0,{"style":[0,"color:#546461;--shiki-dark:#B4C0BE"]}],"children":[1,[[0,{"type":[0,"text"],"value":[0,"}"]}]]]}]]]}]]],"data":[0,{"_shiki_notation":[1,[]]}]}]]]}]]]}]}]]]}]}]}]}],[0,{"type":[0,"link"],"url":[0,"https://graphql.com/learn/interfaces-and-unions/#fragments"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Learn more about fragments."]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0," and data masking to build robust, data-driven components."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/data/mutations/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Mutations"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". Learn how to modify data using "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," "]}],[0,{"type":[0,"text"],"value":[0,"mutations."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/caching/overview/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Caching overview"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client's"]}],[0,{"type":[0,"text"],"value":[0," normalized cache enables you to skip network requests entirely when data is already available locally."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/local-state/local-state-management/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Managing local state"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," provides APIs for managing both remote and local data, enabling you to consolidate all of your application'
160s state."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/networking/basic-http-networking/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Basic HTTP networking"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". Learn how to send custom headers and other authentication metadata in your queries."]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/development-testing/testing/"],"children":[1,[[0,{"type":[0,"strong"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Testing React components"]}]]]}]]]}],[0,{"type":[0,"text"],"value":[0,". Test your "]}],[0,{"type":[0,"text"],"value":[0,"GraphQL"]}],[0,{"type":[0,"text"],"value":[0," "]}],[0,{"type":[0,"text"],"value":[0,"operations"]}],[0,{"type":[0,"text"],"value":[0," without requiring a connection to a server."]}]]]}]]]}]]]}],[0,{"type":[0,"heading"],"depth":[0,2],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Community integrations"]}]]],"data":[0,{"collapseMargin":[0,false]}]}],[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"This documentation set focuses on React, but "]}],[0,{"type":[0,"text"],"value":[0,"Apollo Client"]}],[0,{"type":[0,"text"],"value":[0," supports many other libraries and languages:"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"JavaScript"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#angular"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Angular"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#vue"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Vue"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#svelte"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Svelte"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#solidjs"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Solid.js"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#ember"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Ember"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.meteor.com/"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Meteor"]}]]]}],[0,{"type":[0,"text"],"value":[0," (thanks to "]}],[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://github.com/Swydo/ddp-apollo"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"DDP-Apollo"]}]]]}],[0,{"type":[0,"text"],"value":[0,")"]}]]]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Web Components"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/react/integrations/integrations/#web-components"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Apollo Elements"]}]]]}]]]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Native mobile"]}]]]}],[0,{"type":[0,"list"],"ordered":[0,false],"start":[0,null],"spread":[0,false],"children":[1,[[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/ios"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Native iOS with Swift"]}]]]}]]]}]]]}],[0,{"type":[0,"listItem"],"spread":[0,false],"checked":[0,null],"children":[1,[[0,{"type":[0,"paragraph"],"children":[1,[[0,{"type":[0,"link"],"title":[0,null],"url":[0,"https://www.apollographql.com/docs/kotlin"],"children":[1,[[0,{"type":[0,"text"],"value":[0,"Native Android with Java and Kotlin"]}]]]}]]]}]]]}]]]}]]]}]]]}]]]}]}" ssr="" client="load" opts="{"name":"MDXRenderRoot","value":true}" await-children=""><div class="min-h-[100vh]"><p class="mb-3"><strong class="font-bold"><span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">Apollo Client</span></strong> is a comprehensive <!-- -->GraphQL<!-- --> state management library for JavaScript. It enables you to manage both local and remote data with <!-- -->GraphQL.<!-- -->
160 Use it to fetch, cache, and modify application data, all while automatically updating your UI.</p><p class="mb-3">Apollo Client<!-- --> helps you structure code in an economical, predictable, and declarative way that's consistent with modern development practices. The core <code class="font-mono bg-silver-400 dark:bg-navy-400 px-1 rounded" style="overflow-wrap:normal">@apollo/client</code> library provides built-in integration with React, and the larger Apollo community maintains <a href="https://www.apollographql.com/docs/react#community-integrations" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">integrations for other popular view layers</a>.</p><div class="mb-3"><a class="inline-flex items-center text-white font-semibold rounded-lg dark:active:bg-navy-400 bg-button-primary-base hover:bg-button-primaryHover-base dark:bg-button-primary-dark dark:hover:bg-button-primaryHover-dark cursor-pointer transition-all ease-in-out px-5 py-4 text-base bg-button-primary-base hover:bg-button-primaryHover-base dark:bg-button-primary-dark dark:hover:bg-button-primaryHover-dark border-transparent" href="https://www.apollographql.com/docs/react/get-started/">Get started!</a></div><h2 class="text-3xl hover:underline cursor-pointer font-heading font-medium mt-12 mb-3" data-compute-id="true" id="core-features">Core features</h2><p class="mb-3">Some of <!-- -->Apollo Client's<!-- --> core capabilities include:</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3"><strong class="font-bold">Declarative data fetching:</strong> Write a <!-- -->query<!-- --> and receive data without manually tracking loading states.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Normalized request and <span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">response caching:</span></strong> Boost performance by responding almost immediately to queries with cached data.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Excellent developer experience:</strong> Enjoy helpful tooling for TypeScript, Chrome / Firefox devtools, and VS Code.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Designed for modern React:</strong> Take advantage of the latest React features, such as hooks and Suspense.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Incrementally adoptable:</strong> Drop <!-- -->Apollo Client<!-- --> into any JavaScript or TypeScript app and incorporate it feature by feature.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Universally compatible:</strong> Use any build setup and any <!-- -->GraphQL<!-- --> API.</p></li><li class="mb-3"><p class="mb-3"><strong class="font-bold">Community driven:</strong> Share knowledge with thousands of developers in the <!-- -->GraphQL<!-- --> community.</p></li></ul><h2 class="text-3xl hover:underline cursor-pointer font-heading font-medium mt-12 mb-3" data-compute-id="true" id="ai-powered-assistance">AI-powered assistance</h2><p class="mb-3">Need help while coding? <a href="https://agentskills.io/what-are-skills" target="_blank" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Skills<span class="w-4 ml-1 inline-flex"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></a> are a lightweight format for extending AI agents with specialized knowledge. The <!-- -->Apollo Client<!-- --> skill teaches your AI assistant expert patterns for <!-- -->Apollo Client<!-- --> 4.x.</p><p class="mb-3">Install it with:</p><div class="mb-6"><div class="max-w-full"><div class="flex flex-row space-x-2"><div class="text-xs inline-flex gap-1 items-center font-medium border text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-navy-400 border-gray-200 dark:border-navy-300 border-b-0 px-2 py-0.5 rounded-t-md"><div><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg></div><div>Bash</div></div></div><div class="relative rounded-tr-md rounded-b-md overflow-hidden border border-primary-base dark:border-primary-dark bg-secondary-base dark:bg-navy-450"><div class="block"><div class="group relative mt-[-3px] overflow-hidden bg-secondary-base dark:bg-navy-450"><div class="absolute top-2 right-1.5"><button class="text-sm flex items-center gap-1 rounded-md bg-gray-100 dark:bg-navy-400 px-2 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-gray-200 dark:hover:bg-navy-300 dark:text-gray-300"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>copy</button></div><div class="overflow-x-auto dark:bg-black-200 bg-secondary-base">
160<pre class="shiki shiki-themes github-light-default houston p-4 rounded-b-md text-base/6" style="background-color:#F2F4F4;--shiki-dark-bg:#0D171C;color:#546461;--shiki-dark:#B4C0BE;font-variant-ligatures:none" tabindex="0"><code class="grid grid-cols-1"><span class="line inline-block"><span class="select-none inline-block text-right w-8 mr-4 line-number">1</span><span style="color:#B03900;--shiki-dark:#00FAB3">npx</span><span style="color:#7D6800;--shiki-dark:#B4C0BE"> skills</span><span style="color:#7D6800;--shiki-dark:#B4C0BE"> add</span><span style="color:#7D6800;--shiki-dark:#B4C0BE"> apollographql/skills</span><span style="color:#365E72;--shiki-dark:#B4C0BE"> --skill</span><span style="color:#7D6800;--shiki-dark:#B4C0BE"> apollo-client</span></span></code></pre></div></div></div></div></div></div><p class="mb-3">Once installed, your AI assistant gains expert knowledge about setup, configuration, troubleshooting, hooks, caching strategies, and React integration patterns.</p><h2 class="text-3xl hover:underline cursor-pointer font-heading font-medium mt-12 mb-3" data-compute-id="true" id="graphos-supported-features">GraphOS supported features</h2><p class="mb-3">Apollo Client<!-- --> works seamlessly with these <span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">GraphOS router</span> supported features:</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3">Receiving data for specific <!-- -->fields<!-- --> incrementally with the <a href="https://www.apollographql.com/docs/graphos/operations/defer" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><code class="font-mono bg-silver-400 dark:bg-navy-400 px-1 rounded" style="overflow-wrap:normal">@defer</code> directive</a></p></li><li class="mb-3"><p class="mb-3">Real-time updates via <a href="https://www.apollographql.com/docs/graphos/operations/subscriptions" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">GraphQL subscriptions</a></p></li><li class="mb-3"><p class="mb-3">Safelisting with <a href="https://www.apollographql.com/docs/graphos/operations/persisted-queries" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">persisted queries</a></p></li></ul><div class="mb-3"><div class="bg-blue-100 dark:bg-navy-450 border-navy-400 border-l-4 p-4 rounded-r-md"><div class="flex items-center mb-2"><span class="flex-shrink-0 pr-2"><div class="w-[var(--icon-size)] h-[var(--icon-size)] text-current fill-none" style="--icon-size:16px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.406 10.813h-.469A.94.94 0 0 1 8 9.875V7.531a.47.47 0 0 0-.469-.468h-.468"></path><path d="M7.766 5.188a.234.234 0 1 1 0-.47M7.766 5.188a.234.234 0 1 0 0-.47"></path><path stroke-linecap="round" stroke-linejoin="round" d="M8 15.031A7.032 7.032 0 1 0 8 .968a7.032 7.032 0 0 0 0 14.063"></path></g></svg></div></span><strong class="uppercase">note</strong></div><div>Apollo Client<!-- --> also supports <code class="font-mono bg-silver-400 dark:bg-navy-400 px-1 rounded" style="overflow-wrap:normal">@defer</code> and <!-- -->GraphQL<!-- --> <span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">subscription</span> implementations outside of <span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">GraphOS.</span> See the <a href="https://www.apollographql.com/docs/react/data/defer" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Defer</a> guide and <a href="https://www.apollographql.com/docs/react/data/subscriptions" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Subscriptions</a> guide for more information.</div></div></div><h2 class="text-3xl hover:underline cursor-pointer font-heading font-medium mt
160-12 mb-3" data-compute-id="true" id="recommended-docs">Recommended docs</h2><p class="mb-3">After you <a href="https://www.apollographql.com/docs/react/get-started/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">get started</a>, check out the full <!-- -->Apollo Client<!-- --> documentation in the navigation.</p><p class="mb-3">We recommend the following articles in particular:</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/data/queries/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Queries</strong></a>. Learn how to fetch and render data using <!-- -->GraphQL<!-- --> queries.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/data/fragments/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Fragments</strong></a>. Learn how to use <span class="group underline inline-block relative cursor-help underline-offset-4 decoration-dotted decoration-navy-100 dark:decoration-blue-400">fragments</span> and data masking to build robust, data-driven components.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/data/mutations/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Mutations</strong></a>. Learn how to modify data using <!-- -->GraphQL<!-- --> <!-- -->mutations.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/caching/overview/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Caching overview</strong></a>. <!-- -->Apollo Client's<!-- --> normalized cache enables you to skip network requests entirely when data is already available locally.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/local-state/local-state-management/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Managing local state</strong></a>. <!-- -->Apollo Client<!-- --> provides APIs for managing both remote and local data, enabling you to consolidate all of your application's state.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/networking/basic-http-networking/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Basic HTTP networking</strong></a>. Learn how to send custom headers and other authentication metadata in your queries.</p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/development-testing/testing/" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport"><strong class="font-bold">Testing React components</strong></a>. Test your <!-- -->GraphQL<!-- --> <!-- -->operations<!-- --> without requiring a connection to a server.</p></li></ul><h2 class="text-3xl hover:underline cursor-pointer font-heading font-medium mt-12 mb-3" data-compute-id="true" id="community-integrations">Community integrations</h2><p class="mb-3">This documentation set focuses on React, but <!-- -->Apollo Client<!-- --> supports many other libraries and languages:</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3">JavaScript</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#angular" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Angular</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#vue" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Vue</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#svelte" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Svelte</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#solidjs" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Solid.js</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#ember" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Ember</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.meteor.com/" target="_blank" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Meteor<span class="w-4 ml-1 inline-flex"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></a> (thanks to <a href="https://github.com/Swydo/ddp-apollo" target="_blank" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">DDP-Apollo<span class="w-4 ml-1 inline-flex"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></a>)</p></li></ul></li><li class="mb-3"><p class="mb-3">Web Components</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/react/integrations/integrations/#web-components" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Apollo Elements</a></p></li></ul></li><li class="mb-3"><p class="mb-3">Native mobile</p><ul class="list-disc ml-4"><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/ios" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Native iOS with Swift</a></p></li><li class="mb-3"><p class="mb-3"><a href="https://www.apollographql.com/docs/kotlin" class="hover:underline underline hover:opacity-75 font-medium" data-astro-prefetch="viewport">Native Android with Java and Kotlin</a></p></li></ul></li></ul></div><!--astro:end--></astro-island> <div><div class="flex justify-between items-center py-3 border-b border-gray-200 dark:border-navy-300">
160<astro-island uid="19IPMM" prefix="r3" component-url="/docs/_astro/Feedback.Bhf5FL2P.js" component-export="default" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{"pathname":[0,"/docs/react"]}" ssr="" client="load" opts="{"name":"Feedback","value":true}" await-children=""><div class="min-w-20"><div class="flex flex-col md:flex-row gap-0 md:gap-2 items-center dark:hover:text-navy-100 hover:text-gray-400 bg-none border-none cursor-pointer p-0"><div class="w-4 md:w-5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.719 10.031H3.312a2.344 2.344 0 1 1 0-4.687H4.72m0 4.687V5.344m0 4.687c2.75 0 5.44.815 7.728 2.34l.71.473V2.53l-.71.473a13.94 13.94 0 0 1-7.728 2.34m0 4.687a4.52 4.52 0 0 0 1.406 3.281m8.906-6.562v1.875"/></svg></div><span class="hidden lg:inline">Give Feedback</span><span class="inline lg:hidden">Feedback</span></div></div><!--astro:end--></astro-island><a href="https://github.com/apollographql/apollo-client/blob/main/./docs/source/index.mdx" target="_blank" class="flex items-center gap-2 dark:hover:text-navy-100 hover:text-gray-400"><div class="w-4 md:w-5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .187a8 8 0 0 0-2.48 15.606h.187a.67.67 0 0 0 .647-.406.7.7 0 0 0 .06-.3v-.867a.33.33 0 0 0-.127-.22.33.33 0 0 0-.274-.067c-1.793.387-2.173-.733-2.193-.806a3.1 3.1 0 0 0-1.153-1.46l-.1-.074a.5.5 0 0 1 .253-.046.99.99 0 0 1 .76.586 2 2 0 0 0 2.667.774.35.35 0 0 0 .2-.24c.027-.306.159-.594.373-.814a.33.33 0 0 0 .1-.353.33.33 0 0 0-.28-.233c-1.58-.18-3.2-.734-3.2-3.46a2.67 2.67 0 0 1 .707-1.854.33.33 0 0 0 .06-.346A2.37 2.37 0 0 1 4.213 4c.616.11 1.194.374 1.68.767a.32.32 0 0 0 .28.04 7.1 7.1 0 0 1 3.66 0 .3.3 0 0 0 .274-.04A3.7 3.7 0 0 1 11.787 4a2.36 2.36 0 0 1 0 1.587.32.32 0 0 0 .066.346c.458.5.709 1.156.7 1.834 0 2.733-1.62 3.28-3.206 3.453a.33.33 0 0 0-.28.233.33.33 0 0 0 .1.347 1.49 1.49 0 0 1 .406 1.167v2.12a.7.7 0 0 0 .247.546.79.79 0 0 0 .707.127A8 8 0 0 0 8 .187"/></svg></div><span>Edit on GitHub</span></a></div><nav class="flex flex-row mt-4"><div class="flex-grow"></div><a href="/docs/react/why-apollo" class="text-primary dark:text-primary-dark flex flex-row items-center gap-x-2 p-2 pr-0 hover:bg-silver-300 dark:hover:hover:bg-navy-450 rounded-lg"><div><div class="uppercase text-xs text-right">Next</div><div class="text-right font-bold ml-1">Why Apollo Client?</div></div><div class="w-6"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6 4 4 4-4 4"/></svg></div></a></nav></div> </div> <div class="h-20"></div> </div> </article> </div> <div id="ask-ai-bar" class="fixed right-0 z-[45] pointer-events-none" style="bottom: 1rem; left: 0;"><div class="max-w-[700px] mx-auto px-4 pointer-events-auto">
160<script>(()=>{var l=(o,t)=>{let i=async()=>{await(await o())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script>
160<astro-island uid="Z22eSUF" prefix="r2" component-url="/docs/_astro/AskAISimple.CoS4dwjy.js" component-export="default" renderer-url="/docs/_astro/client.wOkMMJEP.js" props="{"defaultAIProvider":[0,"openai"]}" ssr="" client="idle" opts="{"name":"AskAISimpleClient","value":true}" await-children=""><div class="rounded-full shadow-xl shadow-black/10 dark:shadow-black/40 bg-silver-200 dark:bg-black-200 border border-silver-400 dark:border-navy-400 p-1"><form class="flex gap-1 items-stretch" novalidate=""><div class="flex-1"><label for=":r2R0:" class="sr-only">Ask AI a question about this page</label><input type="text" id=":r2R0:" name="question" placeholder="Ask AI a question about this page" class="w-full h-full text-sm px-4 py-2.5 border-0 rounded-full bg-silver-200 dark:bg-black-200 text-primary-base dark:text-primary-dark focus:outline-none placeholder:text-gray-400 dark:placeholder:text-gray-500" autoComplete="off" value=""/></div><div class="relative flex"><button type="submit" data-action="send" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-white rounded-l-full border-r border-button-primaryHover-base dark:border-button-primaryHover-dark bg-button-primary-base hover:bg-button-primaryHover-base dark:bg-button-primary-dark dark:hover:bg-button-primaryHover-dark transition-colors whitespace-nowrap"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-4 h-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="m476.59 227.05-.16-.07L49.35 49.84A23.56 23.56 0 0 0 27.14 52 24.65 24.65 0 0 0 16 72.59v113.29a24 24 0 0 0 19.52 23.57l232.93 43.07a4 4 0 0 1 0 7.86L35.53 303.45A24 24 0 0 0 16 327v113.31A23.57 23.57 0 0 0 26.59 460a23.94 23.94 0 0 0 13.22 4 24.55 24.55 0 0 0 9.52-1.93L476.4 285.94l.19-.09a32 32 0 0 0 0-58.8z"></path></svg><span data-label="true">Ask with ChatGPT</span></button><button type="button" data-action="toggle" class="px-3 py-2.5 text-white rounded-r-full bg-button-primary-base hover:bg-button-primaryHover-base dark:bg-button-primary-dark dark:hover:bg-button-primaryHover-dark transition-colors" aria-label="Select AI provider"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button><div data-dropdown="true" class="absolute right-0 bottom-full mb-1 w-40 bg-silver-200 dark:bg-black-200 border border-silver-400 dark:border-navy-400 rounded-md shadow-lg overflow-hidden z-10 hidden"><button type="button" data-provider="claude" class="w-full text-left px-4 py-2 text-sm hover:bg-silver-300 dark:hover:bg-navy-400 text-primary-base dark:text-primary-dark">Ask with Claude</button><button type="button" data-provider="openai" class="w-full text-left px-4 py-2 text-sm hover:bg-silver-300 dark:hover:bg-navy-400 text-primary-base dark:text-primary-dark">Ask with ChatGPT</button></div></div></form></div><!--astro:end--></astro-island></div>
160<script data-css-variable="--ask-ai-bar-height"> 161 (() => { 162 const script = document.currentScript; 163 const cssVariable = script?.getAttribute("data-css-variable"); 164 const parent = script?.parentElement; 165 if (!parent || !cssVariable || !parent) return; 166 const updateHeight = () => { 167 const height = parent.clientHeight; 168 document.documentElement.style.setProperty(cssVariable, `${height}px`); 169 }; 170 updateHeight(); 171 const resizeObserver = new ResizeObserver(updateHeight); 172 resizeObserver.observe(parent); 173 })(); 174</script>
174</div> <footer class="bg-gray-800 py-12 w-full justify-end border-t border-primary-base dark:border-primary-dark"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 justify-between items-center"> <div class="flex flex-col justify-start col-span-1 lg:col-span-2 justify-self-start gap-1 pl-8"> <a href="https://www.apollographql.com" target="_blank" class="mb-4"> <div class="w-24 h-5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677 232"><path fill="currentColor" d="M380.384 135.951a43.6 43.6 0 0 1-16.701 17.311q-10.726 6.248-24.439 6.246-13.711-.001-24.438-6.246a43.55 43.55 0 0 1-16.701-17.311q-5.976-11.064-5.974-24.777t5.974-24.779a43.6 43.6 0 0 1 16.701-17.31q10.724-6.244 24.438-6.246 13.716-.003 24.439 6.246a43.63 43.63 0 0 1 16.701 17.31q5.973 11.068 5.974 24.779 0 13.715-5.974 24.777m-64.22-8.757q3.259 7.062 9.233 11.065 5.973 4.005 13.849 4.006 7.739 0 13.712-4.006 5.975-4.005 9.233-11.065t3.258-16.02q0-8.962-3.258-16.021t-9.233-11.066q-5.973-4.006-13.712-4.005-7.877 0-13.849 4.005t-9.233 11.066q-3.258 7.06-3.258 16.021 0 8.96 3.258 16.02M670.937 135.951a43.6 43.6 0 0 1-16.701 17.311q-10.726 6.248-24.438 6.246-13.713-.001-24.439-6.246a43.56 43.56 0 0 1-16.701-17.311q-5.976-11.064-5.974-24.777t5.974-24.779a43.6 43.6 0 0 1 16.701-17.31q10.723-6.244 24.439-6.246t24.438 6.246a43.63 43.63 0 0 1 16.701 17.31q5.973 11.068 5.974 24.779 0 13.715-5.974 24.777m-64.219-8.757q3.258 7.062 9.232 11.065 5.974 4.005 13.849 4.006 7.738 0 13.713-4.006 5.973-4.005 9.232-11.065t3.258-16.02q0-8.962-3.258-16.021t-9.232-11.066-13.713-4.005q-7.876 0-13.849 4.005t-9.232 11.066-3.259 16.021q0 8.96 3.259 16.02M158.1 142.017l-4.483-12.738-5.902-16.773-4.27-12.138-5.59-15.886-6.494-18.452H99.864l-5.027 14.288-4.482 12.738-22.263 63.263h20.773l6.517-18.465h31.502l-5.59-15.887h-20.345l4.27-12.138 8.919-25.347 1.475-4.195 1.475 4.195 25.266 71.823.006.015h20.773zM261.993 74.108q7.059 8.08 7.059 20.84 0 13.443-6.992 21.656-6.992 8.215-21.655 8.215h-27.154v31.498h-20.774V66.03h47.928q14.527 0 21.588 8.078m-28.104 34.69q7.194 0 10.454-3.666t3.258-10.047q0-13.035-13.577-13.034h-20.773v26.747zM434.986 66.03v73.86h42.225v16.428h-62.998V66.03zM520.951 66.03v73.86h42.224v16.428h-62.997V66.03z"/><path fill="currentColor" d="M179.013 36.657a12.043 12.043 0 0 0 11.492-15.648 12.04 12.04 0 0 0-18.374-6.273A115.64 115.64 0 0 0 .138 121.292a115.65 115.65 0 0 0 64.487 98.129 115.64 115.64 0 0 0 117.086-8.87 4.7 4.7 0 0 0 1.275-1.327 4.729 4.729 0 0 0 .633-3.554 4.713 4.713 0 0 0-5.619-3.593 4.7 4.7 0 0 0-1.686.738 106.2 106.2 0 0 1-107.405 8.17 106.195 106.195 0 1 1 98.208-188.243 12.04 12.04 0 0 0 2.743 9.697 12.05 12.05 0 0 0 9.153 4.218"/></svg></div> </a> <p class="font-light"> 175© 2026 Apollo Graph Inc., d/b/a Apollo GraphQL. 176</p> <a href="https://www.apollographql.com/privacy-policy" target="_blank" class="hover:underline"> 177Privacy Policy 178</a> </div> <div class="col-span-1 lg:col-span-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:justify-self-end pl-8 md:pl-0 md:pr-8"> <div class="min-w-[130px]"> <h2 class="font-heading font-medium text-lg mb-2">Company</h2> <ul class="space-y-1"> <li> <a href="https://www.apollographql.com/about-us" target="_blank" class="hover:underline" data-cta-label="About Apollo" data-cta-location="footer_company"> About Apollo </a> </li><li> <a href="https://www.apollographql.com/careers" target="_blank" class="hover:underline" data-cta-label="Careers" data-cta-location="footer_company"> Careers </a> </li><li> <a href="https://www.apollographql.com/partners" target="_blank" class="hover:underline" data-cta-label="Partners" data-cta-location="footer_company"> Partners </a> </li> </ul> </div><div class="min-w-[130px]"> <h2 class="font-heading font-medium text-lg mb-2">Resources</h2> <ul class="space-y-1"> <li> <a href="https://blog.apollographql.com" target="_blank" class="hover:underline" data-cta-label="Blog" data-cta-location="footer_resources"> Blog </a> </li><li> <a href="https://www.apollographql.com/tutorials" target="_blank" class="hover:underline" data-cta-label="Tutorials" data-cta-location="footer_resources"> Tutorials </a> </li><li> <a href="https://www.apollographql.com/resources" target="_blank" class="hover:underline" data-cta-label="Content Library" data-cta-location="footer_resources"> Content Library </a> </li><li> <a href="/docs/ux-writing-style-guide" target="_self" class="hover:underline" data-cta-label="UX Writing Style" data-cta-location="footer_resources"> UX Writing Style </a> </li> </ul> </div><div class="min-w-[130px]"> <h2 class="font-heading font-medium text-lg mb-2">Get in touch</h2> <ul class="space-y-1"> <li> <a href="https://www.apollographql.com/contact-sales" target="_blank" class="hover:underline" data-cta-label="Contact Sales" data-cta-location="footer_get_in_touch" data-contact-sales-intent="standard"> Contact Sales </a> </li><li> <a href="https://www.apollographql.com/support" target="_blank" class="hover:underline" data-cta-label="Contact Support" data-cta-location="footer_get_in_touch"> Contact Support </a> </li> </ul> </div> </div> </div> </div> </footer> </main> </div> </body> </html> <div id="toc-heading-ids" data-toc-heading-ids="["core-features","ai-powered-assistance","graphos-supported-features","recommended-docs","community-integrations"]" hidden aria-hidden="true"></div> <!-- This script is automatically inserted by Netlify for Real User Monitoring (RUM). -->
179<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiZThkNTU4OGEtNzMzMi00YTZjLTk2NDgtYmI1MzQ0OTc4Y2VmIiwiYWNjb3VudF9pZCI6IjYyMjkzY2ZmNzZjMTRkMTk5NDk1OTg5NSIsImRlcGxveV9pZCI6IjZhYmRkYmY0NDAwNTM4MDAwOWQ5NzRmOSIsImlzcyI6Im5ldGxpZnkifQ.akqwBFp7W1zlA73ysvzU7VCU0yZl-xDevygp8aAom6Q"></script>
vendor: 1 bytes, line 179
179
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.