1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)"/><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/><style>:root{--nextra-primary-hue:319deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:44.1%;--nextra-navbar-height:64px;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:251,251,249;}.dark{--nextra-primary-hue:319deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:90%;--nextra-bg:15,15,12;}</style><title>Learn | GraphQL</title><meta property="og:title" content="Learn | GraphQL"/><meta property="twitter:site" content="@graphql"/><meta property="og:image" content="https://graphql-github-gtiykil0m-the-graph-ql-foundation.vercel.app/img/og-logo.png"/><meta name="twitter:card" content="summary"/><meta name="next-head-count" content="8"/><link rel="preload" href="/_next/static/media/70434a467ac4a08b-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/b8a2dcd8ba053f45-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/d2c053a71c898a63-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/3c352b6db2a81f57.css" as="style"/><link rel="stylesheet" href="/_next/static/css/3c352b6db2a81f57.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-05cc7f187e27992e.js" defer=""></script>
1<script src="/_next/static/chunks/framework-6931941517b9fcc9.js" defer=""></script>
1<script src="/_next/static/chunks/main-07bd800d10f05c86.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-16f93f089c7e7a35.js" defer=""></script>
1<script src="/_next/static/chunks/3556-9677e3864c8db3fa.js" defer=""></script>
1<script src="/_next/static/chunks/5043-7e22719f9dad3403.js" defer=""></script>
1<script src="/_next/static/chunks/pages/learn-0b31626f53fadad2.js" defer=""></script>
1<script src="/_next/static/0o4RDAs2zB6pJACa-9vyn/_buildManifest.js" defer=""></script>
1<script src="/_next/static/0o4RDAs2zB6pJACa-9vyn/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next"><style> 2html { 3 --font-sans: '__hostGrotesk_4b1926', '__hostGrotesk_Fallback_4b1926'; 4 --font-mono: '__commitMono_9d2e4e', '__commitMono_Fallback_9d2e4e'; 5}</style>
5<script>((e,t,r,n,o,i,a,l)=>{let s=document.documentElement,u=["light","dark"];function c(t){(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&i?o.map(e=>i[e]||e):o;r?(s.classList.remove(...n),s.classList.add(i&&i[t]?i[t]:t)):s.setAttribute(e,t)}),l&&u.includes(t)&&(s.style.colorScheme=t)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
5<div dir="ltr">
5<script>document.documentElement.setAttribute('dir','ltr')</script>
5<div class="nextra-nav-container sticky top-0 z-20 w-full bg-transparent print:hidden"><div class="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]" style="mask-image:linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%);-webkit-mask-image:linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%);background:linear-gradient(to bottom,rgb(var(--nextra-bg),.97) 0%, rgb(var(--nextra-bg),.5) 50% 100%)"></div><div class="pointer-events-none absolute inset-0 h-full translate-y-full bg-white/10" style="backdrop-filter:blur(8px) brightness(120%) saturate(113%);mask-image:linear-gradient(to bottom, black 0, black 1px, transparent 1px);-webkit-mask-image:linear-gradient(to bottom, black 0, black 1px, transparent 1px)"></div><nav class="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[120rem] items-center justify-end pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nextra-focus flex items-center hover:opacity-75" href="/"><svg xmlns="http://www.w3.org/2000/svg" style="fill:color(display-p3 .8824 0 .5961)" viewBox="0 0 367 100" class="nextra-logo h-6" title="GraphQL"><path fill-rule="evenodd" d="m50 6.468 37.7 21.766v43.532L50 93.532 12.3 71.766V28.234zM16.53 30.676v31.976l27.692-47.964zM50 13.14 18.078 68.43h63.844zm27.692 59.52H22.308L50 88.648zm5.778-10.008L55.778 14.688 83.47 30.676z" clip-rule="evenodd"></path><circle cx="14.41" cy="29.45" r="8.91"></circle><circle cx="14.41" cy="70.545" r="8.91"></circle><circle cx="50" cy="91.09" r="8.91"></circle><circle cx="85.585" cy="70.545" r="8.91"></circle><circle cx="85.585" cy="29.455" r="8.91"></circle><circle cx="50" cy="8.91" r="8.91"></circle><path d="M138.875 71.625q-7.812 0-12.125-4.5t-4.562-12.062q-.063-1.876-.063-5.938t.063-5.937q.25-7.563 4.562-12.063t12.125-4.5q5.313 0 8.938 2 3.624 2 5.375 4.75 1.812 2.688 1.937 4.813v.124q0 .501-.375.813-.375.313-.938.313h-1.374q-.562 0-.813-.25t-.5-1q-1.062-3.313-4.125-5.563-3-2.25-8.125-2.25-5.812 0-9.187 3.188-3.313 3.187-3.563 9.937-.062 1.875-.062 5.625t.062 5.625q.25 6.75 3.563 9.938 3.375 3.186 9.187 3.187 5.813 0 9.375-3.312 3.562-3.314 3.562-9.813v-3.187h-10.874q-.625 0-1-.376a1.58 1.58 0 0 1-.375-1.062v-.875q0-.625.375-1 .375-.437 1-.437h13.374q.688 0 1.063.374.375.376.375 1.063v5.5q0 4.999-2 8.813-2 3.811-5.812 5.937-3.813 2.125-9.063 2.125M165.941 71q-.625 0-1-.375t-.375-1V39.938q0-.625.375-1 .375-.438 1-.438h1q.625 0 1 .438.438.375.438 1v2.874q2.25-4.312 8.5-4.312h2.312q.625 0 1 .375t.375 1v.875q0 .625-.375 1t-1 .375h-2.687q-3.75 0-5.938 2.188-2.187 2.187-2.187 5.937v19.375q0 .625-.438 1-.375.375-1 .375zM194.557 71.625q-3 0-5.563-1.25T184.869 67q-1.5-2.126-1.5-4.687 0-4.125 3.313-6.75 3.374-2.625 9.062-3.376l9.875-1.374v-2.188q0-3.438-2.125-5.25-2.063-1.875-6.375-1.875-3.188 0-5.25 1.25-2 1.25-2.562 3-.25.75-.625 1.063-.313.25-.875.25h-.875q-.563 0-1-.376a1.5 1.5 0 0 1-.375-1q0-1.374 1.25-3.187 1.25-1.875 3.875-3.25t6.437-1.375q6.687 0 9.5 3.188 2.813 3.187 2.813 7.75v20.812q0 .625-.375 1-.376.375-1 .375h-1.063q-.625 0-1-.375t-.375-1v-2.937q-1.375 2.061-4.062 3.5-2.626 1.437-7 1.437m.625-3.625q4.561 0 7.5-3 2.937-3 2.937-8.625V54.25l-8.062 1.125q-5.125.687-7.75 2.375T187.182 62q0 2.875 2.375 4.438Q191.994 68 195.182 68M220.752 82.875q-.624 0-1-.375-.375-.375-.375-1V39.875q0-.625.375-1 .376-.375 1-.375h1.063q.625 0 1 .375t.375 1v2.938q3.626-4.938 10.5-4.938 6.75 0 9.937 4.313 3.25 4.25 3.438 10.5.063.624.062 2.062 0 1.437-.062 2.063-.187 6.25-3.438 10.562-3.187 4.25-9.937 4.25-6.813 0-10.5-4.937V81.5q0 .625-.375 1t-1 .375zM233.315 68q5.062 0 7.375-3.187 2.375-3.25 2.562-8.313.063-.625.063-1.75 0-5.813-2.25-9.5-2.25-3.75-7.75-3.75-4.938 0-7.438 3.313-2.5 3.25-2.687 7.687l-.063 2.438.063 2.437a12.8 12.8 0 0 0 1.187 5.125q1.125 2.375 3.375 3.938Q230.002 68 233.315 68M257.068 71q-.625 0-1-.375t-.375-1V28q0-.625.375-1t1-.375h1.063q.625 0 1 .375t.375 1v14.813q1.875-2.439 4.25-3.688 2.437-1.25 6.25-1.25 6.125 0 9.437 3.938 3.313 3.874 3.313 10.062v17.75q0 .625-.375 1t-1 .375h-1.063q-.625 0-1-.375t-.375-1V52.188q0-5.063-2.5-7.876-2.437-2.812-7.062-2.812-4.5 0-7.188 2.875-2.687 2.813-2.687 7.813v17.437q0 .625-.375 1t-1 .375zM321.682 75.063q-.938 0-2-1.438l-2.75-3.812q-3.75 1.812-8.75 1.812-16.062 0-16.5-17.25-.062-1.875-.062-5.25t.062-5.25q.25-8.5 4.625-12.875t11.875-4.375T320.057 31t4.625 12.875q.125 3.75.125 5.25t-.125 5.25q-.312 8.937-4.562 13.125l4 5.625q.187.376.187.688a1.2 1.2 0 0 1-.375.874 1.2
51.2 0 0 1-.875.376zm-13.5-7.188q5.625 0 8.938-3.375 3.375-3.437 3.625-10.437.125-3.75.125-4.938t-.125-4.937q-.25-7-3.625-10.376-3.375-3.437-8.938-3.437-5.562 0-8.937 3.438-3.375 3.375-3.625 10.374-.063 1.875-.063 4.938t.063 4.938q.25 6.999 3.562 10.437 3.375 3.375 9 3.375M336.126 71q-.625 0-1-.375t-.375-1v-41q0-.625.375-1t1-.375h1.188q.625 0 1 .375t.375 1V67.25h21.562q.688 0 1.063.375t.375 1.063v.937q0 .625-.438 1-.375.375-1 .375z"></path></svg></a><div class="flex-1"></div><nav class="-mx-2 flex overflow-x-auto px-2 py-1.5 xl:absolute xl:left-1/2 xl:-translate-x-1/2"><ul aria-orientation="horizontal" class="flex w-full items-center gap-2"><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden underline" aria-current="true" href="/learn/">Learn</a></li><li class="max-md:hidden"><button type="button" aria-disabled="false" tabindex="0" aria-expanded="false" data-base-ui-navigation-menu-trigger="" class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 focus-visible:nextra-focusable flex items-center gap-1.5 whitespace-nowrap data-[popup-open]:underline max-md:hidden">Resource Hub</button></li><li class="max-md:hidden"><button type="button" aria-disabled="false" tabindex="0" aria-expanded="false" data-base-ui-navigation-menu-trigger="" class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 focus-visible:nextra-focusable flex items-center gap-1.5 whitespace-nowrap data-[popup-open]:underline max-md:hidden">Community</button></li><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden" aria-current="false" href="/blog/">Blog</a></li><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden" aria-current="false" href="/ai/"><span class="relative block rounded-full bg-pri-base/15 px-2 py-0.5 text-[0.7rem] font-bold uppercase tracking-wide text-pri-dark dark:bg-pri-light/20 dark:text-pri-light [a:has(>&)]:no-underline">AI</span></a></li><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden" aria-current="false" href="/conf/2026/"><span class="relative block before:absolute before:-inset-x-3 before:-inset-y-1 before:border before:border-current [a:has(>&)]:text-pri-base dark:[a:has(>&)]:text-pri-light [a:hover:has(>&)]:no-underline [a:hover_&]:before:border-transparent">GraphQLConf<span class="max-xl:hidden"> 2026</span></span></a></li><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden" aria-current="false" href="/day/"><span class="relative block before:absolute before:-inset-x-3 before:-inset-y-1 before:border before:border-current [a:has(>&)]:text-emerald-600 dark:[a:has(>&)]:text-emerald-400 [a:hover:has(>&)]:no-underline [a:hover_&]:before:border-transparent">GraphQL Days</span></a></li><li class="max-md:hidden"><a class="typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none hover:underline underline-offset-2 md:py-5 whitespace-nowrap max-md:hidden" aria-current="false" href="/graphql-js/">GraphQL.JS Tutorial</a></li></ul></nav><div class="not-prose relative flex items-center text-neu-900 block select-none text-sm max-md:hidden [&>input::placeholder]:text-neu-700 [&>input]:bg-neu-0/[.55] [&>input]:text-neu-900"><input spellcheck="false" class="px-3 py-2 transition-colors w-full md:w-64 text-base leading-tight md:text-sm bg-black/[.05] dark:bg-neu-100/10 placeholder:text-neu-500 contrast-more:border
5contrast-more:border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search..." id="headlessui-combobox-input-:R5n556:" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div><button type="button" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Change theme" title="Change theme" class="gql-focus-visible relative cursor-pointer text-neu-800 transition-colors before:absolute before:-inset-2 hover:bg-neu-100 hover:text-neu-900 focus-visible:outline-offset-4 dark:text-neu-700 dark:hover:bg-neu-50/50 max-lg:hidden [&_span]:hidden"><div class="flex items-center gap-2 border border-transparent p-[5px] [[aria-expanded=true]>&]:border-neu-300 [[aria-expanded=true]>&]:bg-neu-0 [[aria-expanded=true]>&]:dark:border-neu-100"><svg fill="currentColor" viewBox="0 0 14 14" height="16"><path fill-rule="evenodd" d="M7.583 0H6.417v2.333h1.166zM0 6.417v1.166h2.333V6.417zm11.667 0H14v1.166h-2.333zM7.583 14H6.417v-2.333h1.166zM4.667 3.5h4.666v1.167H4.667zm0 5.833H3.5V4.667h1.167zm0 0V10.5h4.666V9.333H10.5V4.667H9.333v4.666zm7-8.166h1.166v1.166h-1.166zm0 1.166V3.5H10.5V2.333zm1.166 10.5h-1.166v-1.166h1.166zm-1.166-1.166H10.5V10.5h1.167zm-9.334-10.5H1.167v1.166h1.166V3.5H3.5V2.333H2.333zM1.167 12.833h1.166v-1.166H3.5V10.5H2.333v1.167H1.167z" clip-rule="evenodd"></path></svg><span class="text-sm capitalize leading-none sr-only">light</span></div></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="light"/><button class="_transition nextra-hamburger p-2 text-pri-base md:hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg fill="currentColor" viewBox="0 0 24 24" class="size-5"><path d="M4 6h16v2H4zm0 5h16v2H4zm16 5H4v2h16z"></path></svg></button></nav></div><div class="mx-auto flex pb-8 xl:pb-12"><div class="[transition:background-color_1.5s_ease] bg-transparent"></div><aside class="nextra-sidebar-container flex flex-col motion-reduce:transform-none motion-reduce:transition-none md:top-16 md:shrink-0 [.resizing_&]:transition-none transition-gpu duration-300 ease-in-out print:hidden md:w-64 md:hidden max-md:[transform:translate3d(0,-100%,0)]"><div class="px-4 pt-4 md:hidden"><div class="not-prose relative flex items-center text-neu-900 block select-none text-sm text-neu-500"><input spellcheck="false" class="px-3 py-2 transition-colors w-full md:w-64 text-base leading-tight md:text-sm bg-black/[.05] dark:bg-neu-100/10 placeholder:text-neu-500 contrast-more:border contrast-more:border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search..." id="headlessui-combobox-input-:Rmrjd6:" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div></div><div class="overflow-y-auto grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] xl:pl-0 nextra-scrollbar"></div><div class="nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:ml-0.5 xl:mr-0 xl:px-0"><div class="flex grow flex-col"><button type="button" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Change theme" title="Change theme" class="gql-focus-visible relative cursor-pointer text-neu-800 transition-colors before:absolute before:-inset-2 hover:bg-neu-100 hover:text-neu-900 focus-visible:outline-offset-4 dark:text-neu-700 dark:hover:bg-neu-50/50"><div class="flex items-center gap-2 border border-transparent p-[5px] [[aria-expanded=true]>&]:border-neu-300 [[aria-expanded=true]>&]:bg-neu-0 [[aria-expanded=true]>&]:dark:border-neu-100"><svg fill="currentColor" viewBox="0 0 14 14" height="16"><path fill-rule="evenodd" d="M7.583 0H6.417v2.333h1.166zM0 6.417v1.166h2.333V6.417zm11.667 0H14v1.166h-2.333zM7.583 14H6.417v-2.333h1.166zM4.667 3.5h4.666v1.167H4.667zm0 5.833H3.5V4.667h1.167zm0 0V10.5h4.666V9.333H10.5V4.667H9.333v4.666zm7-8.166h1.166v1.166h-1.166zm0 1.166V3.5H10.5V2.333zm1.166 10.5h-1.166v-1.166h1.166zm-1.166-1.166H10.5V10.5h1.167zm-9.334-10.5H1.167v1.166h1.166V3.5H3.5V2.333H2.333zM1.167 12.833h1.166v-1.166H3.5V10.5H2.333v1.167H1.167z" clip-rule="evenodd"></path></svg><span class="text-sm capitalize leading-none text-neu-800">light</span></div></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="light"/></div><button class="_transition p-2 text-neu-800 hover:bg-neu-100 hover:text-neu-900 dark:hover:bg-neu-500/5 max-md:hidden" title="Hide sidebar" type="button" data-headlessui-state=""><svg width="32" height="32" fill="currentColor" viewBox="0 0 32 32" class="size-5"><path d="M8 26.667H5.333V5.333H8zm10.667-4H16V20h2.667zm-2.667-8h10.667v2.666H16V20h-2.667v-2.667h-2.666v-2.666h2.666V12H16zM18.667 12H16V9.333h2.667z"></path></svg></button></div></aside><div id="reach-skip-nav"></div><div class="w-full break-words"><style>.nextra-nav-container.sticky { position: fixed }</style> 6<section class="relative overflow-visible bg-neu-0 pt-[calc(var(--nextra-navbar-height)+24px)] mb-4 lg:mb-8"><div role="presentation" class="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(75,15%,5%)] dark:[--end-2:hsl(319,100%,10%)] dark:[--start-1:hsl(319,100%,14%)] dark:[--start-2:hsl(319,100%,30%)] sm:h-[360px] lg:h-[c
6alc(100%-163px)]" style="mask-image:url(/_next/static/media/learn-blur-bean.58ffd7dd.webp);-webkit-mask-image:url(/_next/static/media/learn-blur-bean.58ffd7dd.webp);mask-size:2200px;-webkit-mask-size:2200px;mask-position:50% 60%;-webkit-mask-position:50% 60%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat"><div class="absolute inset-0 bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]" style="--stripe-width:12px;--angle:90deg;mask-image:repeating-linear-gradient(var(--angle), transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2));-webkit-mask-image:repeating-linear-gradient(var(--angle), transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"></div><div class="absolute inset-0 bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]" style="--stripe-width:12px;--angle:90deg;mask-image:repeating-linear-gradient(var(--angle), black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2));-webkit-mask-image:repeating-linear-gradient(var(--angle), black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"></div></div><div class="gql-section gql-container relative flex !max-w-screen-lg flex-col items-center gap-6 text-center lg:gap-8 xl:!max-w-screen-xl"><h1 class="typography-h1">Learn GraphQL</h1><p class="typography-body-md max-w-[80vw] text-pretty">Get hands-on with the fundamentals of GraphQL. Start with the basics and see how it compares to other technologies.<br class="max-lg:hidden"/> <!-- -->Then move on to best practices for designing better APIs.</p><a class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 lg:w-fit" href="/learn/introduction/"><p>Start with the basics</p></a><div class="mt-2 w-full border border-neu-300 bg-neu-0/[.64] dark:border-neu-100 lg:mt-4 max-w-[528px]"><h2 class="typography-body-lg px-4 py-2.5 text-center md:py-4">What will you find here?</h2><ul class="grid grid-flow-row-dense gap-px border-t border-inherit bg-neu-300 dark:bg-neu-100 grid-cols-2 grid-rows-2"><li><a class="flex h-full items-center gap-2 bg-neu-0 p-2 text-left hover:bg-neu-50 max-sm:text-sm sm:gap-2 sm:p-3 lg:py-5" href="#learn-graphql"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Learn GraphQL</a></li><li><a class="flex h-full items-center gap-2 bg-neu-0 p-2 text-left hover:bg-neu-50 max-sm:text-sm sm:gap-2 sm:p-3 lg:py-5" href="#tutorials"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Tutorials</a></li><li><a class="flex h-full items-center gap-2 bg-neu-0 p-2 text-left hover:bg-neu-50 max-sm:text-sm sm:gap-2 sm:p-3 lg:py-5" href="#best-practices">
6<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Best Practices</a></li><li><a class="flex h-full items-center gap-2 bg-neu-0 p-2 text-left hover:bg-neu-50 max-sm:text-sm sm:gap-2 sm:p-3 lg:py-5" href="#faq"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 shrink-0 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>FAQ</a></li></ul></div></div></section> 7<section class="gql-container gql-section flex items-start gap-8 max-lg:flex-col max-lg:pt-6 lg:gap-12 lg:pb-24 xl:gap-16" id="learn-graphql"><header class="flex max-w-[720px] flex-col gap-6 text-left lg:max-w-[540px]"><div class="flex flex-col gap-6"><span class="typography-menu flex items-center gap-1 text-pri-base dark:text-pri-light"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Learn GraphQL</span><h2 class="typography-h2 text-pretty text-neu-900">Getting started with GraphQL</h2><p class="typography-body-md text-pretty text-neu-800">In this tutorial-style introduction to GraphQL, you'll learn the core concepts that power every GraphQL API. Follow a step-by-step path from basic queries to advanced features.</p><a class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 md:w-fit" href="/learn/introduction/">Start learning</a></div></header><div><ul class="grid grid-cols-1 justify-stretch gap-4 sm:max-lg:grid-cols-2 lg:gap-8"><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/introduction" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/computer.baafda2e.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="eager" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->1</span><span class="typography-h3 font-normal text-neu-900">Introduction</span></span>
7<p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Get a high-level overview of GraphQL and how it enables flexible, versionless APIs powered by a strong type system.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/schema" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/hierarchy.4b822ebf.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="eager" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->2</span><span class="typography-h3 font-normal text-neu-900">Schemas and Types</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how GraphQLâs schema language defines the shape of your data using types.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/queries" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/search.a938fa3e.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->3</span><span class="typography-h3 font-normal text-neu-900">Queries</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Understand how to structure GraphQL queries to request exactly the data you need â including fields, variables and fragments.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/mutations" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dar
7k:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/dna.80bbe9bb.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->4</span><span class="typography-h3 font-normal text-neu-900">Mutations</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Explore how to modify data with mutations, including how to update and remove records through your schema.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/subscriptions" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/sync-square.0ad61af4.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->5</span><span class="typography-h3 font-normal text-neu-900">Subscriptions</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Discover how GraphQL supports real-time data with subscriptions and how to use them effectively at scale.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/validation" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dar
7k:bg-pri-lighter/5"><img src="/_next/static/media/checkbox.ffd3e716.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->6</span><span class="typography-h3 font-normal text-neu-900">Validation</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">See how GraphQL ensures query correctness through validation rules and how common errors are detected early.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/execution" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/cog-double.9488ebfd.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->7</span><span class="typography-h3 font-normal text-neu-900">Execution</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how resolvers power GraphQL execution and how the server processes and returns data for each query.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/response" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/nav-left-circle.8ceff444.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">
7Lesson <!-- -->8</span><span class="typography-h3 font-normal text-neu-900">Response</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Explore how GraphQL structures its responses, including data, errors and extensions for custom metadata.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/introspection" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-pri-lighter/10 dark:bg-pri-lighter/5"><img src="/_next/static/media/zoom-page.98905cfe.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->9</span><span class="typography-h3 font-normal text-neu-900">Introspection</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Use introspection to explore the schema itself â a powerful way to inspect types and fields dynamically.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li></ul><button class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 mt-4 w-full lg:mt-8" data-variant="secondary" variant="secondary">Show more</button></div></section> 8<section class="gql-container gql-section flex items-start gap-8 max-lg:flex-col max-lg:pt-6 lg:gap-12 lg:pb-24 xl:gap-16" id="best-practices"><header class="flex max-w-[720px] flex-col gap-6 text-left lg:max-w-[540px]"><div class="flex flex-col gap-6"><span class="typography-menu flex items-center gap-1 text-pri-base dark:text-pri-light">
8<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Best practices</span><h2 class="typography-h2 text-pretty text-neu-900">Practical guidelines</h2><p class="typography-body-md text-pretty text-neu-800">Here you'll explore real-world strategies for designing and operating GraphQL APIs. These guides will help you build for scale and safety.</p><a class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 md:w-fit" href="/learn/best-practices/">Explore all best practices</a></div></header><div><ul class="grid grid-cols-1 justify-stretch gap-4 sm:max-lg:grid-cols-2 lg:gap-8"><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/best-practices" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/keyboard.dd0a60b4.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->1</span><span class="typography-h3 font-normal text-neu-900">Introduction</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Understand the context behind the GraphQL Best Practices lessons.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/thinking-in-graphs" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dar
8k:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/share.55969c44.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->2</span><span class="typography-h3 font-normal text-neu-900">Thinking In Graphs</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how to shift your mindset from RESTful endpoints to graph-based thinking, aligning your schema with business logic and legacy systems.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/serving-over-http" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/globe.7d8e0700.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->3</span><span class="typography-h3 font-normal text-neu-900">Serving Over Http</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Explore how GraphQL operates over HTTP, including methods, headers, status codes and API endpoint design.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/file-uploads" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/note.6ab98c31.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">
8Lesson <!-- -->4</span><span class="typography-h3 font-normal text-neu-900">File Uploads</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Handle file uploads in GraphQL by wrapping them as mutations. Learn the recommended approach for integrating file handling into your API.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/authorization" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/key.4eb3f08e.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->5</span><span class="typography-h3 font-normal text-neu-900">Authorization</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Understand how to secure your GraphQL APIs with type- and field-level authorization patterns.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/pagination" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/layer.799772fb.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->6</span><span class="typography-h3 font-normal text-neu-900">Pagination</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Discover different pagination strategies in GraphQL, from simple slicing to fully connected edges and nodes.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/schema-design" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dar
8k:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/solve.178ba5ce.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->7</span><span class="typography-h3 font-normal text-neu-900">Schema Design</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how to design clear, adaptable schemas â including versioning and thoughtful use of nullability.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/error-handling" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/construction.e52f4d76.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->8</span><span class="typography-h3 font-normal text-neu-900">Error Handling</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Compare top-level errors and errors-as-data, and learn when to use each approach for exceptional versus expected failures.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/global-object-identification" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/product-check.ccfea63f.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">
8Lesson <!-- -->9</span><span class="typography-h3 font-normal text-neu-900">Global Object Identification</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Use globally unique IDs and the Node interface to enable caching, refetching, and efficient schema traversal.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/caching" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/books.68daf428.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->10</span><span class="typography-h3 font-normal text-neu-900">Caching</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Explore caching techniques and ID strategies that make client-side performance and object reuse more effective.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/performance" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/startup.2d83a8fa.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->11</span><span class="typography-h3 font-normal text-neu-900">Performance</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Get practical tips for improving GraphQL performance â from preventing N+1 problems to monitoring and compression.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/security" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dar
8k:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/safe.9cdbdcf6.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->12</span><span class="typography-h3 font-normal text-neu-900">Security</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Protect your GraphQL API with best practices for query limits, input validation, introspection control and more.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/federation" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/circuit.c9953f88.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->13</span><span class="typography-h3 font-normal text-neu-900">Federation</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how GraphQL federation enables modular, scalable APIs by composing services into a unified schema.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/robust-applications" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/product-check.ccfea63f.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">
8Lesson <!-- -->14</span><span class="typography-h3 font-normal text-neu-900">Robust Applications</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Build applications that gracefully handle schema evolution â unknown enum values, new union members, and nullable fields.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/debug-errors" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/construction.e52f4d76.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->15</span><span class="typography-h3 font-normal text-neu-900">Common GraphQL over HTTP Errors</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn about common 'graphql-http' errors and how to debug them.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/naming-design" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px] bg-sec-lighter dark:bg-sec-lighter/5"><img src="/_next/static/media/pen.302db8ee.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->16</span><span class="typography-h3 font-normal text-neu-900">Naming Conventions and Design Standards</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how to establish naming conventions and design standards for your GraphQL schema.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li></ul><button class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dar
8k:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 mt-4 w-full lg:mt-8" data-variant="secondary" variant="secondary">Show more</button></div></section> 9<section class="gql-container gql-section flex items-start gap-8 max-lg:flex-col max-lg:pt-6 lg:gap-12 lg:pb-24 xl:gap-16" id="schema-governance"><header class="flex max-w-[720px] flex-col gap-6 text-left lg:max-w-[540px]"><div class="flex flex-col gap-6"><span class="typography-menu flex items-center gap-1 text-pri-base dark:text-pri-light"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Schema governance</span><h2 class="typography-h2 text-pretty text-neu-900">Schema governance</h2><p class="typography-body-md text-pretty text-neu-800">A healthy GraphQL API starts with a well-governed schema. Learn how to put review processes and automated checks in place so your schema stays consistent, safe, and easy to evolve as your team grows.</p><a class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 md:w-fit" href="/learn/schema-review/">Explore schema governance</a></div></header><div><ul class="grid grid-cols-1 justify-stretch gap-4 sm:max-lg:grid-cols-2 lg:gap-8"><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/governance-ownership" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px]"><img src="/_next/static/media/handshake.a10420f0.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">
9Lesson <!-- -->1</span><span class="typography-h3 font-normal text-neu-900">Schema Ownership and Governance Models</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Explore different models for schema ownership and governance, including centralized, federated and hybrid approaches.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/governance-tooling" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px]"><img src="/_next/static/media/wrench.f3951d93.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->2</span><span class="typography-h3 font-normal text-neu-900">Governance Tooling</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn about schema governance and best practices for managing your GraphQL schema.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/schema-review" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px]"><img src="/_next/static/media/checkbox.ffd3e716.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->3</span><span class="typography-h3 font-normal text-neu-900">Schema Review</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Establish review processes and automated validation to keep your GraphQL schema consistent, safe, and easy to evolve.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li class="flex text-neu-900 lg:[&:nth-child(n+4)]:hidden [&:nth-child(n+5)]:hidden"><a href="/learn/governance-versioning" class="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dar
9k:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"><span class="flex aspect-square h-full w-[72px] items-center justify-center border-neu-200 p-2 [grid-area:icon] dark:border-neu-100 lg:min-w-[190px]"><img src="/_next/static/media/mountain.feac0503.svg" width="72" height="72" class="aspect-square lg:size-[138px]" loading="lazy" alt=""/></span><span class="flex flex-col gap-1 px-2 [grid-area:header] lg:px-4 pt-2 lg:pt-4"><span class="typography-body-sm text-neu-700 max-lg:typography-body-md">Lesson <!-- -->4</span><span class="typography-h3 font-normal text-neu-900">Schema Change Management</span></span><p class="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">Learn how to manage schema changes and versioning in GraphQL, ensuring smooth evolution of your API.</p><span class="hidden items-center justify-center place-self-end border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li></ul><button class="relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 dark:data-[variant=secondary]:bg-neu-100/80 dark:data-[variant=secondary]:hover:bg-neu-200/50 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20 mt-4 w-full lg:mt-8" data-variant="secondary" variant="secondary">Show more</button></div></section> 10<section id="tutorials" class="gql-section gql-container lg:pb-24"><div class="mx-auto flex max-w-[960px] flex-col items-center"><span class="typography-menu flex items-center gap-1 text-pri-base dark:text-pri-light"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>Tutorials</span><h2 class="typography-h2 mt-6">Training Courses</h2><p class="typography-body-md mt-6">Get started or level up your GraphQL skills with these trusted tutorials.</p><ul class="mt-4 flex flex-col gap-4 md:gap-8 lg:mt-8 lg:gap-12"><li><a class="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] flex-col border border-neu-200 bg-neu-50 [grid-template-areas:'title_icon''desc_arrow'] hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-50/50 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_title_.''icon_desc_arrow'
10] lg:[grid-template-columns:142px_1fr_64px] lg:[grid-template-rows:1fr_auto]" href="https://www.graphql-js.org/docs/" target="_blank" rel="noreferrer"><p class="typography-h3 px-4 py-[18px] [grid-area:title] lg:px-4 lg:pb-2 lg:pt-6">GraphQL-JS tutorial</p><p class="typography-body-md px-4 pb-4 [grid-area:desc] lg:pb-6 lg:pt-2">Step-by-step guide to building schemas and executing queries with GraphQL.js.</p><span class="flex items-center justify-center self-stretch border-inherit p-4 text-neu-600 [grid-area:icon] dark:text-neu-600 max-lg:border-l lg:border-r lg:p-10 [&>svg]:size-8 lg:[&>svg]:size-16"><svg viewBox="0 0 100 100" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"></path><circle cx="50" cy="9.3209" r="8.82"></circle><circle cx="85.2292" cy="29.6605" r="8.82"></circle><circle cx="85.2292" cy="70.3396" r="8.82"></circle><circle cx="50" cy="90.6791" r="8.82"></circle><circle cx="14.7659" cy="70.3396" r="8.82"></circle><circle cx="14.7659" cy="29.6605" r="8.82"></circle></svg></span><span class="flex place-content-center place-items-center place-self-stretch border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex lg:place-self-end"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li><a class="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] flex-col border border-neu-200 bg-neu-50 [grid-template-areas:'title_icon''desc_arrow'] hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-50/50 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_title_.''icon_desc_arrow'
10] lg:[grid-template-columns:142px_1fr_64px] lg:[grid-template-rows:1fr_auto]" href="https://www.apollographql.com/tutorials/" target="_blank" rel="noreferrer"><p class="typography-h3 px-4 py-[18px] [grid-area:title] lg:px-4 lg:pb-2 lg:pt-6">Apollo Odyssey</p><p class="typography-body-md px-4 pb-4 [grid-area:desc] lg:pb-6 lg:pt-2">Interactive courses for building GraphQL applications with Apollo's toolset.</p><span class="flex items-center justify-center self-stretch border-inherit p-4 text-neu-600 [grid-area:icon] dark:text-neu-600 max-lg:border-l lg:border-r lg:p-10 [&>svg]:size-8 lg:[&>svg]:size-16"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 117 117"><path d="m83.727 74.571-2.669-7.583-3.514-9.986-2.542-7.226-3.328-9.457-3.866-10.985h-18.75l-2.994 8.506-2.668 7.583-13.253 37.662H42.51l3.88-10.993h18.753l-3.327-9.457H49.703l2.542-7.227 5.31-15.09.878-2.497.877 2.498 15.042 42.758.004.008h12.367z"></path><path d="M109.409 29.796a2.387 2.387 0 0 0-3.25-.906 2.384 2.384 0 0 0-.905 3.25 53.685 53.685 0 0 1-49.852 79.916A53.688 53.688 0 0 1 46.162 6.198a53.7 53.7 0 0 1 37.196 4.694 7.3 7.3 0 0 0 .686 4.972 7.3 7.3 0 0 0 3.735 3.354 7.3 7.3 0 0 0 8.943-2.978 7.3 7.3 0 0 0 .98-4.923 7.3 7.3 0 0 0-7.123-6.174 7.3 7.3 0 0 0-4.734 1.668 58.459 58.459 0 1 0 23.565 22.985"></path></svg></span><span class="flex place-content-center place-items-center place-self-stretch border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex lg:place-self-end"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li><a class="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] flex-col border border-neu-200 bg-neu-50 [grid-template-areas:'title_icon''desc_arrow'] hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-50/50 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_title_.''icon_desc_arrow'
10] lg:[grid-template-columns:142px_1fr_64px] lg:[grid-template-rows:1fr_auto]" href="https://the-guild.dev/graphql/yoga-server/tutorial/basic" target="_blank" rel="noreferrer"><p class="typography-h3 px-4 py-[18px] [grid-area:title] lg:px-4 lg:pb-2 lg:pt-6">Yoga GraphQL Server Tutorial</p><p class="typography-body-md px-4 pb-4 [grid-area:desc] lg:pb-6 lg:pt-2">Open source tutorial for creating modern GraphQL Servers in Node, CF Workers, Deno and others.</p><span class="flex items-center justify-center self-stretch border-inherit p-4 text-neu-600 [grid-area:icon] dark:text-neu-600 max-lg:border-l lg:border-r lg:p-10 [&>svg]:size-8 lg:[&>svg]:size-16"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M21.3619 6.38176H16.2964L19.3384 3.33972L15.9999 0L12.6602 3.33972L15.7022 6.38176H10.6367C9.98473 6.38176 9.35861 6.64131 8.89732 7.1026L0 15.9999L3.33972 19.3396L14.2606 8.41881C15.2213 7.4581 16.7786 7.4581 17.7393 8.41881L28.6601 19.3396L31.9998 15.9999L23.1013 7.10137C22.64 6.64008 22.0139 6.38053 21.3619 6.38053V6.38176Z"></path><path d="M16 25.3216L12.6607 28.6608L16 32L19.3392 28.6608L16 25.3216Z"></path><path d="M10.6378 19.042C9.98584 19.042 9.35972 19.3015 8.89843 19.7628L6.33121 22.33L9.67094 25.6698L14.2617 21.079C15.2224 20.1183 16.7797 20.1183 17.7404 21.079L22.3311 25.6698L25.6709 22.33L23.1036 19.7628C22.6423 19.3015 22.0162 19.042 21.3643 19.042H10.6378Z"></path></svg></span><span class="flex place-content-center place-items-center place-self-stretch border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex lg:place-self-end"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li><li><a class="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] flex-col border border-neu-200 bg-neu-50 [grid-template-areas:'title_icon''desc_arrow'] hover:ring hover:ring-neu-100 dark:border-neu-100 dark:bg-neu-50/50 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_title_.''icon_desc_arrow'
10] lg:[grid-template-columns:142px_1fr_64px] lg:[grid-template-rows:1fr_auto]" href="https://hasura.io/learn/" target="_blank" rel="noreferrer"><p class="typography-h3 px-4 py-[18px] [grid-area:title] lg:px-4 lg:pb-2 lg:pt-6">GraphQL Tutorials</p><p class="typography-body-md px-4 pb-4 [grid-area:desc] lg:pb-6 lg:pt-2">Real World Fullstack GraphQL tutorials for developers by Hasura.</p><span class="flex items-center justify-center self-stretch border-inherit p-4 text-neu-600 [grid-area:icon] dark:text-neu-600 max-lg:border-l lg:border-r lg:p-10 [&>svg]:size-8 lg:[&>svg]:size-16"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="currentColor"><path d="M26.9074 0.23705C27.0924 -0.0477225 27.5073 -0.0844866 27.7301 0.173458C29.4047 2.10864 29.9427 7.29894 29.1215 10.007L29.0816 10.1341C28.7899 11.0215 28.7076 11.9592 28.8757 12.8702L28.9439 13.2408L29.0095 13.624C29.1263 14.3334 29.2185 15.0691 29.2185 15.6267C29.2185 23.4306 22.7405 29.7604 14.7466 29.7604C6.75605 29.7604 0.274442 23.4338 0.274442 15.6267C0.274442 15.0186 0.384138 14.1979 0.515892 13.4312L0.58326 13.0536C0.594521 12.9916 0.605915 12.9305 0.617441 12.8702C0.778805 12.0129 0.718393 11.1317 0.467801 10.2911L0.418517 10.1341C-0.459449 7.46805 0.0687614 2.14242 1.76985 0.17326C1.98069 -0.0677937 2.36423 -0.0505046 2.56157 0.194126L2.59257 0.23705L4.68792 3.44884C5.20918 4.08874 6.14199 4.23937 6.8415 3.79065C9.11551 2.33698 11.8317 1.49279 14.75 1.49279C17.6682 1.49279 20.3844 2.33678 22.658 3.79025C23.3377 4.22427 24.2319 4.10086 24.7587 3.51144L24.812 3.44864L26.9074 0.23705ZM14.7498 4.72167C13.0352 4.72167 11.4096 5.09667 9.9589 5.77333C6.34092 7.44778 3.78253 10.9612 3.55956 15.074C3.54872 15.2693 3.54302 15.4648 3.54247 15.6603C3.54247 21.6956 8.56664 26.6055 14.7464 26.6055C20.9261 26.6055 25.9535 21.6956 25.9571 15.6637C25.9571 15.4693 25.9503 15.2716 25.94 15.0774C25.717 10.9678 23.1586 7.45116 19.5406 5.77651C18.0866 5.09687 16.4644 4.72167 14.7498 4.72167ZM14.0055 10.8271C14.1045 10.8271 14.1983 10.8708 14.2593 10.9467L14.2832 10.9813L16.7392 15.0236L19.6026 19.8733C19.6314 19.9201 19.6466 19.9741 19.6466 20.0291C19.6466 20.0841 19.6314 20.138 19.6026 20.1849C19.5782 20.2271 19.5443 20.263 19.5036 20.2898C19.4629 20.3167 19.4165 20.3337 19.3681 20.3395L19.3248 20.3422H16.9961C16.897 20.3422 16.8034 20.2961 16.7424 20.2194L16.7183 20.1849L15.1887 17.5957L13.4845 20.1948C13.4588 20.2339 13.4249 20.2668 13.3851 20.2912C13.3453 20.3157 13.3006 20.3311 13.2542 20.3363L13.2134 20.3389H10.8506C10.7306 20.3389 10.6209 20.2753 10.566 20.1747C10.5421 20.1314 10.529 20.0831 10.5276 20.0337C10.5262 19.9843 10.5367 19.9353 10.5581 19.8907L10.5797 19.8532L13.7315 15.1575L11.3822 11.3026C11.3531 11.2554 11.3374 11.2011 11.3368 11.1456C11.3362 11.0901 11.3507 11.0355 11.3788 10.9877C11.4036 10.9448 11.438 10.9082 11.4793 10.8808C11.5206 10.8534 11.5677 10.8359 11.6169 10.8297L11.66 10.8269L14.0055 10.8271Z"></path></svg></span><span class="flex place-content-center place-items-center place-self-stretch border-l border-t border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex lg:place-self-end"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-8 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></span></a></li></ul></div></section> 11<section id="faq" class="gql-section gql-container grid-rows-[auto_auto_1fr] *:[grid-column:1] lg:grid lg:grid-cols-[1fr_auto]"><span class="typography-menu flex items-center gap-1 text-pri-base dark:text-pri-light"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="size-4 translate-x-[0.5px]"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.66666 13.3332H5.33333V2.6665H6.66666V3.99984H7.99999V5.99984H9.33333V7.33317H10.6667V8.6665H9.33333V9.99984H7.99999V11.9998H6.66666V13.3332Z"></path></svg>FAQ</span><h2 class="typography-h2 mt-6">Common questions</h2><p class="typography-body-md mt-6">Find answers to the most common questions about GraphQL â from getting started to advanced use cases. This also covers frontend concerns and info about the official specification.</p><ul class="row-span-full mt-6 ![grid-column:2] *:border-b *:border-neu-200 dark:*:border-neu-100 lg:w-[380px] xl:w-[496px]"><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#getting-started">Getting started<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#general">General<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#best-practices">Best practices<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#specification">Specification<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#frontend">Frontend<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li><li class="hover:!border-current"><a class="typography-body-lg -mx-4 flex items-center justify-between p-4 text-neu-800 hover:text-neu-900 dark:text-neu-700" href="/faq/#foundation">Foundation<svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-6 shrink-0 -rotate-90"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></li></ul></section> 12<section class="gql-container gql-section"><div class="mx-auto grid max-w-[1504px] gap-0 bg-pri-dark text-white dark:bg-pri-darker lg:grid-cols-[752px_1fr]"><div class="flex flex-col justify-between gap-6 border-pri-light p-6 xs:gap-8 xs:p-8 lg:border-r lg:p-16"><h2 class="typography-h2 text-balance">Looking for more?</h2><p class="typography-body-lg max-w-[624px]">Learning is just the beginning. Discover tools and other resources â or connect with the GraphQL community around the world.</p></div><div class="flex flex-col"><a class="flex items-center justify-between border-y border-pri-light px-6 py-10 hover:bg-white/10 xs:px-8 xs:py-16 lg:border-t-0" href="/resources/"><span class="typography-body-lg">Resources</span><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-10 shrink-0 -rotate-90 text-pri-light"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a><a class="flex items-center justify-between px-6 py-10 hover:bg-white/10 xs:px-8 xs:py-16" href="/community/"><span class="typography-body-lg">Community</span><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-10 shrink-0 -rotate-90 text-pri-light"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></a></div></div></section></div></div><footer class="relative isolate !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0"><div role="presentation" class="pointer-events-none absolute inset-0 z-[1] [--start-1:rgba(255,204,239,.05)] [--end-1:hsl(var(--color-pri-base)/.8)] dark:[--start-1:hsl(var(--color-pri-darker))] dark:[--end-1:hsl(var(--color-pri-base)/.9)] [--start-2:transparent] [--end-2:hsl(var(--color-pri-base)/.6)] dark:[--start-2:rgba(255,204,239,.1)] dark:[--end-2:hsl(var(--color-pri-base)/.8)] mix-blend-darken dark:mix-blend-lighten max-sm:![mask-size:300vw_200px] max-sm:![mask-position:center_calc(100%-100px)] sm:max-lg:![mask-origin:bottom] sm:max-lg:![mask-size:250%_300px] sm:max-lg:![mask-position:center_calc(100%-30px)] max-lg:rotate-180 " style="mask-image:url(/_next/static/media/blur-bean.d5aa6d13.webp);-webkit-mask-image:url(/_next/static/media/blur-bean.d5aa6d13.webp);mask-position:center 260px;-webkit-mask-position:center 260px;mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-origin:top"><div class="absolute inset-0 bg-[linear-gradient(180deg,var(--start-1)_0%,var(--end-1)_200%)]" style="--stripe-width:12px;--angle:90deg;mask-image:repeating-linear-gradient(var(--angle), transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2));-webkit-mask-image:repeating-linear-gradient(var(--angle), transparent, transparent var(--stripe-width), black var(--stripe-width), black calc(var(--stripe-width) * 2))"></div><div class="absolute inset-0 bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_200%)]" style="--stripe-width:12px;--angle:90deg;mask-image:repeating-linear-gradient(var(--angle), black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2));-webkit-mask-image:repeating-linear-gradient(var(--angle), black, black var(--stripe-width), transparent var(--stripe-width), transparent calc(var(--stripe-width) * 2))"></div></div><div class="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 xl:border-t 3xl:border-x"><div class="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:p-6 2xl:px-10"><a class="nextra-logo flex items-center" href="/"><svg xmlns="http://www.w3.org/2000/svg" style="fill:color(display-p3 .8824 0 .5961)" viewBox="0 0 367 100" class="h-6" title="GraphQL"><path fill-rule="evenodd" d="m50 6.468 37.7 21.766v43.532L50 93.532 12.3 71.766V28.234zM16.53 30.676v31.976l27.692-47.964zM50 13.14 18.078 68.43h63.844zm27.692 59.52H22.308L50 88.648zm5.778-10.008L55.778 14.688 83.47 30.676z" clip-rule="evenodd"></path><circle cx="14.41" cy="29.45" r="8.91"></circle><circle cx="14.41" cy="70.545" r="8.91"></circle><circle cx="50" cy="91.09" r="8.91"></circle><circle cx="85.585" cy="70.545" r="8.91"></circle><circle cx="85.585" cy="29.455" r="8.91"></circle><circle cx="50" cy="8.91" r="8.91"></circle><path d="M138.875 71.625q-7.812 0-12.125-4.5t-4.562-12.062q-.063-1.876-.063-5.938t.063-5.937q.25-7.563 4.562-12.063t12.125-4.5q5.313 0 8.938 2 3.624 2 5.375 4.75 1.812 2.688 1.937 4.813v.124q0 .501-.375.813-.375.313-.938.313h-1.374q-.562 0-.813-.25t-.5-1q-1.062-3.313-4.125-5.563-3-2.25-8.125-2.25-5.812 0-9.187 3.188-3.313 3.187-3.563 9.937-.062 1.875-.062 5.625t.062 5.625q.25 6.75 3.563 9.938 3.375 3.186 9.187 3.187 5.813 0 9.375-3.312 3.562-3.314 3.562-9.813v-3.187h-10.874q-.625 0-1-.376a1.58 1.58 0 0 1-.375-1.062v-.875q0-.625.375-1 .375-.437 1-.437h13.374q.688 0 1.063.374.375.376.375 1.063v5.5q0 4.999-2 8.813-2 3.811-5.812 5.937-3.813 2.125-9.063 2.125M165.941 71q-.625 0-1-.375t-.375-1V39.938q0-.
12625.375-1 .375-.438 1-.438h1q.625 0 1 .438.438.375.438 1v2.874q2.25-4.312 8.5-4.312h2.312q.625 0 1 .375t.375 1v.875q0 .625-.375 1t-1 .375h-2.687q-3.75 0-5.938 2.188-2.187 2.187-2.187 5.937v19.375q0 .625-.438 1-.375.375-1 .375zM194.557 71.625q-3 0-5.563-1.25T184.869 67q-1.5-2.126-1.5-4.687 0-4.125 3.313-6.75 3.374-2.625 9.062-3.376l9.875-1.374v-2.188q0-3.438-2.125-5.25-2.063-1.875-6.375-1.875-3.188 0-5.25 1.25-2 1.25-2.562 3-.25.75-.625 1.063-.313.25-.875.25h-.875q-.563 0-1-.376a1.5 1.5 0 0 1-.375-1q0-1.374 1.25-3.187 1.25-1.875 3.875-3.25t6.437-1.375q6.687 0 9.5 3.188 2.813 3.187 2.813 7.75v20.812q0 .625-.375 1-.376.375-1 .375h-1.063q-.625 0-1-.375t-.375-1v-2.937q-1.375 2.061-4.062 3.5-2.626 1.437-7 1.437m.625-3.625q4.561 0 7.5-3 2.937-3 2.937-8.625V54.25l-8.062 1.125q-5.125.687-7.75 2.375T187.182 62q0 2.875 2.375 4.438Q191.994 68 195.182 68M220.752 82.875q-.624 0-1-.375-.375-.375-.375-1V39.875q0-.625.375-1 .376-.375 1-.375h1.063q.625 0 1 .375t.375 1v2.938q3.626-4.938 10.5-4.938 6.75 0 9.937 4.313 3.25 4.25 3.438 10.5.063.624.062 2.062 0 1.437-.062 2.063-.187 6.25-3.438 10.562-3.187 4.25-9.937 4.25-6.813 0-10.5-4.937V81.5q0 .625-.375 1t-1 .375zM233.315 68q5.062 0 7.375-3.187 2.375-3.25 2.562-8.313.063-.625.063-1.75 0-5.813-2.25-9.5-2.25-3.75-7.75-3.75-4.938 0-7.438 3.313-2.5 3.25-2.687 7.687l-.063 2.438.063 2.437a12.8 12.8 0 0 0 1.187 5.125q1.125 2.375 3.375 3.938Q230.002 68 233.315 68M257.068 71q-.625 0-1-.375t-.375-1V28q0-.625.375-1t1-.375h1.063q.625 0 1 .375t.375 1v14.813q1.875-2.439 4.25-3.688 2.437-1.25 6.25-1.25 6.125 0 9.437 3.938 3.313 3.874 3.313 10.062v17.75q0 .625-.375 1t-1 .375h-1.063q-.625 0-1-.375t-.375-1V52.188q0-5.063-2.5-7.876-2.437-2.812-7.062-2.812-4.5 0-7.188 2.875-2.687 2.813-2.687 7.813v17.437q0 .625-.375 1t-1 .375zM321.682 75.063q-.938 0-2-1.438l-2.75-3.812q-3.75 1.812-8.75 1.812-16.062 0-16.5-17.25-.062-1.875-.062-5.25t.062-5.25q.25-8.5 4.625-12.875t11.875-4.375T320.057 31t4.625 12.875q.125 3.75.125 5.25t-.125 5.25q-.312 8.937-4.562 13.125l4 5.625q.187.376.187.688a1.2 1.2 0 0 1-.375.874 1.2 1.2 0 0 1-.875.376zm-13.5-7.188q5.625 0 8.938-3.375 3.375-3.437 3.625-10.437.125-3.75.125-4.938t-.125-4.937q-.25-7-3.625-10.376-3.375-3.437-8.938-3.437-5.562 0-8.937 3.438-3.375 3.375-3.625 10.374-.063 1.875-.063 4.938t.063 4.938q.25 6.999 3.562 10.437 3.375 3.375 9 3.375M336.126 71q-.625 0-1-.375t-.375-1v-41q0-.625.375-1t1-.375h1.188q.625 0 1 .375t.375 1V67.25h21.562q.688 0 1.063.375t.375 1.063v.937q0 .625-.438 1-.375.375-1 .375z"></path></svg></a><div class="typography-menu flex items-center *:rounded-none dark:*:text-neu-900 md:hidden"><button type="button" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Change theme" title="Change theme" class="gql-focus-visible relative cursor-pointer text-neu-800 transition-colors before:absolute before:-inset-2 hover:bg-neu-100 hover:text-neu-900 focus-visible:outline-offset-4 dark:text-neu-700 dark:hover:bg-neu-50/50"><div class="flex items-center gap-2 border border-transparent p-[5px] [[aria-expanded=true]>&]:border-neu-300 [[aria-expanded=true]>&]:bg-neu-0 [[aria-expanded=true]>&]:dark:border-neu-100"><svg fill="currentColor" viewBox="0 0 14 14" height="16"><path fill-rule="evenodd" d="M7.583 0H6.417v2.333h1.166zM0 6.417v1.166h2.333V6.417zm11.667 0H14v1.166h-2.333zM7.583 14H6.417v-2.333h1.166zM4.667 3.5h4.666v1.167H4.667zm0 5.833H3.5V4.667h1.167zm0 0V10.5h4.666V9.333H10.5V4.667H9.333v4.666zm7-8.166h1.166v1.166h-1.166zm0 1.166V3.5H10.5V2.333zm1.166 10.5h-1.166v-1.166h1.166zm-1.166-1.166H10.5V10.5h1.167zm-9.334-10.5H1.167v1.166h1.166V3.5H3.5V2.333H2.333zM1.167 12.833h1.166v-1.166H3.5V10.5H2.333v1.167H1.167z" clip-rule="evenodd"></path></svg><span class="text-sm capitalize leading-none text-neu-800">light</span></div></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="light"/></div></div><div class="grid grid-cols-2 gap-px bg-neu-400 py-px dark:bg-neu-100 lg:grid-cols-5"><div class="typography-menu relative bg-neu-100 py-4 dark:bg-neu-0 lg:py-6 3xl:py-10"><h3 class="font-bold lg:mb-4 3xl:mb-10"><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/learn/">Learn</a></h3><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/learn/">Introduction</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/learn/best-practices/">Best Practices</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/faq/"><span><span class="max-md:hidden">Frequently Asked Questions</span><span class="md:hidden">FAQ</span></span></a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/community/resources/training-courses/">Training Courses</a></div><div class="typography-menu relative bg-neu-100 py-4 dark:bg-neu-0 lg:py-6 3xl:py-10"><h3 class="font-bold lg:mb-4 3xl:mb-10"><span class="block p-4 md:px-6 2xl:px-10">Code</span></h3><a rel="noopener noreferrer" target="_blank" href="https://github.com/graphql" class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10">GitHub</a><a rel="noopener noreferrer" target="_blank" href="https://spec.graphql.org" class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10">Specification</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/code/">Libraries & Tools</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/code/?tags=services">Services & Vendors</a></div><div class="typography-menu relative bg-neu-100 py-4 dark:bg-neu-0 lg:py-6 3xl:py-10"><h3 class="font-bold lg:mb-4 3xl:mb-10"><span class="block p-4 md:px-6 2xl:px-10">Community</span></h3><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/community/resources/official-channels/">Resources</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/community/events/">Events</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/community/contribute/essential-links/"><span>Contribute<span class="max-md:hidden"> to GraphQL</span></span></a><a rel="noopener noreferrer" target="_blank" href="https://landscape.graphql.org" class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10">Landscape</a><a rel="noopener noreferrer" target="_blank" href="https://store.graphql.org/" class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10">Shop</a></div><div class="typography-menu relative bg-neu-100 py-4 dark:bg-neu-0 lg:py-6 3xl:py-10"><h3 class="font-bold lg:mb-4 3xl:mb-10"><span class="block p-4 md:px-6 2xl:px-10">& More</span></h3><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/blog/">Blog</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/foundation/">GraphQL Foundation</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/foundation/community-grant/">Community Grant</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/brand/">Brand Guidelines</a><a class="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10" href="/codeofconduct/">Code of Conduct</a></div><div class="flex flex-col max-lg:contents"><a class="dark gql-focus-visible group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark z-[2] col-span-full flex-1 max-lg:row-start-1" href="/conf/2026/"><div class="flex flex-1 flex-col gap-4 border-b border-pri-lighter p-4 dark:border-pri-light/50"><h2 class="font-mono text-2xl uppercase leading-none md:text-3xl"><span class="max-xs:hidden">Join</span> GraphQLConf 2026</h2></div><div class="typography-body-sm flex font-sans"><div class="flex-1 justify-center border-r border-pri-lighter p-4 dark:border-pri-light/50">May <span class="whitespace-nowrap">19â20</span><br/>Fremont, California</div><div class="flex w-[min(calc(25%-.5px),73.5px)] items-center justify-center"><svg width="40" height="40" fill="currentColor" viewBox="0 0 40 40" class="size-10 -rotate-90 text-pri-lighter transition group-hover:translate-x-0.5 group-hover:text-neu-900"><path fill-rule="evenodd" d="M18.333 6.667h3.334v20H25V30h-3.333v3.333h-3.334V30H15v-3.334h3.333zm-6.666 16.666v3.334H15v-3.334zm0 0V20H8.333v3.333zm16.666 0v3.334H25v-3.334zm0 0V20h3.334v3.333z" clip-rule="evenodd"></path></svg></div></div></a><div class="flex items-center gap-1 *:p-2 *:outline-none *:transition-colors hover:*:text-primary focus:*:text-primary focus:*:ring focus:*:ring-primary [&_svg]:h-5 gql-all-anchors-focusable col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:!-outline-offset-[6px] [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"><a href="https://github.com/graphql" aria-label="GitHub" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 30 30"><path fill-rule="evenodd" d="M15.1.413a14.81 14.81 0 0 0-4.684 28.862c.742.138 1.012-.32
121.012-.712 0-.35-.013-1.283-.02-2.518-4.12.893-4.99-1.987-4.99-1.987-.675-1.71-1.643-2.165-1.643-2.165-1.345-.918.1-.9.1-.9 1.488.105 2.27 1.525 2.27 1.525 1.32 2.265 3.466 1.61 4.31 1.23.133-.955.515-1.608.94-1.978-3.29-.375-6.747-1.645-6.747-7.32 0-1.615.577-2.937 1.525-3.975-.15-.372-.66-1.88.145-3.917 0 0 1.242-.4 4.075 1.517a14.3 14.3 0 0 1 3.705-.5 14.2 14.2 0 0 1 3.707.5c2.826-1.915 4.068-1.517 4.068-1.517.807 2.037.3 3.545.15 3.92.95 1.035 1.52 2.357 1.52 3.975 0 5.687-3.462 6.94-6.76 7.305.53.457 1.005 1.36 1.005 2.742 0 1.98-.02 3.575-.02 4.063 0 .395.267.857 1.02.712A14.816 14.816 0 0 0 15.101.413" clip-rule="evenodd"></path></svg></a><a href="https://discord.graphql.org" aria-label="Discord" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="#5865f2" viewBox="0 0 20 20" class="fill-current"><path d="M16.956 3.693a16.5 16.5 0 0 0-4.134-1.274 10 10 0 0 0-.526 1.072 15.8 15.8 0 0 0-4.58 0 13 13 0 0 0-.525-1.072c-1.429.239-2.82.667-4.135 1.274C.44 7.553-.269 11.323.085 15.043a16.8 16.8 0 0 0 5.065 2.536q.614-.828 1.08-1.747a10.6 10.6 0 0 1-1.708-.82 6 6 0 0 0 .415-.323c3.295 1.507 6.864 1.507 10.119 0 .141.111.272.223.414.324-.546.323-1.112.596-1.709.818a12.3 12.3 0 0 0 1.083 1.75 16.8 16.8 0 0 0 5.064-2.538c.434-4.305-.689-8.045-2.952-11.35m-10.27 9.056c-.99 0-1.8-.9-1.8-2.002s.79-2.001 1.8-2.001c1 0 1.82.9 1.798 2.002 0 1.101-.798 2-1.798 2m6.641 0c-.99 0-1.8-.9-1.8-2.002s.79-2.001 1.8-2.001c1 0 1.82.9 1.8 2.002 0 1.101-.79 2-1.8 2"></path></svg></a><a href="https://twitter.com/graphql" aria-label="Twitter" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="m11.396 9.473 5.461-6.216h-1.293L10.82 8.654 7.034 3.257H2.666l5.726 8.161-5.726 6.518H3.96l5.006-5.7 4 5.7h4.367M4.427 4.212h1.987l9.149 12.816h-1.988"></path></svg></a><a href="https://linkedin.com/company/graphql-foundation" aria-label="LinkedIn" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" viewBox="0 0 24 24"><path stroke="none" d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6M2 9h4v12H2z"></path><circle cx="4" cy="4" r="2" stroke="none"></circle></svg></a></div></div></div><div class="relative flex items-center justify-between gap-4 p-4 max-md:justify-center md:px-6 2xl:px-10"><div class="typography-menu flex items-center *:rounded-none dark:*:text-neu-900 max-md:hidden"><button type="button" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Change theme" title="Change theme" class="gql-focus-visible relative cursor-pointer text-neu-800 transition-colors before:absolute before:-inset-2 hover:bg-neu-100 hover:text-neu-900 focus-visible:outline-offset-4 dark:text-neu-700 dark:hover:bg-neu-50/50"><div class="flex items-center gap-2 border border-transparent p-[5px] [[aria-expanded=true]>&]:border-neu-300 [[aria-expanded=true]>&]:bg-neu-0 [[aria-expanded=true]>&]:dark:border-neu-100"><svg fill="currentColor" viewBox="0 0 14 14" height="16"><path fill-rule="evenodd" d="M7.583 0H6.417v2.333h1.166zM0 6.417v1.166h2.333V6.417zm11.667 0H14v1.166h-2.333zM7.583 14H6.417v-2.333h1.166zM4.667 3.5h4.666v1.167H4.667zm0 5.833H3.5V4.667h1.167zm0 0V10.5h4.666V9.333H10.5V4.667H9.333v4.666zm7-8.166h1.166v1.166h-1.166zm0 1.166V3.5H10.5V2.333zm1.166 10.5h-1.166v-1.166h1.166zm-1.166-1.166H10.5V10.5h1.167zm-9.334-10.5H1.167v1.166h1.166V3.5H3.5V2.333H2.333zM1.167 12.833h1.166v-1.166H3.5V10.5H2.333v1.167H1.167z" clip-rule="evenodd"></path></svg><span class="text-sm capitalize leading-none text-neu-800">light</span></div></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="light"/></div><p class="typography-body-xs flex flex-col text-pretty max-md:gap-5">Copyright © <!-- -->2026<!-- --> The GraphQL Foundation. All rights reserved.</p></div></div></footer></div></div>
12<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/learn","query":{},"buildId":"0o4RDAs2zB6pJACa-9vyn","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
12<script>if (window.navigator.platform.includes("Mac")) document.documentElement.classList.add("mac")</script>
12</body></html>
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.