PageSourceSearch

https://www.apollographql.com/docs/react

html apollographql.com collected 2026-10-01 08:29:47 UTC 235,550 bytes, 179 lines download raw bytes

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 [&#38;>div>svg]:h-4 [&#38;>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="{&quot;name&quot;:&quot;Autocomplete&quot;,&quot;value&quot;:&quot;react&quot;}"></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="{&quot;collapsed&quot;:[0,&quot;false&quot;],&quot;sidebar&quot;:[0,{&quot;defaultOpenDepth&quot;:[0,0],&quot;items&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Introduction&quot;],&quot;href&quot;:[0,&quot;/react&quot;]}],[0,{&quot;label&quot;:[0,&quot;Why Apollo Client?&quot;],&quot;href&quot;:[0,&quot;/react/why-apollo&quot;]}],[0,{&quot;label&quot;:[0,&quot;Get started&quot;],&quot;href&quot;:[0,&quot;/react/get-started&quot;]}],[0,{&quot;label&quot;:[0,&quot;Core concepts&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Queries&quot;],&quot;href&quot;:[0,&quot;/react/data/queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;Suspense&quot;],&quot;href&quot;:[0,&quot;/react/data/suspense&quot;]}],[0,{&quot;label&quot;:[0,&quot;Fragments&quot;],&quot;href&quot;:[0,&quot;/react/data/fragments&quot;]}],[0,{&quot;label&quot;:[0,&quot;Mutations&quot;],&quot;href&quot;:[0,&quot;/react/data/mutations&quot;]}],[0,{&quot;label&quot;:[0,&quot;TypeScript&quot;],&quot;href&quot;:[0,&quot;/react/data/typescript&quot;]}],[0,{&quot;label&quot;:[0,&quot;Refetching&quot;],&quot;href&quot;:[0,&quot;/react/data/refetching&quot;]}],[0,{&quot;label&quot;:[0,&quot;Custom scalars&quot;],&quot;href&quot;:[0,&quot;/react/data/custom-scalars&quot;]}],[0,{&quot;label&quot;:[0,&quot;Event-based refetching&quot;],&quot;href&quot;:[0,&quot;/react/data/event-based-refetching&quot;]}],[0,{&quot;label&quot;:[0,&quot;Subscriptions&quot;],&quot;href&quot;:[0,&quot;/react/data/subscriptions&quot;]}],[0,{&quot;label&quot;:[0,&quot;Directives&quot;],&quot;href&quot;:[0,&quot;/react/data/directives&quot;]}],[0,{&quot;label&quot;:[0,&quot;Error handling&quot;],&quot;href&quot;:[0,&quot;/react/data/error-handling&quot;]}],[0,{&quot;label&quot;:[0,&quot;Persisted queries&quot;],&quot;href&quot;:[0,&quot;/react/data/persisted-queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;Document transforms&quot;],&quot;href&quot;:[0,&quot;/react/data/document-transforms&quot;]}],[0,{&quot;label&quot;:[0,&quot;Deferring response data&quot;],&quot;href&quot;:[0,&quot;/react/data/defer&quot;]}],[0,{&quot;label&quot;:[0,&quot;Best practices&quot;],&quot;href&quot;:[0,&quot;/react/data/operation-best-practices&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Caching&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/caching/overview&quot;]}],[0,{&quot;label&quot;:[0,&quot;Configuration&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-configuration&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reading and writing&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-interaction&quot;]}],[0,{&quot;label&quot;:[0,&quot;Garbage collection and eviction&quot;],&quot;href&quot;:[0,&quot;/react/caching/garbage-collection&quot;]}],[0,{&quot;label&quot;:[0,&quot;Customizing field behavior&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-field-behavior&quot;]}],[0,{&quot;label&quot;:[0,&quot;Memory Management&quot;],&quot;href&quot;:[0,&quot;/react/caching/memory-management&quot;]}],[0,{&quot;label&quot;:[0,&quot;Advanced topics&quot;],&quot;href&quot;:[0,&quot;/react/caching/advanced-topics&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Pagination&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/pagination/overview&quot;]}],[0,{&quot;label&quot;:[0,&quot;Core API&quot;],&quot;href&quot;:[0,&quot;/react/pagination/core-api&quot;]}],[0,{&quot;label&quot;:[0,&quot;Offset-based&quot;],&quot;href&quot;:[0,&quot;/react/pagination/offset-based&quot;]}],[0,{&quot;label&quot;:[0,&quot;Cursor-based&quot;],&quot;href&quot;:[0,&quot;/react/pagination/cursor-based&quot;]}],[0,{&quot;label&quot;:[0,&quot;keyArgs&quot;],&quot;href&quot;:[0,&quot;/react/pagination/key-args&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Local State&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/local-state/local-state-management&quot;]}],[0,{&quot;label&quot;:[0,&quot;Local-only fields&quot;],&quot;href&quot;:[0,&quot;/react/local-state/managing-state-with-field-policies&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reactive variables&quot;],&quot;href&quot;:[0,&quot;/react/local-state/reactive-variables&quot;]}],[0,{&quot;label&quot;:[0,&quot;Local resolvers&quot;],&quot;href&quot;:[0,&quot;/react/local-state/local-resolvers&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Development &amp; Testing&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Developer tools&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/developer-tooling&quot;]}],[0,{&quot;label&quot;:[0,&quot;GraphQL Codegen&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/graphql-codegen&quot;]}],[0,{&quot;label&quot;:[0,&quot;Testing React components&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;Schema-driven testing&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/schema-driven-testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;Mocking schema capabilities&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/client-schema-mocking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reducing bundle size&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/reducing-bundle-size&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Performance&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Improving performance&quot;],&quot;href&quot;:[0,&quot;/react/performance/performance&quot;]}],[0,{&quot;label&quot;:[0,&quot;Optimistic mutation results&quot;],&quot;href&quot;:[0,&quot;/react/performance/optimistic-ui&quot;]}],[0,{&quot;label&quot;:[0,&quot;Server-side rendering&quot;],&quot;href&quot;:[0,&quot;/react/performance/server-side-rendering&quot;]}],[0,{&quot;label&quot;:[0,&quot;Compiling queries with Babel&quot;],&quot;href&quot;:[0,&quot;/react/performance/babel&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Integrations&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Using Apollo Client with your view layer&quot;],&quot;href&quot;:[0,&quot;/react/integrations/integrations&quot;]}],[0,{&quot;label&quot;:[0,&quot;Next.js App Router&quot;],&quot;href&quot;:[0,&quot;/react/integrations/nextjs&quot;]}],[0,{&quot;label&quot;:[0,&quot;React Router framework mode&quot;],&quot;href&quot;:[0,&quot;/react/integrations/react-router&quot;]}],[0,{&quot;label&quot;:[0,&quot;TanStack Start&quot;],&quot;href&quot;:[0,&quot;/react/integrations/tanstack-start&quot;]}],[0,{&quot;label&quot;:[0,&quot;Integrating with React Native&quot;],&quot;href&quot;:[0,&quot;/react/integrations/react-native&quot;]}],[0,{&quot;label&quot;:[0,&quot;Loading queries with Webpack&quot;],&quot;href&quot;:[0,&quot;/react/integrations/webpack&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Networking&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Basic HTTP networking&quot;],&quot;href&quot;:[0,&quot;/react/networking/basic-http-networking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Advanced HTTP networking&quot;],&quot;href&quot;:[0,&quot;/react/networking/advanced-http-networking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Authentication&quot;],&quot;href&quot;:[0,&quot;/react/networking/authentication&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;API Reference&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Core&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;ApolloClient&quot;],&quot;href&quot;:[0,&quot;/react/api/core/ApolloClient&quot;]}],[0,{&quot;label&quot;:[0,&quot;InMemoryCache&quot;],&quot;href&quot;:[0,&quot;/react/api/cache/InMemoryCache&quot;]}],[0,{&quot;label&quot;:[0,&quot;ObservableQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/core/ObservableQuery&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Errors&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;CombinedGraphQLErrors&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/CombinedGraphQLErrors&quot;]}],[0,{&quot;label&quot;:[0,&quot;CombinedProtocolErrors&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/CombinedProtocolErrors&quot;]}],[0,{&quot;label&quot;:[0,&quot;LinkError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/LinkError&quot;]}],[0,{&quot;label&quot;:[0,&quot;LocalStateError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/LocalStateError&quot;]}],[0,{&quot;label&quot;:[0,&quot;ServerError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/ServerError&quot;]}],[0,{&quot;label&quot;:[0,&quot;ServerParseError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/ServerParseError&quot;]}],[0,{&quot;label&quot;:[0,&quot;UnconventionalError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/UnconventionalError&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;React&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;ApolloProvider&quot;],&quot;href&quot;:[0,&quot;/react/api/react/ApolloProvider&quot;]}],[0,{&quot;label&quot;:[0,&quot;useQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useLazyQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useLazyQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useMutation&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useMutation&quot;]}],[0,{&quot;label&quot;:[0,&quot;useSubscription&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useSubscription&quot;]}],[0,{&quot;label&quot;:[0,&quot;useFragment&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useFragment&quot;]}],[0,{&quot;label&quot;:[0,&quot;useApolloClient&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useApolloClient&quot;]}],[0,{&quot;label&quot;:[0,&quot;useReactiveVar&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useReactiveVar&quot;]}],[0,{&quot;label&quot;:[0,&quot;useSuspenseQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useSuspenseQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;
138useBackgroundQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useBackgroundQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useReadQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useReadQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useLoadableQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useLoadableQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useQueryRefHandlers&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useQueryRefHandlers&quot;]}],[0,{&quot;label&quot;:[0,&quot;skipToken&quot;],&quot;href&quot;:[0,&quot;/react/api/react/skipToken&quot;]}],[0,{&quot;label&quot;:[0,&quot;createQueryPreloader&quot;],&quot;href&quot;:[0,&quot;/react/api/react/preloading&quot;]}],[0,{&quot;label&quot;:[0,&quot;MockProvider&quot;],&quot;href&quot;:[0,&quot;/react/api/react/testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;SSR&quot;],&quot;href&quot;:[0,&quot;/react/api/react/ssr&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Apollo Link&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/api/link/introduction&quot;]}],[0,{&quot;label&quot;:[0,&quot;ApolloLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link&quot;]}],[0,{&quot;label&quot;:[0,&quot;BaseHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-base-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BaseBatchHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-base-batch-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BatchHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-batch-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BatchLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-batch&quot;]}],[0,{&quot;label&quot;:[0,&quot;ClientAwarenessLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-client-awareness&quot;]}],[0,{&quot;label&quot;:[0,&quot;ErrorLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-error&quot;]}],[0,{&quot;label&quot;:[0,&quot;GraphQLWsLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-subscriptions&quot;]}],[0,{&quot;label&quot;:[0,&quot;HttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;PersistedQueryLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-persisted-queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;RemoveTypenameFromVariablesLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-remove-typename&quot;]}],[0,{&quot;label&quot;:[0,&quot;RetryLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-retry&quot;]}],[0,{&quot;label&quot;:[0,&quot;SchemaLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-schema&quot;]}],[0,{&quot;label&quot;:[0,&quot;SetContextLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-context&quot;]}],[0,{&quot;label&quot;:[0,&quot;WebSocketLink (deprecated)&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-ws&quot;]}],[0,{&quot;label&quot;:[0,&quot;Community links&quot;],&quot;href&quot;:[0,&quot;/react/api/link/community-links&quot;]}]]]}]]]}],[0,{&quot;label&quot;:[0,&quot;Changelog&quot;],&quot;href&quot;:[0,&quot;https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md&quot;]}],[0,{&quot;label&quot;:[0,&quot;Migrating to Apollo Client 4.0&quot;],&quot;href&quot;:[0,&quot;/react/migrating/apollo-client-4-migration&quot;]}],[0,{&quot;label&quot;:[0,&quot;Versioning Policy&quot;],&quot;href&quot;:[0,&quot;/react/versioning-policy&quot;]}]]],&quot;switcher&quot;:[0,{&quot;heading&quot;:[0,&quot;Apollo Client (Web)&quot;],&quot;versions&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;v4&quot;],&quot;href&quot;:[0,&quot;/react&quot;],&quot;latest&quot;:[0,true]}],[0,{&quot;label&quot;:[0,&quot;v3&quot;],&quot;href&quot;:[0,&quot;/react/v3&quot;]}],[0,{&quot;label&quot;:[0,&quot;v2&quot;],&quot;href&quot;:[0,&quot;/react/v2&quot;]}]]]}],&quot;visibility&quot;:[0,{&quot;flag&quot;:[0,null],&quot;internal&quot;:[0,false],&quot;devOnly&quot;:[0,false]}]}],&quot;sectionTitle&quot;:[0,&quot;Apollo Client (Web)&quot;],&quot;currentUrl&quot;:[0,&quot;https://www.apollographql.com/docs/react&quot;],&quot;baseUrl&quot;:[0,&quot;/docs&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Sidebar&quot;,&quot;value&quot;: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 &amp; 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="{&quot;sidebar&quot;:[0,{&quot;defaultOpenDepth&quot;:[0,0],&quot;items&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Introduction&quot;],&quot;href&quot;:[0,&quot;/react&quot;]}],[0,{&quot;label&quot;:[0,&quot;Why Apollo Client?&quot;],&quot;href&quot;:[0,&quot;/react/why-apollo&quot;]}],[0,{&quot;label&quot;:[0,&quot;Get started&quot;],&quot;href&quot;:[0,&quot;/react/get-started&quot;]}],[0,{&quot;label&quot;:[0,&quot;Core concepts&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Queries&quot;],&quot;href&quot;:[0,&quot;/react/data/queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;Suspense&quot;],&quot;href&quot;:[0,&quot;/react/data/suspense&quot;]}],[0,{&quot;label&quot;:[0,&quot;Fragments&quot;],&quot;href&quot;:[0,&quot;/react/data/fragments&quot;]}],[0,{&quot;label&quot;:[0,&quot;Mutations&quot;],&quot;href&quot;:[0,&quot;/react/data/mutations&quot;]}],[0,{&quot;label&quot;:[0,&quot;TypeScript&quot;],&quot;href&quot;:[0,&quot;/react/data/typescript&quot;]}],[0,{&quot;label&quot;:[0,&quot;Refetching&quot;],&quot;href&quot;:[0,&quot;/react/data/refetching&quot;]}],[0,{&quot;label&quot;:[0,&quot;Custom scalars&quot;],&quot;href&quot;:[0,&quot;/react/data/custom-scalars&quot;]}],[0,{&quot;label&quot;:[0,&quot;Event-based refetching&quot;],&quot;href&quot;:[0,&quot;/react/data/event-based-refetching&quot;]}],[0,{&quot;label&quot;:[0,&quot;Subscriptions&quot;],&quot;href&quot;:[0,&quot;/react/data/subscriptions&quot;]}],[0,{&quot;label&quot;:[0,&quot;Directives&quot;],&quot;href&quot;:[0,&quot;/react/data/directives&quot;]}],[0,{&quot;label&quot;:[0,&quot;Error handling&quot;],&quot;href&quot;:[0,&quot;/react/data/error-handling&quot;]}],[0,{&quot;label&quot;:[0,&quot;Persisted queries&quot;],&quot;href&quot;:[0,&quot;/react/data/persisted-queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;Document transforms&quot;],&quot;href&quot;:[0,&quot;/react/data/document-transforms&quot;]}],[0,{&quot;label&quot;:[0,&quot;Deferring response data&quot;],&quot;href&quot;:[0,&quot;/react/data/defer&quot;]}],[0,{&quot;label&quot;:[0,&quot;Best practices&quot;],&quot;href&quot;:[0,&quot;/react/data/operation-best-practices&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Caching&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/caching/overview&quot;]}],[0,{&quot;label&quot;:[0,&quot;Configuration&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-configuration&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reading and writing&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-interaction&quot;]}],[0,{&quot;label&quot;:[0,&quot;Garbage collection and eviction&quot;],&quot;href&quot;:[0,&quot;/react/caching/garbage-collection&quot;]}],[0,{&quot;label&quot;:[0,&quot;Customizing field behavior&quot;],&quot;href&quot;:[0,&quot;/react/caching/cache-field-behavior&quot;]}],[0,{&quot;label&quot;:[0,&quot;Memory Management&quot;],&quot;href&quot;:[0,&quot;/react/caching/memory-management&quot;]}],[0,{&quot;label&quot;:[0,&quot;Advanced topics&quot;],&quot;href&quot;:[0,&quot;/react/caching/advanced-topics&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Pagination&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/pagination/overview&quot;]}],[0,{&quot;label&quot;:[0,&quot;Core API&quot;],&quot;href&quot;:[0,&quot;/react/pagination/core-api&quot;]}],[0,{&quot;label&quot;:[0,&quot;Offset-based&quot;],&quot;href&quot;:[0,&quot;/react/pagination/offset-based&quot;]}],[0,{&quot;label&quot;:[0,&quot;Cursor-based&quot;],&quot;href&quot;:[0,&quot;/react/pagination/cursor-based&quot;]}],[0,{&quot;label&quot;:[0,&quot;keyArgs&quot;],&quot;href&quot;:[0,&quot;/react/pagination/key-args&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Local State&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/local-state/local-state-management&quot;]}],[0,{&quot;label&quot;:[0,&quot;Local-only fields&quot;],&quot;href&quot;:[0,&quot;/react/local-state/managing-state-with-field-policies&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reactive variables&quot;],&quot;href&quot;:[0,&quot;/react/local-state/reactive-variables&quot;]}],[0,{&quot;label&quot;:[0,&quot;Local resolvers&quot;],&quot;href&quot;:[0,&quot;/react/local-state/local-resolvers&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Development &amp; Testing&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Developer tools&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/developer-tooling&quot;]}],[0,{&quot;label&quot;:[0,&quot;GraphQL Codegen&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/graphql-codegen&quot;]}],[0,{&quot;label&quot;:[0,&quot;Testing React components&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;Schema-driven testing&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/schema-driven-testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;Mocking schema capabilities&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/client-schema-mocking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Reducing bundle size&quot;],&quot;href&quot;:[0,&quot;/react/development-testing/reducing-bundle-size&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Performance&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Improving performance&quot;],&quot;href&quot;:[0,&quot;/react/performance/performance&quot;]}],[0,{&quot;label&quot;:[0,&quot;Optimistic mutation results&quot;],&quot;href&quot;:[0,&quot;/react/performance/optimistic-ui&quot;]}],[0,{&quot;label&quot;:[0,&quot;Server-side rendering&quot;],&quot;href&quot;:[0,&quot;/react/performance/server-side-rendering&quot;]}],[0,{&quot;label&quot;:[0,&quot;Compiling queries with Babel&quot;],&quot;href&quot;:[0,&quot;/react/performance/babel&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Integrations&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Using Apollo Client with your view layer&quot;],&quot;href&quot;:[0,&quot;/react/integrations/integrations&quot;]}],[0,{&quot;label&quot;:[0,&quot;Next.js App Router&quot;],&quot;href&quot;:[0,&quot;/react/integrations/nextjs&quot;]}],[0,{&quot;label&quot;:[0,&quot;React Router framework mode&quot;],&quot;href&quot;:[0,&quot;/react/integrations/react-router&quot;]}],[0,{&quot;label&quot;:[0,&quot;TanStack Start&quot;],&quot;href&quot;:[0,&quot;/react/integrations/tanstack-start&quot;]}],[0,{&quot;label&quot;:[0,&quot;Integrating with React Native&quot;],&quot;href&quot;:[0,&quot;/react/integrations/react-native&quot;]}],[0,{&quot;label&quot;:[0,&quot;Loading queries with Webpack&quot;],&quot;href&quot;:[0,&quot;/react/integrations/webpack&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Networking&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Basic HTTP networking&quot;],&quot;href&quot;:[0,&quot;/react/networking/basic-http-networking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Advanced HTTP networking&quot;],&quot;href&quot;:[0,&quot;/react/networking/advanced-http-networking&quot;]}],[0,{&quot;label&quot;:[0,&quot;Authentication&quot;],&quot;href&quot;:[0,&quot;/react/networking/authentication&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;API Reference&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Core&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;ApolloClient&quot;],&quot;href&quot;:[0,&quot;/react/api/core/ApolloClient&quot;]}],[0,{&quot;label&quot;:[0,&quot;InMemoryCache&quot;],&quot;href&quot;:[0,&quot;/react/api/cache/InMemoryCache&quot;]}],[0,{&quot;label&quot;:[0,&quot;ObservableQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/core/ObservableQuery&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Errors&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;CombinedGraphQLErrors&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/CombinedGraphQLErrors&quot;]}],[0,{&quot;label&quot;:[0,&quot;CombinedProtocolErrors&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/CombinedProtocolErrors&quot;]}],[0,{&quot;label&quot;:[0,&quot;LinkError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/LinkError&quot;]}],[0,{&quot;label&quot;:[0,&quot;LocalStateError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/LocalStateError&quot;]}],[0,{&quot;label&quot;:[0,&quot;ServerError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/ServerError&quot;]}],[0,{&quot;label&quot;:[0,&quot;ServerParseError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/ServerParseError&quot;]}],[0,{&quot;label&quot;:[0,&quot;UnconventionalError&quot;],&quot;href&quot;:[0,&quot;/react/api/errors/UnconventionalError&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;React&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;ApolloProvider&quot;],&quot;href&quot;:[0,&quot;/react/api/react/ApolloProvider&quot;]}],[0,{&quot;label&quot;:[0,&quot;useQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useLazyQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useLazyQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useMutation&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useMutation&quot;]}],[0,{&quot;label&quot;:[0,&quot;useSubscription&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useSubscription&quot;]}],[0,{&quot;label&quot;:[0,&quot;useFragment&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useFragment&quot;]}],[0,{&quot;label&quot;:[0,&quot;useApolloClient&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useApolloClient&quot;]}],[0,{&quot;label&quot;:[0,&quot;useReactiveVar&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useReactiveVar&quot;]}],[0,{&quot;label&quot;:[0,&quot;useSuspenseQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useSuspenseQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;
144useBackgroundQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useBackgroundQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useReadQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useReadQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useLoadableQuery&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useLoadableQuery&quot;]}],[0,{&quot;label&quot;:[0,&quot;useQueryRefHandlers&quot;],&quot;href&quot;:[0,&quot;/react/api/react/useQueryRefHandlers&quot;]}],[0,{&quot;label&quot;:[0,&quot;skipToken&quot;],&quot;href&quot;:[0,&quot;/react/api/react/skipToken&quot;]}],[0,{&quot;label&quot;:[0,&quot;createQueryPreloader&quot;],&quot;href&quot;:[0,&quot;/react/api/react/preloading&quot;]}],[0,{&quot;label&quot;:[0,&quot;MockProvider&quot;],&quot;href&quot;:[0,&quot;/react/api/react/testing&quot;]}],[0,{&quot;label&quot;:[0,&quot;SSR&quot;],&quot;href&quot;:[0,&quot;/react/api/react/ssr&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Apollo Link&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Overview&quot;],&quot;href&quot;:[0,&quot;/react/api/link/introduction&quot;]}],[0,{&quot;label&quot;:[0,&quot;ApolloLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link&quot;]}],[0,{&quot;label&quot;:[0,&quot;BaseHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-base-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BaseBatchHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-base-batch-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BatchHttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-batch-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;BatchLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-batch&quot;]}],[0,{&quot;label&quot;:[0,&quot;ClientAwarenessLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-client-awareness&quot;]}],[0,{&quot;label&quot;:[0,&quot;ErrorLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-error&quot;]}],[0,{&quot;label&quot;:[0,&quot;GraphQLWsLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-subscriptions&quot;]}],[0,{&quot;label&quot;:[0,&quot;HttpLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-http&quot;]}],[0,{&quot;label&quot;:[0,&quot;PersistedQueryLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-persisted-queries&quot;]}],[0,{&quot;label&quot;:[0,&quot;RemoveTypenameFromVariablesLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-remove-typename&quot;]}],[0,{&quot;label&quot;:[0,&quot;RetryLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-retry&quot;]}],[0,{&quot;label&quot;:[0,&quot;SchemaLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-schema&quot;]}],[0,{&quot;label&quot;:[0,&quot;SetContextLink&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-context&quot;]}],[0,{&quot;label&quot;:[0,&quot;WebSocketLink (deprecated)&quot;],&quot;href&quot;:[0,&quot;/react/api/link/apollo-link-ws&quot;]}],[0,{&quot;label&quot;:[0,&quot;Community links&quot;],&quot;href&quot;:[0,&quot;/react/api/link/community-links&quot;]}]]]}]]]}],[0,{&quot;label&quot;:[0,&quot;Changelog&quot;],&quot;href&quot;:[0,&quot;https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md&quot;]}],[0,{&quot;label&quot;:[0,&quot;Migrating to Apollo Client 4.0&quot;],&quot;href&quot;:[0,&quot;/react/migrating/apollo-client-4-migration&quot;]}],[0,{&quot;label&quot;:[0,&quot;Versioning Policy&quot;],&quot;href&quot;:[0,&quot;/react/versioning-policy&quot;]}]]],&quot;switcher&quot;:[0,{&quot;heading&quot;:[0,&quot;Apollo Client (Web)&quot;],&quot;versions&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;v4&quot;],&quot;href&quot;:[0,&quot;/react&quot;],&quot;latest&quot;:[0,true]}],[0,{&quot;label&quot;:[0,&quot;v3&quot;],&quot;href&quot;:[0,&quot;/react/v3&quot;]}],[0,{&quot;label&quot;:[0,&quot;v2&quot;],&quot;href&quot;:[0,&quot;/react/v2&quot;]}]]]}],&quot;visibility&quot;:[0,{&quot;flag&quot;:[0,null],&quot;internal&quot;:[0,false],&quot;devOnly&quot;:[0,false]}]}],&quot;sidebarLabel&quot;:[0,&quot;Apollo Client (Web)&quot;],&quot;navConfig&quot;:[0,{&quot;left&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Home&quot;],&quot;href&quot;:[0,&quot;/&quot;]}],[0,{&quot;label&quot;:[0,&quot;Products&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Platform&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Apollo GraphOS Platform&quot;],&quot;slug&quot;:[0,&quot;graphos/platform&quot;],&quot;description&quot;:[0,&quot;Manage, observe, and scale your graph.&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Graph Development&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Apollo Connectors&quot;],&quot;slug&quot;:[0,&quot;graphos/connectors&quot;],&quot;description&quot;:[0,&quot;Connect REST APIs to your graph declaratively.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Apollo Federation&quot;],&quot;slug&quot;:[0,&quot;graphos/schema-design&quot;],&quot;description&quot;:[0,&quot;Federate multiple subgraphs into a single supergraph.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Rover CLI&quot;],&quot;slug&quot;:[0,&quot;rover&quot;],&quot;description&quot;:[0,&quot;Interact with your graph from the command line.&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Graph Routing&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Apollo Router&quot;],&quot;slug&quot;:[0,&quot;graphos/routing&quot;],&quot;description&quot;:[0,&quot;Run and configure your graph gateway.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Apollo Operator&quot;],&quot;slug&quot;:[0,&quot;apollo-operator&quot;],&quot;description&quot;:[0,&quot;Deploy and manage Apollo Router on Kubernetes.&quot;]}]]]}]]]}],[0,{&quot;label&quot;:[0,&quot;Open source&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Client SDKs&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Apollo Client (Web)&quot;],&quot;slug&quot;:[0,&quot;react&quot;],&quot;description&quot;:[0,&quot;Simplify GraphQL data management in web apps.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Apollo iOS&quot;],&quot;slug&quot;:[0,&quot;ios&quot;],&quot;description&quot;:[0,&quot;Swift-first GraphQL client for iOS.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Apollo Kotlin&quot;],&quot;slug&quot;:[0,&quot;kotlin&quot;],&quot;description&quot;:[0,&quot;Kotlin-first GraphQL client for Android and JVM.&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Server Libraries&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;Apollo Server&quot;],&quot;slug&quot;:[0,&quot;apollo-server&quot;],&quot;description&quot;:[0,&quot;Build GraphQL servers with Node.js.&quot;]}],[0,{&quot;label&quot;:[0,&quot;Apollo MCP Server&quot;],&quot;slug&quot;:[0,&quot;apollo-mcp-server&quot;],&quot;description&quot;:[0,&quot;Expose GraphQL tools to AI agents with MCP.&quot;]}]]]}],[0,{&quot;label&quot;:[0,&quot;Other Tools&quot;],&quot;children&quot;:[1,[[0,{&quot;label&quot;:[0,&quot;IDE Support&quot;],&quot;slug&quot;:[0,&quot;ide-support&quot;],&quot;description&quot;:[0,&quot;Enhance your development workflow with IDE support.&quot;]}]]]}]]]}],[0,{&quot;label&quot;:[0,&quot;Resources&quot;],&quot;slug&quot;:[0,&quot;graphos/resources&quot;]}]]],&quot;right&quot;:[1,[]]}],&quot;currentUrl&quot;:[0,&quot;https://www.apollographql.com/docs/react&quot;],&quot;baseUrl&quot;:[0,&quot;/docs&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;SidebarMobile&quot;,&quot;value&quot;: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 &amp; 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: &#34;article nav&#34;"> <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="{&quot;name&quot;:&quot;MDSelect&quot;,&quot;value&quot;: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="{&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react&#x22;],&#x22;ast&#x22;:[0,{&#x22;type&#x22;:[0,&#x22;root&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;Apollo Client&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;apollo client&#x22;],&#x22;definition&#x22;:[0,&#x22;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.&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;Apollo&#x22;],[0,&#x22;client&#x22;]]],&#x22;relatedTerms&#x22;:[1,[[0,&#x22;GraphQL client&#x22;]]],&#x22;usageInstructions&#x22;:[1,[[0,&#x22;The term Apollo Client refers specifically to the web library.&#x22;],[0,&#x22;Do not refer to it simply as \&#x22;the Client\&#x22;.&#x22;],[0,&#x22;Use &#x60;ApolloClient&#x60; when referring to the class/object.&#x22;],[0,&#x22;When referring to the libraries for iOS or Kotlin, use \&#x22;Apollo iOS\&#x22; or \&#x22;Apollo Kotlin\&#x22;.&#x22;],[0,&#x22;You can use \&#x22;Apollo Client (for) Web\&#x22; to differentiate between the web library and the others.&#x22;]]],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;See Apollo Client docs&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;An &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://github.com/apollographql/apollo-client&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;open-source library&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; 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.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;See Apollo Client docs.&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; is a comprehensive &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; state management library for JavaScript. It enables you to manage both local and remote data with &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL.&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Use it to fetch, cache, and modify application data, all while automatically updating your UI.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; helps you structure code in an economical, predictable, and declarative way that&#x27;s consistent with modern development practices. The core &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;inlineCode&#x22;],&#x22;value&#x22;:[0,&#x22;@apollo/client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; library provides built-in integration with React, and the larger Apollo community maintains &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react#community-integrations&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;integrations for other popular view layers&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;mdxJsxFlowElement&#x22;],&#x22;name&#x22;:[0,&#x22;ButtonLink&#x22;],&#x22;attributes&#x22;:[1,[]],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Get started!&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;passthroughRender&#x22;:[0,true]}]}]]],&#x22;data&#x22;:[0,{&#x22;props&#x22;:[0,{&#x22;href&#x22;:[0,&#x22;/react/get-started/&#x22;],&#x22;size&#x22;:[0,&#x22;lg&#x22;],&#x22;colorScheme&#x22;:[0,&#x22;navy&#x22;]}],&#x22;majorComponent&#x22;:[0,false],&#x22;divWrap&#x22;:[0,true]}]}],[0,{&#x22;type&#x22;:[0,&#x22;heading&#x22;],&#x22;depth&#x22;:[0,2],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Core features&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;collapseMargin&#x22;:[0,false]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Some of &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x27;s&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; core capabilities include:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Declarative data fetching:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Write a &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;query&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; and receive data without manually tracking loading states.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Normalized request and &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;response caching:&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;response caching&#x22;],&#x22;definition&#x22;:[0,&#x22;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.&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;router&#x22;],[0,&#x22;GraphOS&#x22;]]],&#x22;relatedTerms&#x22;:[1,[[0,&#x22;GraphOS Router&#x22;],[0,&#x22;distributed caching&#x22;]]],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/routing/performance/caching/response-caching/overview&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;Learn more about response caching&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;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.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/routing/performance/caching/response-caching/overview&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Learn more about response caching.&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Boost performance by responding almost immediately to queries with cached data.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Excellent developer experience:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;
160 Enjoy helpful tooling for TypeScript, Chrome / Firefox devtools, and VS Code.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Designed for modern React:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Take advantage of the latest React features, such as hooks and Suspense.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Incrementally adoptable:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Drop &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; into any JavaScript or TypeScript app and incorporate it feature by feature.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Universally compatible:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Use any build setup and any &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; API.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Community driven:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; Share knowledge with thousands of developers in the &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; community.&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;heading&#x22;],&#x22;depth&#x22;:[0,2],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;AI-powered assistance&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;collapseMargin&#x22;:[0,false]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Need help while coding? &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://agentskills.io/what-are-skills&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Skills&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; are a lightweight format for extending AI agents with specialized knowledge. The &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; skill teaches your AI assistant expert patterns for &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; 4.x.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Install it with:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;mdxJsxFlowElement&#x22;],&#x22;name&#x22;:[0,&#x22;CodeBlockHTML&#x22;],&#x22;attributes&#x22;:[1,[]],&#x22;children&#x22;:[1,[]],&#x22;data&#x22;:[0,{&#x22;props&#x22;:[0,{&#x22;json&#x22;:[0,{&#x22;tabs&#x22;:[1,[[0,{&#x22;lang&#x22;:[0,&#x22;bash&#x22;],&#x22;disableCopy&#x22;:[0,false],&#x22;showLineNumbers&#x22;:[0,true],&#x22;code&#x22;:[0,&#x22;npx skills add apollographql/skills --skill apollo-client&#x22;],&#x22;hast&#x22;:[0,{&#x22;type&#x22;:[0,&#x22;root&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;pre&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;shiki&#x22;],[0,&#x22;shiki-themes&#x22;],[0,&#x22;github-light-default&#x22;],[0,&#x22;houston&#x22;],[0,&#x22;p-4&#x22;],[0,&#x22;rounded-b-md&#x22;],[0,&#x22;text-base/6&#x22;]]],&#x22;style&#x22;:[0,&#x22;background-color:#F2F4F4;--shiki-dark-bg:#0D171C;color:#546461;--shiki-dark:#B4C0BE; font-variant-ligatures: none;&#x22;],&#x22;tabindex&#x22;:[0,&#x22;0&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;code&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;grid&#x22;],[0,&#x22;grid-cols-1&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;1&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#00FAB3&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;npx&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; skills&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; add&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; apollographql/skills&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#365E72;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; --skill&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; apollo-client&#x22;]}]]]}]]]}]]],&#x22;data&#x22;:[0,{&#x22;_shiki_notation&#x22;:[1,[]]}]}]]]}]]]}]}]]]}]}],&#x22;majorComponent&#x22;:[0,true],&#x22;divWrap&#x22;:[0,true]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Once installed, your AI assistant gains expert knowledge about setup, configuration, troubleshooting, hooks, caching strategies, and React integration patterns.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;heading&#x22;],&#x22;depth&#x22;:[0,2],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphOS supported features&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;collapseMargin&#x22;:[0,false]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; works seamlessly with these &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;GraphOS router&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;graphos router&#x22;],&#x22;definition&#x22;:[0,&#x22;A scalable runtime for supergraphs that&#x27;
160s fully integrated with GraphOS and based on the Apollo Router Core. Can be cloud- or self-hosted.&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;Apollo&#x22;],[0,&#x22;router&#x22;]]],&#x22;relatedTerms&#x22;:[1,[[0,&#x22;GraphOS&#x22;],[0,&#x22;router&#x22;],[0,&#x22;Apollo Router Core&#x22;]]],&#x22;usageInstructions&#x22;:[1,[[0,&#x22;Capitalize \&#x22;R\&#x22; in \&#x22;Router.\&#x22;&#x22;],[0,&#x22;In educational content, you may refer to GraphOS Routers as \&#x22;a/the router\&#x22; (uncapitalized) after a nearby preceding use of \&#x22;GraphOS Router\&#x22;.&#x22;],[0,&#x22;Does not require \&#x22;the\&#x22;.&#x22;],[0,&#x22;&#x27;Apollo GraphOS Router&#x27; is valid, but use it only when you need to emphasize or introduce it as Apollo&#x27;s product.&#x22;]]],&#x22;exampleUsage&#x22;:[0,&#x22;Once you connect the Apollo Router Core to GraphOS, it is called a GraphOS Router.&#x22;],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/routing&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;Learn more about routing&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;A scalable runtime for supergraphs that&#x27;s fully integrated with GraphOS and based on the Apollo Router Core. Can be cloud- or self-hosted.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/routing&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Learn more about routing.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; supported features:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Receiving data for specific &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;fields&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; incrementally with the &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/operations/defer&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;inlineCode&#x22;],&#x22;value&#x22;:[0,&#x22;@defer&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; directive&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Real-time updates via &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/operations/subscriptions&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL subscriptions&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Safelisting with &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/operations/persisted-queries&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;persisted queries&#x22;]}]]]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;mdxJsxFlowElement&#x22;],&#x22;name&#x22;:[0,&#x22;Note&#x22;],&#x22;attributes&#x22;:[1,[]],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; also supports &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;inlineCode&#x22;],&#x22;value&#x22;:[0,&#x22;@defer&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; and &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;subscription&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;subscription&#x22;],&#x22;definition&#x22;:[0,&#x22;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.&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;GraphQL&#x22;]]],&#x22;relatedTerms&#x22;:[1,[[0,&#x22;subscription registration&#x22;],[0,&#x22;subscription notification&#x22;]]],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/subscriptions/&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;Learn more about subscriptions&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;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.&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;passthroughRender&#x22;:[0,true]}]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/subscriptions/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Learn more about subscriptions.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; implementations outside of &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;GraphOS.&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;graphos&#x22;],&#x22;definition&#x22;:[0,&#x22;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.&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;Apollo&#x22;]]],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/get-started/concepts/graphos&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;Learn more about GraphOS&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;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.&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;passthroughRender&#x22;:[0,true]}]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/graphos/get-started/concepts/graphos&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Learn more about GraphOS.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; See the &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/defer&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Defer&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; guide and &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/subscriptions&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Subscriptions&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; guide for more information.&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;passthroughRender&#x22;:[0,true]}]}]]],&#x22;data&#x22;:[0,{&#x22;props&#x22;:[0,{}],&#x22;majorComponent&#x22;:[0,false],&#x22;divWrap&#x22;:[0,true]}]}],[0,{&#x22;type&#x22;:[0,&#x22;heading&#x22;],&#x22;depth&#x22;:[0,2],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Recommended docs&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;collapseMargin&#x22;:[0,false]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;After you &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/get-started/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;get started&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;, check out the full &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; documentation in the navigation.&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;We recommend the following articles in particular:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/queries/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Queries&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. Learn how to fetch and render data using &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; queries.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/fragments/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Fragments&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. Learn how to use &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;term&#x22;],&#x22;text&#x22;:[0,&#x22;fragments&#x22;],&#x22;term&#x22;:[0,{&#x22;name&#x22;:[0,&#x22;fragment&#x22;],&#x22;definition&#x22;:[0,&#x22;A selection set of fields that can be shared between multiple query operations. For example:\n\n&#x60;&#x60;&#x60;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&#x60;&#x60;&#x60;&#x22;],&#x22;frontmatter&#x22;:[0,{&#x22;labels&#x22;:[1,[[0,&#x22;GraphQL&#x22;]]],&#x22;internalOnly&#x22;:[0,false],&#x22;learnMore&#x22;:[0,&#x22;https://graphql.com/learn/interfaces-and-unions/#fragments&#x22;],&#x22;learnMoreText&#x22;:[0,&#x22;Learn more about fragments&#x22;]}]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;A selection set of fields that can be shared between multiple query operations. For example:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;mdxJsxFlowElement&#x22;],&#x22;name&#x22;:[0,&#x22;CodeBlockHTML&#x22;],&#x22;attributes&#x22;:[1,[]],&#x22;children&#x22;:[1,[]],&#x22;data&#x22;:[0,{&#x22;props&#x22;:[0,{&#x22;json&#x22;:[0,{&#x22;tabs&#x22;:[1,[[0,{&#x22;lang&#x22;:[0,&#x22;graphql&#x22;],&#x22;disableCopy&#x22;:[0,false],&#x22;showLineNumbers&#x22;:[0,true],&#x22;code&#x22;:[0,&#x22;fragment UserData on User {\n  id: ID!\n  firstName: String!\n  lastName: String!\n}\n\nquery GetUsers {\n  allUsers {\n    ...UserData\n  }\n}&#x22;],&#x22;hast&#x22;:[0,{&#x22;type&#x22;:[0,&#x22;root&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;pre&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;shiki&#x22;],[0,&#x22;shiki-themes&#x22;],[0,&#x22;github-light-default&#x22;],[0,&#x22;houston&#x22;],[0,&#x22;p-4&#x22;],[0,&#x22;rounded-b-md&#x22;],[0,&#x22;text-base/6&#x22;]]],&#x22;style&#x22;:[0,&#x22;background-color:#F2F4F4;--shiki-dark-bg:#0D171C;color:#546461;--shiki-dark:#B4C0BE; font-variant-ligatures: none;&#x22;],&#x22;tabindex&#x22;:[0,&#x22;0&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;code&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;grid&#x22;],[0,&#x22;grid-cols-1&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;1&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#005AAF;--shiki-dark:#5C95B2&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;fragment&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; UserData&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#005AAF;--shiki-dark:#5C95B2&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; on&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#365E72;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; User&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; {&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22
160;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;2&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;  id&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;: &#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#7DC0FF&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;ID&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;!&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;3&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;  firstName&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;: &#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#7DC0FF&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;String&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;!&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;4&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7D6800;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;  lastName&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;: &#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#7DC0FF&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;String&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;!&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;5&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;}&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;6&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;7&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#005AAF;--shiki-dark:#5C95B2&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;query&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#7B00C7;--shiki-dark:#00FAB3&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; GetUsers&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; {&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;8&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#7DC0FF&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;  allUsers&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; {&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;9&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#005AAF;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;    ...&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#B03900;--shiki-dark:#7DC0FF&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;UserData&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;10&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;  }&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;\n&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;class&#x22;:[1,[[0,&#x22;line&#x22;],[0,&#x22;inline-block&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;className&#x22;:[1,[[0,&#x22;select-none inline-block text-right w-8 mr-4 line-number&#x22;]]]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;11&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;element&#x22;],&#x22;tagName&#x22;:[0,&#x22;span&#x22;],&#x22;properties&#x22;:[0,{&#x22;style&#x22;:[0,&#x22;color:#546461;--shiki-dark:#B4C0BE&#x22;]}],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;}&#x22;]}]]]}]]]}]]],&#x22;data&#x22;:[0,{&#x22;_shiki_notation&#x22;:[1,[]]}]}]]]}]]]}]}]]]}]}]}]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;url&#x22;:[0,&#x22;https://graphql.com/learn/interfaces-and-unions/#fragments&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Learn more about fragments.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; and data masking to build robust, data-driven components.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/data/mutations/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Mutations&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. Learn how to modify data using &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;mutations.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/caching/overview/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Caching overview&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x27;s&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; normalized cache enables you to skip network requests entirely when data is already available locally.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/local-state/local-state-management/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Managing local state&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; provides APIs for managing both remote and local data, enabling you to consolidate all of your application&#x27;
160s state.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/networking/basic-http-networking/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Basic HTTP networking&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. Learn how to send custom headers and other authentication metadata in your queries.&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/development-testing/testing/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;strong&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Testing React components&#x22;]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;. Test your &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;GraphQL&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;operations&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; without requiring a connection to a server.&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;heading&#x22;],&#x22;depth&#x22;:[0,2],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Community integrations&#x22;]}]]],&#x22;data&#x22;:[0,{&#x22;collapseMargin&#x22;:[0,false]}]}],[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;This documentation set focuses on React, but &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Client&#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; supports many other libraries and languages:&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;JavaScript&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#angular&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Angular&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#vue&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Vue&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#svelte&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Svelte&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#solidjs&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Solid.js&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#ember&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Ember&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.meteor.com/&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Meteor&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22; (thanks to &#x22;]}],[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://github.com/Swydo/ddp-apollo&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;DDP-Apollo&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;)&#x22;]}]]]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Web Components&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/react/integrations/integrations/#web-components&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Apollo Elements&#x22;]}]]]}]]]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Native mobile&#x22;]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;list&#x22;],&#x22;ordered&#x22;:[0,false],&#x22;start&#x22;:[0,null],&#x22;spread&#x22;:[0,false],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/ios&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Native iOS with Swift&#x22;]}]]]}]]]}]]]}],[0,{&#x22;type&#x22;:[0,&#x22;listItem&#x22;],&#x22;spread&#x22;:[0,false],&#x22;checked&#x22;:[0,null],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;paragraph&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;link&#x22;],&#x22;title&#x22;:[0,null],&#x22;url&#x22;:[0,&#x22;https://www.apollographql.com/docs/kotlin&#x22;],&#x22;children&#x22;:[1,[[0,{&#x22;type&#x22;:[0,&#x22;text&#x22;],&#x22;value&#x22;:[0,&#x22;Native Android with Java and Kotlin&#x22;]}]]]}]]]}]]]}]]]}]]]}]]]}]]]}]}" ssr="" client="load" opts="{&#x22;name&#x22;:&#x22;MDXRenderRoot&#x22;,&#x22;value&#x22;: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="{&quot;pathname&quot;:[0,&quot;/docs/react&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Feedback&quot;,&quot;value&quot;: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="{&quot;defaultAIProvider&quot;:[0,&quot;openai&quot;]}" ssr="" client="idle" opts="{&quot;name&quot;:&quot;AskAISimpleClient&quot;,&quot;value&quot;: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&copy; 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="[&#34;core-features&#34;,&#34;ai-powered-assistance&#34;,&#34;graphos-supported-features&#34;,&#34;recommended-docs&#34;,&#34;community-integrations&#34;]" 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.