CINXE.COM

<!DOCTYPE html><html><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:173deg;--nextra-primary-saturation:40%;--nextra-primary-lightness:45%;--nextra-navbar-height:64px;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:250,250,250;}.dark{--nextra-primary-hue:67.1deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:55%;--nextra-bg:17,17,17;}</style><link rel="icon" href="/graphql/codegen/_next/static/media/favicon.352251c6.svg"/><link rel="preload" href="/graphql/codegen/_next/static/media/codegen-badge.de470c71.svg" as="image" fetchPriority="high"/><meta name="next-head-count" content="6"/><link rel="preload" href="/graphql/codegen/_next/static/media/dc03e58dafb0f94e-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/graphql/codegen/_next/static/media/eb0b6447daad5399-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/graphql/codegen/_next/static/css/15b6f1524a313f32.css" as="style"/><link rel="stylesheet" href="/graphql/codegen/_next/static/css/15b6f1524a313f32.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/graphql/codegen/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/graphql/codegen/_next/static/chunks/webpack-ca9378987265a0e4.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/framework-85f54b842cdc614d.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/main-bffd5d0fc6e49ebf.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/pages/_app-4cb93ca212b6f8c4.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/1227-110fbb2cc2440b9b.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/3363-548175d5722870b5.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/pages/index-032d91659e72f973.js" defer=""></script><script src="/graphql/codegen/_next/static/u6ASScd3CT8d7V6lLAcYP/_buildManifest.js" defer=""></script><script src="/graphql/codegen/_next/static/u6ASScd3CT8d7V6lLAcYP/_ssgManifest.js" defer=""></script><style id="__jsx-307672915">:root{--font-sans:'__neueMontreal_44a316', '__neueMontreal_Fallback_44a316'}</style><style id="__jsx-a80b5046d5220ffd">html{scroll-behavior:smooth}body{background:#fff;--nextra-primary-hue:191deg;--nextra-primary-saturation:40%;--nextra-bg:255, 255, 255}.nextra-sidebar-footer{display:none}</style><meta name="msapplication-config" content="none" /><link rel="manifest" href="/site.webmanifest" /><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /><link rel="shorcut icon" type="image/x-icon" href="/favicon.ico"><script> window.$crisp = []; window.CRISP_WEBSITE_ID = 'af9adec5-ddfa-4db9-a4a3-25769daf2fc2'; (function () { d = document; s = d.createElement('script'); s.src = 'https://client.crisp.chat/l.js'; s.async = 1; d.getElementsByTagName('head')[0].appendChild(s); })(); window.$crisp.push([ 'set', 'session:segments', [["codegen"]], ]); </script><script>!function(t){if(window.ko)return;window.ko=[],["identify","track","removeListeners","open","on","off","qualify","ready"].forEach(function(t){ko[t]=function(){var n=[].slice.call(arguments);return n.unshift(t),ko.push(n),ko}});var n=document.createElement("script");n.async=!0,n.setAttribute("src","https://cdn.getkoala.com/v1/pk_fab338b8afd93b93f49fafebf9651287060e/sdk.js"),(document.body || document.head).appendChild(n)}();</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-VN2KZS6FK4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-VN2KZS6FK4'); </script></head><body><div id="__next"><script>((e,o,s,u,d,m,l,h)=>{let i=document.documentElement,T=["light","dark"];function p(a){(Array.isArray(e)?e:[e]).forEach(g=>{let k=g==="class",S=k&&m?d.map(f=>m[f]||f):d;k?(i.classList.remove(...S),i.classList.add(a)):i.setAttribute(g,a)}),R(a)}function R(a){h&&T.includes(a)&&(i.style.colorScheme=a)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let a=localStorage.getItem(o)||s,g=l&&a==="system"?c():a;p(g)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script><div dir="ltr"><script>document.documentElement.setAttribute('dir','ltr')</script><div class="sticky top-0 z-20 border-b border-beige-400/[var(--border-opacity)] bg-[rgb(var(--nextra-bg))] px-6 py-4 text-green-1000 transition-[border-color] duration-500 md:mb-[7px] md:mt-2 dark:border-neutral-700/[var(--border-opacity)] dark:text-neutral-200 [&.light]:border-beige-400/[var(--border-opacity)] [&.light]:bg-white [&.light]:text-green-1000 light" style="--border-opacity:0"><div class="flex items-center justify-between md:hidden"><a class="hive-focus -m-2 flex items-center gap-3 rounded-md p-2 outline-none transition focus-visible:ring" href="/graphql/codegen"><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor" class="size-8"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg><span class="text-2xl font-medium tracking-[-0.16px]">Codegen</span></a><button type="button" aria-label="Menu" class="md:_hidden hover nextra-hamburger -m-1 rounded-lg bg-transparent p-1 text-green-1000 focus-visible:outline-none focus-visible:ring active:bg-beige-200 dark:text-neutral-200 dark:active:bg-neutral-800"><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class="size-6 stroke-current [&_path]:[stroke-linecap:square]"><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></div><nav aria-label="Navigation Menu" data-orientation="horizontal" dir="ltr" id="h-navmenu-container" class="relative z-10 flex-1 items-center mx-auto hidden md:flex light max-w-[1392px]"><a class="hive-focus -m-2 flex items-center gap-3 rounded-md p-2 outline-none transition focus-visible:ring" href="/graphql/codegen"><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor" class="size-8"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg><span class="text-2xl font-medium tracking-[-0.16px]">Codegen</span></a><div style="position:relative"><ul data-orientation="horizontal" class="group flex flex-1 list-none items-center rounded-lg border-beige-200 px-1.5 lg:border lg:px-3 dark:border-neutral-700 ml-4 bg-white dark:bg-transparent [@media(min-width:1180px)]:ml-16" dir="ltr"><li><button id="radix-:R756:-trigger-radix-:Rkv56:" data-state="closed" aria-expanded="false" aria-controls="radix-:R756:-content-radix-:Rkv56:" class="hive-focus cursor-default rounded p-3 font-medium leading-normal text-green-800 aria-expanded:text-green-1000 dark:text-neutral-300 dark:aria-expanded:text-neutral-100" data-radix-collection-item="">Products</button></li><li><button id="radix-:R756:-trigger-radix-:R14v56:" data-state="closed" aria-expanded="false" aria-controls="radix-:R756:-content-radix-:R14v56:" class="hive-focus cursor-default rounded p-3 font-medium leading-normal text-green-800 aria-expanded:text-green-1000 dark:text-neutral-300 dark:aria-expanded:text-neutral-100" data-radix-collection-item="">Developer</button></li><li><button id="radix-:R756:-trigger-radix-:R24v56:" data-state="closed" aria-expanded="false" aria-controls="radix-:R756:-content-radix-:R24v56:" class="hive-focus cursor-default rounded p-3 font-medium leading-normal text-green-800 aria-expanded:text-green-1000 dark:text-neutral-300 dark:aria-expanded:text-neutral-100" data-radix-collection-item="">Company</button></li><li class="flex"><a data-radix-collection-item="" class="hive-focus [data-active="true"]:text-green-1000 rounded p-3 leading-normal text-green-800 transition-colors hover:bg-beige-100 hover:text-green-1000 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-100 [&:hover>svg]:opacity-100 font-medium outline-none transition focus-visible:ring" href="/graphql/codegen/plugins">Plugins</a></li></ul></div><div class="flex-1"></div><div class="_not-prose _relative _flex _items-center _text-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300 relative ml-4 basis-64 [&_:is(input,kbd)]:text-green-700 dark:[&_:is(input,kbd)]:text-neutral-300 [&_input]:h-12 [&_input]:w-full [&_input]:rounded-lg [&_input]:border [&_input]:border-green-200 [&_input]:bg-white [&_input]:pl-4 [&_input]:pr-8 [&_input]:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))] [&_input]:ring-offset-[rgb(var(--nextra-bg))] dark:[&_input]:border-neutral-800 [&_input]:dark:bg-inherit [&_kbd]:absolute [&_kbd]:right-4 [&_kbd]:top-1/2 [&_kbd]:my-0 [&_kbd]:-translate-y-1/2 [&_kbd]:border-none [&_kbd]:bg-green-200 dark:[&_kbd]:bg-neutral-700"><input spellcheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search documentation…" id="headlessui-combobox-input-:R1dqv56:" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div><a target="_blank" rel="noopener noreferrer" class="relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit dark:text-neutral-200 [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px] bg-transparent text-green-1000 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800 ml-4 max-lg:hidden outline-none transition focus-visible:ring" href="https://the-guild.dev/contact"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div>Contact <span class="hidden xl:contents">us</span></a><a class="relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 text-green-1000 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px] bg-primary hover:bg-green-800 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800 dark:bg-neutral-100 dark:text-neutral-800 dark:hover:bg-white dark:hover:text-neutral-900 ml-4 outline-none transition focus-visible:ring" href="https://app.graphql-hive.com/"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div>Sign in</a><div id="h-navmenu-viewport" class="absolute left-0 top-full flex" style="perspective:2000px"></div><style>@media (prefers-reduced-motion: reduce) { #h-navmenu-container * { animation-duration: 0ms !important; transition-duration: 0ms !important; } }</style></nav></div><div class="_mx-auto _flex"><div class="[transition:background-color_1.5s_ease] _bg-transparent"></div><aside class="nextra-sidebar-container _flex _flex-col md:_top-16 md:_shrink-0 motion-reduce:_transform-none motion-reduce:_transition-none [.resizing_&]:_transition-none _transform-gpu _transition-all _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-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300"><input spellcheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search documentation…" 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 _p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"></div><div class="nextra-sidebar-footer _sticky _bottom-0 _flex _items-center _gap-2 _py-4 _mx-3 _px-1" data-toggle-animation="off"><div class="_grow _flex _flex-col"><button title="Change theme" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-:Rrnjd6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="_flex _items-center _gap-2 _capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><button class="_transition max-md:_hidden _rounded-md _p-2 _text-gray-600 dark:_text-gray-400" title="Hide sidebar" type="button" data-headlessui-state=""><svg viewBox="0 0 16 16" fill="currentColor" height="12" class=""><path d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z"></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg></button></div></aside><div id="reach-skip-nav"></div><div class="_w-full _break-words"><div class="flex h-full flex-col light mx-auto max-w-[90rem] overflow-hidden text-green-1000"><div class="relative isolate flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 sm:py-12 md:gap-8 lg:py-24 mx-4 max-sm:mt-2 md:mx-6"><div class="pointer-events-none absolute inset-0 overflow-hidden -z-10"><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor" class="absolute left-[-180px] top-[calc(50%-180px)] size-[360px] fill-[url(#codegen-hero-gradient)] stroke-white/10 stroke-[0.1px] md:hidden lg:left-[-649px] lg:top-[-58px] lg:size-[1047px] xl:block"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor" class="absolute right-[-350px] top-2 size-[672px] fill-[url(#codegen-hero-gradient)] stroke-white/10 stroke-[0.1px] max-md:hidden"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg><svg><defs><linearGradient id="codegen-hero-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="11.66%" stop-color="rgba(255, 255, 255, 0.10)"></stop><stop offset="74.87%" stop-color="rgba(255, 255, 255, 0.30)"></stop></linearGradient></defs></svg></div><img alt="" fetchPriority="high" width="96" height="96" decoding="async" data-nimg="1" style="color:transparent" src="/graphql/codegen/_next/static/media/codegen-badge.de470c71.svg"/><h1 class="text-4xl leading-[1.2] md:text-6xl md:leading-[1.1875] tracking-[-0.64px] mx-auto max-w-3xl text-balance text-center" id="graphql-codegen"><a href="#graphql-codegen" class="cursor-text" tabindex="-1">GraphQL Codegen</a></h1><p class="jsx-a80b5046d5220ffd mx-auto w-[512px] max-w-[80%] text-balance text-center leading-6 text-green-800">Effortlessly generate comprehensive code from GraphQL schemas and operations, streamlining development across your tech stack.</p><ul class="mx-auto flex list-none gap-x-6 gap-y-2 text-sm font-medium max-md:flex-col [&>li]:flex [&>li]:items-center [&>li]:gap-2"><li class="jsx-a80b5046d5220ffd"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="text-green-800"><path d="M16.667 5 7.5 14.167 3.333 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"></path></svg>End-to-end type safety</li><li class="jsx-a80b5046d5220ffd"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="text-green-800"><path d="M16.667 5 7.5 14.167 3.333 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"></path></svg>Customizable</li><li class="jsx-a80b5046d5220ffd"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" class="text-green-800"><path d="M16.667 5 7.5 14.167 3.333 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"></path></svg>Rich plugins ecosystem</li></ul><div class="relative z-10 flex justify-center gap-2 px-0.5 max-sm:flex-col sm:gap-4"><a class="relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 text-green-1000 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit dark:text-neutral-200 [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px] bg-primary hover:bg-white focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-white/40 outline-none transition focus-visible:ring" href="/graphql/codegen/docs/getting-started"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div>Get started</a><a class="relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit dark:text-neutral-200 [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px] bg-green-800 text-white hover:bg-green-700 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800/40 outline-none transition focus-visible:ring" href="https://github.com/dotansimha/graphql-code-generator"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18" class="size-6"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg>GitHub</a></div></div><section class="relative isolate flex flex-wrap gap-6 px-4 py-6 lg:gap-12 lg:py-24 xl:px-[120px] max-lg:mx-4 max-lg:my-8"><div class="[@media(min-width:1490px)]:w-[293px]"><h2 class="text-[32px]/[1.25] tracking-[-0.16px] text-pretty" id="explore-hive-360°-graphql-ecosystem-to-reach-full-potential"><a href="#explore-hive-360°-graphql-ecosystem-to-reach-full-potential" class="cursor-text" tabindex="-1">Explore Hive 360° GraphQL Ecosystem to reach full potential</a></h2><a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 hover:text-blue-700 dark:hover:text-blue-500 inline-flex items-center gap-2 mt-4 lg:mt-6 outline-none transition focus-visible:ring" href="https://github.com/the-guild-org">Learn more<svg width="24" height="24" view-box="0 0 24 24" fill="currentColor"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></div><ul class="-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden"><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/hive"><p class="font-medium">Hive</p><svg width="52" height="52" viewBox="0 0 52 52" fill="none" class="mt-8"><g clip-path="url(#hive-icon)" fill="currentColor"><path d="M36.902.081H16.097L.5 15.678v20.806L16.097 52.08h20.805L52.5 36.484V15.678L36.902.081ZM49.18 28.918 29.334 48.762a4.01 4.01 0 0 1-5.67 0L3.82 28.918a4.01 4.01 0 0 1 0-5.671L23.663 3.402a4.01 4.01 0 0 1 5.671 0L49.18 23.247a4.01 4.01 0 0 1 0 5.67Z"></path><path d="m26.499 20.637-5.444 5.443 5.444 5.444 5.443-5.444-5.443-5.443Z"></path></g><defs><clipPath id="hive-icon"><path fill="#fff" d="M0 0h52v52H0z"></path></clipPath></defs></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="160" height="174" viewBox="0 0 160 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4223" maskUnits="userSpaceOnUse" x="0" y="-52" width="265" height="265" fill="black"><rect fill="white" y="-52" width="265" height="265"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M79.8868 -51H185.113L264 27.8868V133.113L185.113 212H79.8868L1 133.113V27.8868L79.8868 -51ZM146.836 195.215L247.204 94.8463C255.126 86.9252 255.126 74.085 247.204 66.1639L146.836 -34.2043C138.915 -42.1255 126.075 -42.1255 118.154 -34.2043L17.7957 66.1639C9.87451 74.085 9.87451 86.9252 17.7957 94.8463L118.154 195.215C126.075 203.136 138.915 203.136 146.836 195.215ZM104.963 80.4952L132.495 52.9631L160.027 80.4952L132.495 108.027L104.963 80.4952Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M79.8868 -51H185.113L264 27.8868V133.113L185.113 212H79.8868L1 133.113V27.8868L79.8868 -51ZM146.836 195.215L247.204 94.8463C255.126 86.9252 255.126 74.085 247.204 66.1639L146.836 -34.2043C138.915 -42.1255 126.075 -42.1255 118.154 -34.2043L17.7957 66.1639C9.87451 74.085 9.87451 86.9252 17.7957 94.8463L118.154 195.215C126.075 203.136 138.915 203.136 146.836 195.215ZM104.963 80.4952L132.495 52.9631L160.027 80.4952L132.495 108.027L104.963 80.4952Z" fill="url(#paint0_linear_642_4223)"></path><path d="M185.113 -51L185.467 -51.3536L185.32 -51.5H185.113V-51ZM79.8868 -51V-51.5H79.6797L79.5333 -51.3536L79.8868 -51ZM264 27.8868H264.5V27.6797L264.354 27.5333L264 27.8868ZM264 133.113L264.354 133.467L264.5 133.32V133.113H264ZM185.113 212V212.5H185.32L185.467 212.354L185.113 212ZM79.8868 212L79.5333 212.354L79.6797 212.5H79.8868V212ZM1 133.113H0.5V133.32L0.646447 133.467L1 133.113ZM1 27.8868L0.646447 27.5333L0.5 27.6797V27.8868H1ZM146.836 195.215L147.19 195.568L146.836 195.215ZM247.204 66.1639L246.851 66.5174L247.204 66.1639ZM146.836 -34.2043L147.19 -34.5579L146.836 -34.2043ZM118.154 -34.2043L117.8 -34.5579L117.8 -34.5579L118.154 -34.2043ZM17.7957 66.1639L18.1492 66.5174L18.1492 66.5174L17.7957 66.1639ZM17.7957 94.8463L18.1492 94.4928L18.1492 94.4928L17.7957 94.8463ZM118.154 195.215L117.8 195.568L117.8 195.568L118.154 195.215ZM132.495 52.9631L132.849 52.6096L132.495 52.256L132.142 52.6096L132.495 52.9631ZM104.963 80.4952L104.609 80.1417L104.256 80.4952L104.609 80.8488L104.963 80.4952ZM160.027 80.4952L160.381 80.8488L160.734 80.4952L160.381 80.1417L160.027 80.4952ZM132.495 108.027L132.142 108.381L132.495 108.734L132.849 108.381L132.495 108.027ZM185.113 -51.5H79.8868V-50.5H185.113V-51.5ZM264.354 27.5333L185.467 -51.3536L184.76 -50.6464L263.646 28.2404L264.354 27.5333ZM264.5 133.113V27.8868H263.5V133.113H264.5ZM185.467 212.354L264.354 133.467L263.646 132.76L184.76 211.646L185.467 212.354ZM79.8868 212.5H185.113V211.5H79.8868V212.5ZM0.646447 133.467L79.5333 212.354L80.2404 211.646L1.35355 132.76L0.646447 133.467ZM0.5 27.8868V133.113H1.5V27.8868H0.5ZM79.5333 -51.3536L0.646447 27.5333L1.35355 28.2404L80.2404 -50.6464L79.5333 -51.3536ZM246.851 94.4928L146.483 194.861L147.19 195.568L247.558 95.1998L246.851 94.4928ZM246.851 66.5174C254.577 74.2433 254.577 86.7669 246.851 94.4928L247.558 95.1998C255.674 87.0835 255.674 73.9267 247.558 65.8103L246.851 66.5174ZM146.483 -33.8508L246.851 66.5174L247.558 65.8103L147.19 -34.5579L146.483 -33.8508ZM118.507 -33.8508C126.233 -41.5767 138.757 -41.5767 146.483 -33.8508L147.19 -34.5579C139.073 -42.6743 125.917 -42.6743 117.8 -34.5579L118.507 -33.8508ZM18.1492 66.5174L118.507 -33.8508L117.8 -34.5579L17.4421 65.8103L18.1492 66.5174ZM18.1492 94.4928C10.4233 86.7669 10.4233 74.2433 18.1492 66.5174L17.4421 65.8103C9.3257 73.9267 9.3257 87.0835 17.4421 95.1998L18.1492 94.4928ZM118.507 194.861L18.1492 94.4928L17.4421 95.1998L117.8 195.568L118.507 194.861ZM146.483 194.861C138.757 202.587 126.233 202.587 118.507 194.861L117.8 195.568C125.917 203.684 139.073 203.684 147.19 195.568L146.483 194.861ZM132.142 52.6096L104.609 80.1417L105.317 80.8488L132.849 53.3167L132.142 52.6096ZM160.381 80.1417L132.849 52.6096L132.142 53.3167L159.674 80.8488L160.381 80.1417ZM132.849 108.381L160.381 80.8488L159.674 80.1417L132.142 107.674L132.849 108.381ZM104.609 80.8488L132.142 108.381L132.849 107.674L105.317 80.1417L104.609 80.8488Z" fill="url(#paint1_linear_642_4223)" mask="url(#path-1-outside-1_642_4223)"></path><defs><linearGradient id="paint0_linear_642_4223" x1="0.999999" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="#3B736A"></stop><stop offset="1" stop-color="#245850"></stop></linearGradient><linearGradient id="paint1_linear_642_4223" x1="1" y1="5" x2="161" y2="173.5" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.4"></stop><stop offset="1" stop-color="white" stop-opacity="0.1"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/hive/docs/gateway"><p class="font-medium">Hive Gateway</p><svg width="52" height="53" viewBox="0 0 52 53" fill="currentColor" class="mt-8"><path d="m25 .524872-7.7758.000001V13.6981c0 2.2382-1.8128 4.051-4.0509 4.051H0l7.2e-7 7.7758H8.48411c1.06096 0 2.07849-.4215 2.82859-1.1718l12.5159-12.5176C24.5786 11.0854 25 10.068 25 9.00727V.524872Zm2 0 7.7758.000001V13.6981c0 2.2382 1.8128 4.051 4.0509 4.051H52v7.7758h-8.4841c-1.061 0-2.0785-.4215-2.8286-1.1718L28.1714 11.8355C27.4214 11.0854 27 10.068 27 9.00727V.524872ZM25 52.5249h-7.7758V39.3516c0-2.2381-1.8128-4.0509-4.0509-4.0509H0l7.2e-7-7.7758H8.48411c1.06096 0 2.07849.4215 2.82859 1.1717l12.5159 12.5176c.75.7502 1.1714 1.7675 1.1714 2.8283v8.4824Zm2 0h7.7758V39.3516c0-2.2381 1.8128-4.0509 4.0509-4.0509H52v-7.7758h-8.4841c-1.061 0-2.0785.4215-2.8286 1.1717L28.1714 41.2142c-.75.7502-1.1714 1.7675-1.1714 2.8283v8.4824Zm2.8369-29.837H22.163v7.6739h7.6739v-7.6739Z"></path></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="177" height="174" viewBox="0 0 177 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><path d="m150 -11.850765-46.65480.000006V67.1886c0 13.4292-10.8768 24.306-24.3054 24.306H0l4.32e-6 46.6548H50.90466c6.36576 0 12.47094-2.529 16.97154-7.0308l75.0954-75.1056C147.4716 51.5124 150 45.408 150 39.043620000000004V-11.850765Zm12 0 46.6548.000006V67.1886c0 13.4292 10.8768 24.306 24.3054 24.306H312v46.6548h-50.9046c-6.366 0-12.471-2.529-16.9716-7.0308L168.0284 55.8562C164.5284 51.5124 162 45.408 162 39.043620000000004V-11.850765ZM150 300.1494h-46.6548V221.1096c0-13.4286-10.8768-24.3054-24.3054-24.3054H0l4.32e-6-46.6548H50.90466c6.36576 0 12.47094 2.529 16.97154 7.0302l75.0954 75.1056c4.5 4.5012 7.0284 10.605 7.0284 16.9698v50.8944Zm12 0h46.6548V221.1096c0-13.4286 10.8768-24.3054 24.3054-24.3054H312v-46.6548h-50.9046c-6.366 0-12.471 2.529-16.9716 7.0302L168.0284 232.2852c-4.5 4.5012-7.0284 10.605-7.0284 16.9698v50.8944Zm17.0214-179.022H132.978v46.0434h46.0434v-46.0434Z" fill="url(#paint0_linear_642_4281)" stroke="url(#paint1_linear_642_4281)"></path><defs><linearGradient id="paint0_linear_642_4281" x1="55.5" y1="63" x2="172.004" y2="170.996" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4281" x1="64" y1="64" x2="175" y2="171.5" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/yoga-server"><p class="font-medium">Yoga</p><svg width="53" height="54" viewBox="0 0 53 54" fill="none" class="mt-8"><path d="M35.213 10.37h-8.231l4.943-4.943L26.5 0l-5.427 5.427 4.943 4.943h-8.231a4 4 0 0 0-2.827 1.172L.5 26l5.427 5.427 17.747-17.746a3.997 3.997 0 0 1 5.652 0l17.747 17.746L52.5 26 38.04 11.54a4 4 0 0 0-2.827-1.172v.002ZM26.5 42.197l-5.426 5.426L26.5 53.05l5.426-5.426-5.426-5.427Z" fill="currentColor"></path><path d="M26.5 31.427h-8.713A4 4 0 0 0 14.96 32.6L10.79 36.77l5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.427-5.427-4.172-4.171a4 4 0 0 0-2.827-1.172H26.5Z" fill="currentColor"></path></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="211" height="163" viewBox="0 0 211 163" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4128" maskUnits="userSpaceOnUse" x="0" y="0" width="334" height="340" fill="black"><rect fill="white" width="334" height="340"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M222.174 67.0744H169.727L201.223 35.5783L166.657 1L132.079 35.5783L163.575 67.0744H111.128C104.378 67.0744 97.8956 69.7617 93.1196 74.5377L1 166.657L35.5783 201.236L148.649 88.1653C158.595 78.2184 174.719 78.2184 184.666 88.1653L297.736 201.236L332.315 166.657L240.182 74.525C235.406 69.749 228.924 67.0617 222.174 67.0617V67.0744ZM166.656 269.854L132.083 304.427L166.656 339L201.229 304.427L166.656 269.854ZM111.141 201.239H166.657H166.683H222.199C228.949 201.239 235.432 203.927 240.208 208.703L266.788 235.283L232.21 269.861L184.679 222.33C174.732 212.383 158.608 212.383 148.661 222.33L101.131 269.861L66.5522 235.283L93.1323 208.703C97.9083 203.927 104.391 201.239 111.141 201.239Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M222.174 67.0744H169.727L201.223 35.5783L166.657 1L132.079 35.5783L163.575 67.0744H111.128C104.378 67.0744 97.8956 69.7617 93.1196 74.5377L1 166.657L35.5783 201.236L148.649 88.1653C158.595 78.2184 174.719 78.2184 184.666 88.1653L297.736 201.236L332.315 166.657L240.182 74.525C235.406 69.749 228.924 67.0617 222.174 67.0617V67.0744ZM166.656 269.854L132.083 304.427L166.656 339L201.229 304.427L166.656 269.854ZM111.141 201.239H166.657H166.683H222.199C228.949 201.239 235.432 203.927 240.208 208.703L266.788 235.283L232.21 269.861L184.679 222.33C174.732 212.383 158.608 212.383 148.661 222.33L101.131 269.861L66.5522 235.283L93.1323 208.703C97.9083 203.927 104.391 201.239 111.141 201.239Z" fill="url(#paint0_linear_642_4128)"></path><path d="M169.727 67.0744L169.373 66.7209L168.52 67.5744H169.727V67.0744ZM222.174 67.0744V67.5744H222.674V67.0744H222.174ZM201.223 35.5783L201.576 35.9318L201.93 35.5783L201.576 35.2248L201.223 35.5783ZM166.657 1L167.011 0.646512L166.657 0.292828L166.304 0.646447L166.657 1ZM132.079 35.5783L131.725 35.2247L131.372 35.5783L131.725 35.9318L132.079 35.5783ZM163.575 67.0744V67.5744H164.782L163.929 66.7209L163.575 67.0744ZM1 166.657L0.646447 166.304L0.292893 166.657L0.646447 167.011L1 166.657ZM35.5783 201.236L35.2247 201.589L35.5783 201.943L35.9318 201.589L35.5783 201.236ZM148.649 88.1653L149.002 88.5188L148.649 88.1653ZM184.666 88.1653L184.312 88.5188L184.666 88.1653ZM297.736 201.236L297.383 201.589L297.736 201.943L298.09 201.589L297.736 201.236ZM332.315 166.657L332.668 167.011L333.022 166.657L332.668 166.304L332.315 166.657ZM240.182 74.525L239.829 74.8785L240.182 74.525ZM222.174 67.0617V66.5617H221.674V67.0617H222.174ZM132.083 304.427L131.73 304.073L131.376 304.427L131.73 304.78L132.083 304.427ZM166.656 269.854L167.01 269.5L166.656 269.147L166.303 269.5L166.656 269.854ZM166.656 339L166.303 339.353L166.656 339.707L167.01 339.353L166.656 339ZM201.229 304.427L201.583 304.78L201.936 304.427L201.583 304.073L201.229 304.427ZM240.208 208.703L240.561 208.349V208.349L240.208 208.703ZM266.788 235.283L267.141 235.636L267.495 235.283L267.141 234.929L266.788 235.283ZM232.21 269.861L231.856 270.214L232.21 270.568L232.563 270.214L232.21 269.861ZM148.661 222.33L149.015 222.684L148.661 222.33ZM101.131 269.861L100.777 270.214L101.131 270.568L101.484 270.214L101.131 269.861ZM66.5522 235.283L66.1987 234.929L65.8451 235.283L66.1987 235.636L66.5522 235.283ZM169.727 67.5744H222.174V66.5744H169.727V67.5744ZM200.869 35.2247L169.373 66.7209L170.08 67.428L201.576 35.9318L200.869 35.2247ZM166.304 1.35349L200.869 35.9318L201.576 35.2248L167.011 0.646512L166.304 1.35349ZM132.433 35.9318L167.011 1.35355L166.304 0.646447L131.725 35.2247L132.433 35.9318ZM163.929 66.7209L132.433 35.2247L131.725 35.9318L163.222 67.428L163.929 66.7209ZM111.128 67.5744H163.575V66.5744H111.128V67.5744ZM93.4731 74.8913C98.1555 70.2089 104.511 67.5744 111.128 67.5744V66.5744C104.245 66.5744 97.6357 69.3145 92.766 74.1842L93.4731 74.8913ZM1.35355 167.011L93.4731 74.8913L92.766 74.1842L0.646447 166.304L1.35355 167.011ZM35.9318 200.882L1.35355 166.304L0.646447 167.011L35.2247 201.589L35.9318 200.882ZM148.295 87.8117L35.2247 200.882L35.9318 201.589L149.002 88.5188L148.295 87.8117ZM185.02 87.8117C174.877 77.6696 158.437 77.6696 148.295 87.8117L149.002 88.5188C158.754 78.7672 174.561 78.7672 184.312 88.5188L185.02 87.8117ZM298.09 200.882L185.02 87.8117L184.312 88.5188L297.383 201.589L298.09 200.882ZM331.961 166.304L297.383 200.882L298.09 201.589L332.668 167.011L331.961 166.304ZM239.829 74.8785L331.961 167.011L332.668 166.304L240.536 74.1714L239.829 74.8785ZM222.174 67.5617C228.791 67.5617 235.146 70.1962 239.829 74.8785L240.536 74.1714C235.666 69.3018 229.056 66.5617 222.174 66.5617V67.5617ZM222.674 67.0744V67.0617H221.674V67.0744H222.674ZM132.437 304.78L167.01 270.207L166.303 269.5L131.73 304.073L132.437 304.78ZM167.01 338.646L132.437 304.073L131.73 304.78L166.303 339.353L167.01 338.646ZM200.876 304.073L166.303 338.646L167.01 339.353L201.583 304.78L200.876 304.073ZM166.303 270.207L200.876 304.78L201.583 304.073L167.01 269.5L166.303 270.207ZM166.657 200.739H111.141V201.739H166.657V200.739ZM166.683 200.739H166.657V201.739H166.683V200.739ZM222.199 200.739H166.683V201.739H222.199V200.739ZM240.561 208.349C235.692 203.479 229.082 200.739 222.199 200.739V201.739C228.816 201.739 235.172 204.374 239.854 209.056L240.561 208.349ZM267.141 234.929L240.561 208.349L239.854 209.056L266.434 235.636L267.141 234.929ZM232.563 270.214L267.141 235.636L266.434 234.929L231.856 269.507L232.563 270.214ZM184.325 222.684L231.856 270.214L232.563 269.507L185.032 221.977L184.325 222.684ZM149.015 222.684C158.766 212.932 174.574 212.932 184.325 222.684L185.032 221.977C174.89 211.834 158.45 211.834 148.308 221.977L149.015 222.684ZM101.484 270.214L149.015 222.684L148.308 221.977L100.777 269.507L101.484 270.214ZM66.1987 235.636L100.777 270.214L101.484 269.507L66.9058 234.929L66.1987 235.636ZM92.7787 208.349L66.1987 234.929L66.9058 235.636L93.4858 209.056L92.7787 208.349ZM111.141 200.739C104.258 200.739 97.6484 203.479 92.7787 208.349L93.4858 209.056C98.1682 204.374 104.524 201.739 111.141 201.739V200.739Z" fill="url(#paint1_linear_642_4128)" mask="url(#path-1-outside-1_642_4128)"></path><defs><linearGradient id="paint0_linear_642_4128" x1="82.5" y1="43" x2="183.837" y2="159.975" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4128" x1="100.5" y1="53.5" x2="210.094" y2="158.311" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/mesh"><p class="font-medium">Mesh</p><svg width="52" height="53" viewBox="0 0 52 53" fill="none" class="mt-8"><g clip-path="url(#mesh-icon)" fill="currentColor"><path d="M52 15.386 44.915 8.3l-.69-.691L37.138.525H14.86L7.774 7.61l-.69.69L0 15.387v22.28l7.085 7.085.69.69 7.086 7.086h22.28l7.085-7.085.69-.69 7.086-7.086v-22.28H52ZM40.173 44.749H11.827a4.05 4.05 0 0 1-4.051-4.05V12.351a4.05 4.05 0 0 1 4.05-4.051h28.347a4.05 4.05 0 0 1 4.051 4.05v28.347a4.05 4.05 0 0 1-4.05 4.051Z"></path><path d="M14.782 19.317v14.416a4.05 4.05 0 0 0 4.05 4.05h14.335a4.05 4.05 0 0 0 4.051-4.05V19.317a4.05 4.05 0 0 0-4.05-4.05H18.832a4.05 4.05 0 0 0-4.051 4.05Zm14.66 3.725v6.966h-6.884v-6.966h6.884Z"></path></g><defs><clipPath id="mesh-icon"><path fill="#fff" transform="translate(0 .525)" d="M0 0h52v52H0z"></path></clipPath></defs></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="156" height="174" viewBox="0 0 156 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4203" maskUnits="userSpaceOnUse" x="0" y="-75" width="248" height="248" fill="black"><rect fill="white" y="-75" width="248" height="248"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z" fill="url(#paint0_linear_642_4203)"></path><path d="M246.99 -3.69922L246.637 -3.34566L246.783 -3.19922H246.99V-3.69922ZM213.474 -37.2159L213.827 -37.5695L213.474 -37.2159ZM247 -3.69922H247.5V-4.19922H247V-3.69922ZM247 101.699L247.354 102.053L247.5 101.906V101.699H247ZM213.483 135.216L213.837 135.57L213.483 135.216ZM210.216 138.483L210.57 138.837L210.216 138.483ZM176.699 172V172.5H176.906L177.053 172.354L176.699 172ZM71.3008 172L70.9472 172.354L71.0937 172.5H71.3008V172ZM37.7841 138.483L38.1376 138.13V138.13L37.7841 138.483ZM34.5167 135.216L34.1632 135.57V135.57L34.5167 135.216ZM1 101.699H0.5V101.906L0.646447 102.053L1 101.699ZM1 -3.69922L0.646396 -4.05272L0.5 -3.90628V-3.69922H1ZM34.5071 -37.2159L34.1536 -37.5695L34.1535 -37.5694L34.5071 -37.2159ZM37.7745 -40.4833L38.128 -40.1297L37.7745 -40.4833ZM71.2912 -74V-74.5H71.0841L70.9376 -74.3536L71.2912 -74ZM176.69 -74L177.043 -74.3536L176.897 -74.5H176.69V-74ZM210.206 -40.4833L209.853 -40.1297L210.206 -40.4833ZM140.279 32.5184H140.779V32.0184H140.279V32.5184ZM140.279 65.4698V65.9698H140.779V65.4698H140.279ZM107.711 32.5184V32.0184H107.211V32.5184H107.711ZM107.711 65.4698H107.211V65.9698H107.711V65.4698ZM247.344 -4.05277L213.827 -37.5695L213.12 -36.8624L246.637 -3.34566L247.344 -4.05277ZM247 -4.19922H246.99V-3.19922H247V-4.19922ZM247.5 101.699V-3.69922H246.5V101.699H247.5ZM213.837 135.57L247.354 102.053L246.646 101.346L213.13 134.862L213.837 135.57ZM210.57 138.837L213.837 135.57L213.13 134.862L209.862 138.13L210.57 138.837ZM177.053 172.354L210.57 138.837L209.862 138.13L176.346 171.646L177.053 172.354ZM71.3008 172.5H176.699V171.5H71.3008V172.5ZM37.4305 138.837L70.9472 172.354L71.6543 171.646L38.1376 138.13L37.4305 138.837ZM34.1632 135.57L37.4305 138.837L38.1376 138.13L34.8703 134.862L34.1632 135.57ZM0.646447 102.053L34.1632 135.57L34.8703 134.862L1.35355 101.346L0.646447 102.053ZM0.5 -3.69922V101.699H1.5V-3.69922H0.5ZM34.1535 -37.5694L0.646396 -4.05272L1.3536 -3.34572L34.8607 -36.8624L34.1535 -37.5694ZM37.4209 -40.8368L34.1536 -37.5695L34.8607 -36.8624L38.128 -40.1297L37.4209 -40.8368ZM70.9376 -74.3536L37.4209 -40.8368L38.128 -40.1297L71.6447 -73.6464L70.9376 -74.3536ZM176.69 -74.5H71.2912V-73.5H176.69V-74.5ZM210.56 -40.8368L177.043 -74.3536L176.336 -73.6464L209.853 -40.1297L210.56 -40.8368ZM213.827 -37.5695L210.56 -40.8368L209.853 -40.1297L213.12 -36.8624L213.827 -37.5695ZM191.043 134.706H56.9474V135.706H191.043V134.706ZM209.706 116.043C209.706 126.355 201.355 134.706 191.043 134.706V135.706C201.907 135.706 210.706 126.907 210.706 116.043H209.706ZM209.706 -18.0526V116.043H210.706V-18.0526H209.706ZM191.043 -36.7159C201.355 -36.7159 209.706 -28.3642 209.706 -18.0526H210.706C210.706 -28.9165 201.907 -37.7159 191.043 -37.7159V-36.7159ZM56.9474 -36.7159H191.043V-37.7159H56.9474V-36.7159ZM38.2841 -18.0526C38.2841 -28.3642 46.6358 -36.7159 56.9474 -36.7159V-37.7159C46.0835 -37.7159 37.2841 -28.9165 37.2841 -18.0526H38.2841ZM38.2841 116.043V-18.0526H37.2841V116.043H38.2841ZM56.9474 134.706C46.6358 134.706 38.2841 126.355 38.2841 116.043H37.2841C37.2841 126.907 46.0835 135.706 56.9474 135.706V134.706ZM70.4266 14.8977V83.0905H71.4266V14.8977H70.4266ZM90.09 -4.76562C79.2261 -4.76562 70.4266 4.03383 70.4266 14.8977H71.4266C71.4266 4.58612 79.7784 -3.76562 90.09 -3.76562V-4.76562ZM157.9 -4.76562H90.09V-3.76562H157.9V-4.76562ZM177.563 14.8977C177.563 4.03383 168.763 -4.76562 157.9 -4.76562V-3.76562C168.211 -3.76562 176.563 4.58612 176.563 14.8977H177.563ZM177.563 83.0905V14.8977H176.563V83.0905H177.563ZM157.9 102.754C168.763 102.754 177.563 93.9544 177.563 83.0905H176.563C176.563 93.4021 168.211 101.754 157.9 101.754V102.754ZM90.09 102.754H157.9V101.754H90.09V102.754ZM70.4266 83.0905C70.4266 93.9544 79.2261 102.754 90.09 102.754V101.754C79.7784 101.754 71.4266 93.4021 71.4266 83.0905H70.4266ZM139.779 32.5184V65.4698H140.779V32.5184H139.779ZM107.711 33.0184H140.279V32.0184H107.711V33.0184ZM108.211 65.4698V32.5184H107.211V65.4698H108.211ZM140.279 64.9698H107.711V65.9698H140.279V64.9698Z" fill="url(#paint1_linear_642_4203)" mask="url(#path-1-outside-1_642_4203)"></path><defs><linearGradient id="paint0_linear_642_4203" x1="1" y1="-1" x2="143.007" y2="171.994" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4203" x1="0.999998" y1="0.500001" x2="140.501" y2="171.999" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li></ul></section><section class="rounded-3xl bg-beige-100 p-4 pt-6 sm:py-24 md:px-6 md:py-[120px] mx-4 md:mx-6"><div class="flex flex-wrap justify-center md:px-6 xl:px-16"><div class="w-full sm:mb-12 sm:px-8 xl:mb-0 xl:w-[400px] xl:px-0"><h3 class="text-[40px] leading-[1.2] tracking-[-0.2px] text-balance" id="generate-type-safe-graphql-client-and-server-code"><a href="#generate-type-safe-graphql-client-and-server-code" class="cursor-text" tabindex="-1">Generate Type-Safe GraphQL Client and Server Code</a></h3><p class="mt-6 text-green-800">Codegen enhances your GraphQL development with fully typed client and server code, generating robust, error-resistant solutions in seconds</p></div><div class="bg-beige-100 p-6 md:p-12 flex-1 px-0 sm:px-8 sm:py-0 md:px-8 md:py-0"><div class="w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12L15.929 19.071L14.515 17.657L20.172 12L14.515 6.34302L15.929 4.92902L23 12ZM3.828 12L9.485 17.657L8.071 19.071L1 12L8.071 4.92902L9.485 6.34302L3.828 12Z"></path></svg></div><h3 class="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">No more mistakes</h3><p class="mt-2 text-green-800 md:mt-4">Codegen ensures your resolvers and client code are compliant with your GraphQL Schema.</p></div><div class="bg-beige-100 p-6 md:p-12 flex-1 basis-full border-beige-400 px-0 sm:basis-0 sm:border-l sm:px-8 sm:py-0 md:px-8 md:py-0"><div class="w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="currentColor"><path d="M6.414 15.9398L16.556 5.79778L15.142 4.38378L5 14.5258V15.9398H6.414ZM7.243 17.9398H3V13.6968L14.435 2.26178C14.6225 2.07431 14.8768 1.96899 15.142 1.96899C15.4072 1.96899 15.6615 2.07431 15.849 2.26178L18.678 5.09078C18.8655 5.27831 18.9708 5.53262 18.9708 5.79778C18.9708 6.06294 18.8655 6.31725 18.678 6.50478L7.243 17.9398ZM3 19.9398H21V21.9398H3V19.9398Z"></path></svg></div><h3 class="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">Easy customization</h3><p class="mt-2 text-green-800 md:mt-4">Tailor the output that you need with community plugins or write <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 underline hover:text-blue-700 outline-none transition focus-visible:ring" href="/graphql/codegen/docs/custom-codegen/plugin-structure">your own plugins</a> to generate custom outputs matching your needs.</p></div></div></section><section class="px-4 py-6 sm:py-12 md:px-6 lg:py-24 xl:px-[120px] mx-4 md:mx-6"><h3 class="text-4xl leading-[1.2] md:text-5xl md:leading-[1.16667] tracking-[-0.48px] text-balance text-center" id="your-chance-to-fully-use-graphql-"><a href="#your-chance-to-fully-use-graphql-" class="cursor-text" tabindex="-1">Your chance to fully use GraphQL.</a></h3><p class="mx-auto mt-4 max-w-[700px] text-center text-green-800">Codegen enhances your GraphQL development with fully typed client and server code, generating robust, error-resistant solutions in seconds</p><ul class="mt-6 flex flex-row flex-wrap justify-center gap-2 md:mt-16 md:gap-6"><li class="bg-beige-100 p-6 md:p-12 flex-1 rounded-2xl md:rounded-3xl"><div class="w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white"><img src="/graphql/codegen/_next/static/media/box.bbbb90f4.svg" alt=""/></div><h3 class="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">Typed Queries, Mutations, and Subscriptions</h3><p class="mt-2 text-green-800 md:mt-4">Automate the creation of typed queries, mutations, and subscriptions for frameworks like React, Vue, Angular, and more.</p></li><li class="bg-beige-100 p-6 md:p-12 flex-1 basis-full rounded-2xl md:basis-0 md:rounded-3xl"><div class="w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white"><img src="/graphql/codegen/_next/static/media/speedometer.20da1c4e.svg" alt=""/></div><h3 class="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">Typed GraphQL resolvers</h3><p class="mt-2 text-green-800 md:mt-4">Generate typed GraphQL resolvers for any Node.js or Java GraphQL server, ensuring compatibility and efficiency.</p></li><li class="bg-beige-100 p-6 md:p-12 flex-1 basis-full rounded-2xl md:rounded-3xl lg:basis-0"><div class="w-fit rounded-lg bg-[linear-gradient(135deg,#68A8B6,#3B736A)] p-[9px] text-white"><img src="/graphql/codegen/_next/static/media/checkmarks.e8a615fb.svg" alt=""/></div><h3 class="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">Fully-typed Node.js SDKs</h3><p class="mt-2 text-green-800 md:mt-4">Produce fully-typed Node.js SDKs, enhancing development with reliable, strongly typed software components.</p></li></ul></section><section class="MarketplaceSearch neutral bg-[--bg] sm:mx-4 md:mx-6"><div class="container max-w-[90rem] py-12"><h1 class="tracking-[-0.2px] mb-4 text-[32px] text-[--fg]" id="explore-plugins-&-presets"><a href="#explore-plugins-&-presets" class="cursor-text" tabindex="-1">Explore Plugins & Presets</a></h1><div class="flex flex-wrap gap-2 py-2"><button tabindex="0" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">preset</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">csharp</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">dart</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">flutter</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">flow</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">java</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">utilities</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">mongodb</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">nhost</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">angular</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">react</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">svelte</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">next</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">apollo</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">urql</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">vue</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">kotlin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">android</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">reason</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">relay</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">jsdoc</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">resolvers</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">hasura</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">validation</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">yup</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">zod</button></div><div class="border-b border-[--fg-60]"><div class="hive-focus-within flex items-center rounded px-2 mt-4"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-[--fg-80]"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 21L16.65 16.65" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><input type="search" placeholder="Search..." class="ml-2 w-full border-0 bg-transparent py-2 font-medium text-[--fg] outline-none placeholder:text-[--fg-60] [&::-webkit-search-cancel-button]:hidden" value=""/><button tabindex="-1" class="flex size-6 items-center justify-center rounded-sm"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="size-5 text-[--fg-80]"><path d="M5.63607 5.35355L18.364 18.0815" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.0815 5.35354L5.35358 18.0815" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div><div class="mt-8"><button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div tabindex="-1"><div class="nextra-scrollbar _overflow-x-auto _overscroll-x-contain _overflow-y-hidden _mt-4 _flex _w-full _gap-2 _border-b _border-gray-200 _pb-px dark:_border-neutral-800 nextra-focus grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [.green_&]:!bg-green-900 [.light_&]:bg-neutral-100 [.light_&]:text-green-200" role="tablist" aria-orientation="horizontal"><button class="_outline-none _whitespace-nowrap _rounded-t _p-2 _font-medium _leading-5 _transition-colors _-mb-0.5 _select-none _border-b-2 _border-current _text-primary-600 rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:!cursor-default aria-selected:!bg-[--fg] aria-selected:!text-[--bg] sm:p-4 sm:text-base [.green_&]:!bg-green-900 [.green_&]:!text-green-200 [.green_&]:hover:!bg-green-700/25 [.green_&]:hover:!text-green-100 [.green_&]:aria-selected:!bg-green-300 [.green_&]:aria-selected:!text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900" id="headlessui-tabs-tab-:Rmj9d6:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected="">Trending</button><button class="_whitespace-nowrap _rounded-t _p-2 _font-medium _leading-5 _transition-colors _-mb-0.5 _select-none _border-b-2 _border-transparent _text-gray-600 dark:_text-gray-200 rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:!cursor-default aria-selected:!bg-[--fg] aria-selected:!text-[--bg] sm:p-4 sm:text-base [.green_&]:!bg-green-900 [.green_&]:!text-green-200 [.green_&]:hover:!bg-green-700/25 [.green_&]:hover:!text-green-100 [.green_&]:aria-selected:!bg-green-300 [.green_&]:aria-selected:!text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900" id="headlessui-tabs-tab-:R16j9d6:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">Recently Updated</button></div><div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:Rqj9d6:" role="tabpanel" tabindex="-1" data-headlessui-state="selected" data-selected=""><section class="MarketplaceSearch neutral w-full dark:bg-neutral-900 [&.green]:bg-green-1000"><ul class="grid gap-4 lg:grid-cols-2 lg:gap-6"><li class="*:h-full"><a title="TypeScript plugin details" tabindex="0" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:27.090Z">Nov 22, 2024</time></span><span class="hidden @sm:block">3.6M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Schema AST plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/other/schema-ast"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Schema AST" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql.0bd411c9.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Schema AST</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating a .graphql file from a given schema</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">utilities</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-06-30T06:20:59.195Z">Jun 30, 2024</time></span><span class="hidden @sm:block">3.2M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Operations plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-operations"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Operations" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Operations</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types for GraphQL queries, mutations, subscriptions and fragments</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.387Z">Nov 22, 2024</time></span><span class="hidden @sm:block">3.1M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Add plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/other/add"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Add" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql.0bd411c9.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Add</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for adding custom content to your output file</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-06-13T10:03:13.074Z">Jun 13, 2024</time></span><span class="hidden @sm:block">2.9M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypedDocumentNode plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typed-document-node"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypedDocumentNode" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypedDocumentNode</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating ready-to-use TypedDocumentNode based on GraphQL operations</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.556Z">Nov 22, 2024</time></span><span class="hidden @sm:block">2.1M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Client preset plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/presets/preset-client"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Client preset" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/codegen.f5a7e7e4.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Client preset</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator preset for client.</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">preset</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">next</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">react</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">urql</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">vue</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.784Z">Nov 22, 2024</time></span><span class="hidden @sm:block">2M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript React Apollo plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-react-apollo"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript React Apollo" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/apollo.01931cdb.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript React Apollo</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating a ready-to-use React Components/HOC/Hooks based on GraphQL operations</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">react</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">apollo</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-09-09T16:02:01.569Z">Sep 9, 2024</time></span><span class="hidden @sm:block">764K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Introspection plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/other/introspection"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Introspection" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql.0bd411c9.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Introspection</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating an introspection JSON file for a GraphQLSchema</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">utilities</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-02-20T17:55:16.397Z">Feb 20, 2024</time></span><span class="hidden @sm:block">752K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Resolvers plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-resolvers"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Resolvers" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Resolvers</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types for resolvers signature</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.951Z">Nov 22, 2024</time></span><span class="hidden @sm:block">702K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Fragment Matcher plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/other/fragment-matcher"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Fragment Matcher" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql.0bd411c9.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Fragment Matcher</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">graphql-code-generate plugin for generating fragments matcher introspection file</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">apollo</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-02-06T14:57:00.701Z">Feb 6, 2024</time></span><span class="hidden @sm:block">519K weekly downloads</span></div></div></a></li></ul><ul class="flex justify-center gap-2 mt-6" role="navigation" aria-label="Pagination"><li class="hidden disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li><li class="selected"><a rel="canonical" role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none text-[--bg] dark:!text-[--bg] bg-[--fg] [.green_&]:bg-green-300 [.green_&]:text-green-800" tabindex="-1" aria-label="Page 1 is your current page" aria-current="page">1</a></li><li><a rel="next" role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 2">2</a></li><li><a role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 3">3</a></li><li class="break"><a class="hive-focus rounded text-[--fg-80] [.green_&]:text-green-200" role="button" tabindex="0" aria-label="Jump forward">...</a></li><li><a role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 6">6</a></li><li class="hidden"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li></ul></section></div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:R1aj9d6:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><section class="MarketplaceSearch neutral w-full dark:bg-neutral-900 [&.green]:bg-green-1000"><ul class="grid gap-4 lg:grid-cols-2 lg:gap-6"><li class="*:h-full"><a title="TypeScript plugin details" tabindex="0" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:27.090Z">Nov 22, 2024</time></span><span class="hidden @sm:block">3.6M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Resolvers plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-resolvers"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Resolvers" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Resolvers</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types for resolvers signature</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.951Z">Nov 22, 2024</time></span><span class="hidden @sm:block">702K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Client preset plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/presets/preset-client"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="Client preset" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/codegen.f5a7e7e4.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">Client preset</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator preset for client.</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">preset</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">next</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">react</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">urql</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">vue</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.784Z">Nov 22, 2024</time></span><span class="hidden @sm:block">2M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Document Nodes plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-document-nodes"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Document Nodes" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Document Nodes</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript modules with embedded GraphQL document nodes</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.650Z">Nov 22, 2024</time></span><span class="hidden @sm:block">148K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypedDocumentNode plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typed-document-node"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypedDocumentNode" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypedDocumentNode</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating ready-to-use TypedDocumentNode based on GraphQL operations</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.556Z">Nov 22, 2024</time></span><span class="hidden @sm:block">2.1M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Operations plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-operations"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Operations" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Operations</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeScript types for GraphQL queries, mutations, subscriptions and fragments</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:26.387Z">Nov 22, 2024</time></span><span class="hidden @sm:block">3.1M weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="GraphQL Modules Preset plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/presets/graphql-modules-preset"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="GraphQL Modules Preset" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql-modules.eac09615.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">GraphQL Modules Preset</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator preset for modularized schema</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">preset</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">utilities</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">resolvers</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-22T20:42:25.973Z">Nov 22, 2024</time></span><span class="hidden @sm:block">28K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Validation Schema plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-validation-schema"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Validation Schema" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/graphql.0bd411c9.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Validation Schema</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin to generate form validation schema from your GraphQL schema</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">validation</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">yup</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">zod</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-11-08T15:22:00.293Z">Nov 8, 2024</time></span><span class="hidden @sm:block">44K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Mock Data plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-mock-data"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Mock Data" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Mock Data</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Codegen plugin for building mock data</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-09-20T15:27:47.529Z">Sep 20, 2024</time></span><span class="hidden @sm:block">92K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Mock Data Factory plugin details" tabindex="-1" class="hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75 outline-none transition focus-visible:ring" href="/graphql/codegen/plugins/typescript/typescript-fabbrica"><div class="size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"><img alt="TypeScript Mock Data Factory" loading="eager" width="92" height="92" decoding="async" data-nimg="1" class="aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]" style="color:transparent" src="/graphql/codegen/_next/static/media/typescript.27df170d.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Mock Data Factory</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator Plugin to define mock data factory.</div><div class="flex flex-wrap gap-2 py-2 mt-auto"><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">plugin</button><button tabindex="-1" class="hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200">typescript</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2024-09-19T15:08:48.961Z">Sep 19, 2024</time></span><span class="hidden @sm:block">1.7K weekly downloads</span></div></div></a></li></ul><ul class="flex justify-center gap-2 mt-6" role="navigation" aria-label="Pagination"><li class="hidden disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li><li class="selected"><a rel="canonical" role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none text-[--bg] dark:!text-[--bg] bg-[--fg] [.green_&]:bg-green-300 [.green_&]:text-green-800" tabindex="-1" aria-label="Page 1 is your current page" aria-current="page">1</a></li><li><a rel="next" role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 2">2</a></li><li><a role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 3">3</a></li><li class="break"><a class="hive-focus rounded text-[--fg-80] [.green_&]:text-green-200" role="button" tabindex="0" aria-label="Jump forward">...</a></li><li><a role="button" class="hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none" tabindex="0" aria-label="Page 6">6</a></li><li class="hidden"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li></ul></section></div></div></div></div></div></section><section class="isolate flex flex-col gap-6 px-4 py-6 lg:gap-12 lg:py-24 xl:px-[120px] mx-4 md:mx-6"><h2 class="text-4xl leading-[1.2] md:text-5xl md:leading-[1.16667] tracking-[-0.48px] text-green-1000" id="discover-the-complete-ecosystem-of-tools-and-libraries"><a href="#discover-the-complete-ecosystem-of-tools-and-libraries" class="cursor-text" tabindex="-1">Discover the complete ecosystem of tools and libraries</a></h2><p class="text-green-800">Complete GraphQL Federation Stack</p><ul class="-mx-12 -my-2 flex grid-cols-2 gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4"><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/hive"><p class="font-medium">Hive</p><svg width="52" height="52" viewBox="0 0 52 52" fill="none" class="mt-8"><g clip-path="url(#hive-icon)" fill="currentColor"><path d="M36.902.081H16.097L.5 15.678v20.806L16.097 52.08h20.805L52.5 36.484V15.678L36.902.081ZM49.18 28.918 29.334 48.762a4.01 4.01 0 0 1-5.67 0L3.82 28.918a4.01 4.01 0 0 1 0-5.671L23.663 3.402a4.01 4.01 0 0 1 5.671 0L49.18 23.247a4.01 4.01 0 0 1 0 5.67Z"></path><path d="m26.499 20.637-5.444 5.443 5.444 5.444 5.443-5.444-5.443-5.443Z"></path></g><defs><clipPath id="hive-icon"><path fill="#fff" d="M0 0h52v52H0z"></path></clipPath></defs></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="160" height="174" viewBox="0 0 160 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4223" maskUnits="userSpaceOnUse" x="0" y="-52" width="265" height="265" fill="black"><rect fill="white" y="-52" width="265" height="265"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M79.8868 -51H185.113L264 27.8868V133.113L185.113 212H79.8868L1 133.113V27.8868L79.8868 -51ZM146.836 195.215L247.204 94.8463C255.126 86.9252 255.126 74.085 247.204 66.1639L146.836 -34.2043C138.915 -42.1255 126.075 -42.1255 118.154 -34.2043L17.7957 66.1639C9.87451 74.085 9.87451 86.9252 17.7957 94.8463L118.154 195.215C126.075 203.136 138.915 203.136 146.836 195.215ZM104.963 80.4952L132.495 52.9631L160.027 80.4952L132.495 108.027L104.963 80.4952Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M79.8868 -51H185.113L264 27.8868V133.113L185.113 212H79.8868L1 133.113V27.8868L79.8868 -51ZM146.836 195.215L247.204 94.8463C255.126 86.9252 255.126 74.085 247.204 66.1639L146.836 -34.2043C138.915 -42.1255 126.075 -42.1255 118.154 -34.2043L17.7957 66.1639C9.87451 74.085 9.87451 86.9252 17.7957 94.8463L118.154 195.215C126.075 203.136 138.915 203.136 146.836 195.215ZM104.963 80.4952L132.495 52.9631L160.027 80.4952L132.495 108.027L104.963 80.4952Z" fill="url(#paint0_linear_642_4223)"></path><path d="M185.113 -51L185.467 -51.3536L185.32 -51.5H185.113V-51ZM79.8868 -51V-51.5H79.6797L79.5333 -51.3536L79.8868 -51ZM264 27.8868H264.5V27.6797L264.354 27.5333L264 27.8868ZM264 133.113L264.354 133.467L264.5 133.32V133.113H264ZM185.113 212V212.5H185.32L185.467 212.354L185.113 212ZM79.8868 212L79.5333 212.354L79.6797 212.5H79.8868V212ZM1 133.113H0.5V133.32L0.646447 133.467L1 133.113ZM1 27.8868L0.646447 27.5333L0.5 27.6797V27.8868H1ZM146.836 195.215L147.19 195.568L146.836 195.215ZM247.204 66.1639L246.851 66.5174L247.204 66.1639ZM146.836 -34.2043L147.19 -34.5579L146.836 -34.2043ZM118.154 -34.2043L117.8 -34.5579L117.8 -34.5579L118.154 -34.2043ZM17.7957 66.1639L18.1492 66.5174L18.1492 66.5174L17.7957 66.1639ZM17.7957 94.8463L18.1492 94.4928L18.1492 94.4928L17.7957 94.8463ZM118.154 195.215L117.8 195.568L117.8 195.568L118.154 195.215ZM132.495 52.9631L132.849 52.6096L132.495 52.256L132.142 52.6096L132.495 52.9631ZM104.963 80.4952L104.609 80.1417L104.256 80.4952L104.609 80.8488L104.963 80.4952ZM160.027 80.4952L160.381 80.8488L160.734 80.4952L160.381 80.1417L160.027 80.4952ZM132.495 108.027L132.142 108.381L132.495 108.734L132.849 108.381L132.495 108.027ZM185.113 -51.5H79.8868V-50.5H185.113V-51.5ZM264.354 27.5333L185.467 -51.3536L184.76 -50.6464L263.646 28.2404L264.354 27.5333ZM264.5 133.113V27.8868H263.5V133.113H264.5ZM185.467 212.354L264.354 133.467L263.646 132.76L184.76 211.646L185.467 212.354ZM79.8868 212.5H185.113V211.5H79.8868V212.5ZM0.646447 133.467L79.5333 212.354L80.2404 211.646L1.35355 132.76L0.646447 133.467ZM0.5 27.8868V133.113H1.5V27.8868H0.5ZM79.5333 -51.3536L0.646447 27.5333L1.35355 28.2404L80.2404 -50.6464L79.5333 -51.3536ZM246.851 94.4928L146.483 194.861L147.19 195.568L247.558 95.1998L246.851 94.4928ZM246.851 66.5174C254.577 74.2433 254.577 86.7669 246.851 94.4928L247.558 95.1998C255.674 87.0835 255.674 73.9267 247.558 65.8103L246.851 66.5174ZM146.483 -33.8508L246.851 66.5174L247.558 65.8103L147.19 -34.5579L146.483 -33.8508ZM118.507 -33.8508C126.233 -41.5767 138.757 -41.5767 146.483 -33.8508L147.19 -34.5579C139.073 -42.6743 125.917 -42.6743 117.8 -34.5579L118.507 -33.8508ZM18.1492 66.5174L118.507 -33.8508L117.8 -34.5579L17.4421 65.8103L18.1492 66.5174ZM18.1492 94.4928C10.4233 86.7669 10.4233 74.2433 18.1492 66.5174L17.4421 65.8103C9.3257 73.9267 9.3257 87.0835 17.4421 95.1998L18.1492 94.4928ZM118.507 194.861L18.1492 94.4928L17.4421 95.1998L117.8 195.568L118.507 194.861ZM146.483 194.861C138.757 202.587 126.233 202.587 118.507 194.861L117.8 195.568C125.917 203.684 139.073 203.684 147.19 195.568L146.483 194.861ZM132.142 52.6096L104.609 80.1417L105.317 80.8488L132.849 53.3167L132.142 52.6096ZM160.381 80.1417L132.849 52.6096L132.142 53.3167L159.674 80.8488L160.381 80.1417ZM132.849 108.381L160.381 80.8488L159.674 80.1417L132.142 107.674L132.849 108.381ZM104.609 80.8488L132.142 108.381L132.849 107.674L105.317 80.1417L104.609 80.8488Z" fill="url(#paint1_linear_642_4223)" mask="url(#path-1-outside-1_642_4223)"></path><defs><linearGradient id="paint0_linear_642_4223" x1="0.999999" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="#3B736A"></stop><stop offset="1" stop-color="#245850"></stop></linearGradient><linearGradient id="paint1_linear_642_4223" x1="1" y1="5" x2="161" y2="173.5" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.4"></stop><stop offset="1" stop-color="white" stop-opacity="0.1"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/hive/docs/gateway"><p class="font-medium">Hive Gateway</p><svg width="52" height="53" viewBox="0 0 52 53" fill="currentColor" class="mt-8"><path d="m25 .524872-7.7758.000001V13.6981c0 2.2382-1.8128 4.051-4.0509 4.051H0l7.2e-7 7.7758H8.48411c1.06096 0 2.07849-.4215 2.82859-1.1718l12.5159-12.5176C24.5786 11.0854 25 10.068 25 9.00727V.524872Zm2 0 7.7758.000001V13.6981c0 2.2382 1.8128 4.051 4.0509 4.051H52v7.7758h-8.4841c-1.061 0-2.0785-.4215-2.8286-1.1718L28.1714 11.8355C27.4214 11.0854 27 10.068 27 9.00727V.524872ZM25 52.5249h-7.7758V39.3516c0-2.2381-1.8128-4.0509-4.0509-4.0509H0l7.2e-7-7.7758H8.48411c1.06096 0 2.07849.4215 2.82859 1.1717l12.5159 12.5176c.75.7502 1.1714 1.7675 1.1714 2.8283v8.4824Zm2 0h7.7758V39.3516c0-2.2381 1.8128-4.0509 4.0509-4.0509H52v-7.7758h-8.4841c-1.061 0-2.0785.4215-2.8286 1.1717L28.1714 41.2142c-.75.7502-1.1714 1.7675-1.1714 2.8283v8.4824Zm2.8369-29.837H22.163v7.6739h7.6739v-7.6739Z"></path></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="177" height="174" viewBox="0 0 177 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><path d="m150 -11.850765-46.65480.000006V67.1886c0 13.4292-10.8768 24.306-24.3054 24.306H0l4.32e-6 46.6548H50.90466c6.36576 0 12.47094-2.529 16.97154-7.0308l75.0954-75.1056C147.4716 51.5124 150 45.408 150 39.043620000000004V-11.850765Zm12 0 46.6548.000006V67.1886c0 13.4292 10.8768 24.306 24.3054 24.306H312v46.6548h-50.9046c-6.366 0-12.471-2.529-16.9716-7.0308L168.0284 55.8562C164.5284 51.5124 162 45.408 162 39.043620000000004V-11.850765ZM150 300.1494h-46.6548V221.1096c0-13.4286-10.8768-24.3054-24.3054-24.3054H0l4.32e-6-46.6548H50.90466c6.36576 0 12.47094 2.529 16.97154 7.0302l75.0954 75.1056c4.5 4.5012 7.0284 10.605 7.0284 16.9698v50.8944Zm12 0h46.6548V221.1096c0-13.4286 10.8768-24.3054 24.3054-24.3054H312v-46.6548h-50.9046c-6.366 0-12.471 2.529-16.9716 7.0302L168.0284 232.2852c-4.5 4.5012-7.0284 10.605-7.0284 16.9698v50.8944Zm17.0214-179.022H132.978v46.0434h46.0434v-46.0434Z" fill="url(#paint0_linear_642_4281)" stroke="url(#paint1_linear_642_4281)"></path><defs><linearGradient id="paint0_linear_642_4281" x1="55.5" y1="63" x2="172.004" y2="170.996" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4281" x1="64" y1="64" x2="175" y2="171.5" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/yoga-server"><p class="font-medium">Yoga</p><svg width="53" height="54" viewBox="0 0 53 54" fill="none" class="mt-8"><path d="M35.213 10.37h-8.231l4.943-4.943L26.5 0l-5.427 5.427 4.943 4.943h-8.231a4 4 0 0 0-2.827 1.172L.5 26l5.427 5.427 17.747-17.746a3.997 3.997 0 0 1 5.652 0l17.747 17.746L52.5 26 38.04 11.54a4 4 0 0 0-2.827-1.172v.002ZM26.5 42.197l-5.426 5.426L26.5 53.05l5.426-5.426-5.426-5.427Z" fill="currentColor"></path><path d="M26.5 31.427h-8.713A4 4 0 0 0 14.96 32.6L10.79 36.77l5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.427-5.427-4.172-4.171a4 4 0 0 0-2.827-1.172H26.5Z" fill="currentColor"></path></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="211" height="163" viewBox="0 0 211 163" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4128" maskUnits="userSpaceOnUse" x="0" y="0" width="334" height="340" fill="black"><rect fill="white" width="334" height="340"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M222.174 67.0744H169.727L201.223 35.5783L166.657 1L132.079 35.5783L163.575 67.0744H111.128C104.378 67.0744 97.8956 69.7617 93.1196 74.5377L1 166.657L35.5783 201.236L148.649 88.1653C158.595 78.2184 174.719 78.2184 184.666 88.1653L297.736 201.236L332.315 166.657L240.182 74.525C235.406 69.749 228.924 67.0617 222.174 67.0617V67.0744ZM166.656 269.854L132.083 304.427L166.656 339L201.229 304.427L166.656 269.854ZM111.141 201.239H166.657H166.683H222.199C228.949 201.239 235.432 203.927 240.208 208.703L266.788 235.283L232.21 269.861L184.679 222.33C174.732 212.383 158.608 212.383 148.661 222.33L101.131 269.861L66.5522 235.283L93.1323 208.703C97.9083 203.927 104.391 201.239 111.141 201.239Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M222.174 67.0744H169.727L201.223 35.5783L166.657 1L132.079 35.5783L163.575 67.0744H111.128C104.378 67.0744 97.8956 69.7617 93.1196 74.5377L1 166.657L35.5783 201.236L148.649 88.1653C158.595 78.2184 174.719 78.2184 184.666 88.1653L297.736 201.236L332.315 166.657L240.182 74.525C235.406 69.749 228.924 67.0617 222.174 67.0617V67.0744ZM166.656 269.854L132.083 304.427L166.656 339L201.229 304.427L166.656 269.854ZM111.141 201.239H166.657H166.683H222.199C228.949 201.239 235.432 203.927 240.208 208.703L266.788 235.283L232.21 269.861L184.679 222.33C174.732 212.383 158.608 212.383 148.661 222.33L101.131 269.861L66.5522 235.283L93.1323 208.703C97.9083 203.927 104.391 201.239 111.141 201.239Z" fill="url(#paint0_linear_642_4128)"></path><path d="M169.727 67.0744L169.373 66.7209L168.52 67.5744H169.727V67.0744ZM222.174 67.0744V67.5744H222.674V67.0744H222.174ZM201.223 35.5783L201.576 35.9318L201.93 35.5783L201.576 35.2248L201.223 35.5783ZM166.657 1L167.011 0.646512L166.657 0.292828L166.304 0.646447L166.657 1ZM132.079 35.5783L131.725 35.2247L131.372 35.5783L131.725 35.9318L132.079 35.5783ZM163.575 67.0744V67.5744H164.782L163.929 66.7209L163.575 67.0744ZM1 166.657L0.646447 166.304L0.292893 166.657L0.646447 167.011L1 166.657ZM35.5783 201.236L35.2247 201.589L35.5783 201.943L35.9318 201.589L35.5783 201.236ZM148.649 88.1653L149.002 88.5188L148.649 88.1653ZM184.666 88.1653L184.312 88.5188L184.666 88.1653ZM297.736 201.236L297.383 201.589L297.736 201.943L298.09 201.589L297.736 201.236ZM332.315 166.657L332.668 167.011L333.022 166.657L332.668 166.304L332.315 166.657ZM240.182 74.525L239.829 74.8785L240.182 74.525ZM222.174 67.0617V66.5617H221.674V67.0617H222.174ZM132.083 304.427L131.73 304.073L131.376 304.427L131.73 304.78L132.083 304.427ZM166.656 269.854L167.01 269.5L166.656 269.147L166.303 269.5L166.656 269.854ZM166.656 339L166.303 339.353L166.656 339.707L167.01 339.353L166.656 339ZM201.229 304.427L201.583 304.78L201.936 304.427L201.583 304.073L201.229 304.427ZM240.208 208.703L240.561 208.349V208.349L240.208 208.703ZM266.788 235.283L267.141 235.636L267.495 235.283L267.141 234.929L266.788 235.283ZM232.21 269.861L231.856 270.214L232.21 270.568L232.563 270.214L232.21 269.861ZM148.661 222.33L149.015 222.684L148.661 222.33ZM101.131 269.861L100.777 270.214L101.131 270.568L101.484 270.214L101.131 269.861ZM66.5522 235.283L66.1987 234.929L65.8451 235.283L66.1987 235.636L66.5522 235.283ZM169.727 67.5744H222.174V66.5744H169.727V67.5744ZM200.869 35.2247L169.373 66.7209L170.08 67.428L201.576 35.9318L200.869 35.2247ZM166.304 1.35349L200.869 35.9318L201.576 35.2248L167.011 0.646512L166.304 1.35349ZM132.433 35.9318L167.011 1.35355L166.304 0.646447L131.725 35.2247L132.433 35.9318ZM163.929 66.7209L132.433 35.2247L131.725 35.9318L163.222 67.428L163.929 66.7209ZM111.128 67.5744H163.575V66.5744H111.128V67.5744ZM93.4731 74.8913C98.1555 70.2089 104.511 67.5744 111.128 67.5744V66.5744C104.245 66.5744 97.6357 69.3145 92.766 74.1842L93.4731 74.8913ZM1.35355 167.011L93.4731 74.8913L92.766 74.1842L0.646447 166.304L1.35355 167.011ZM35.9318 200.882L1.35355 166.304L0.646447 167.011L35.2247 201.589L35.9318 200.882ZM148.295 87.8117L35.2247 200.882L35.9318 201.589L149.002 88.5188L148.295 87.8117ZM185.02 87.8117C174.877 77.6696 158.437 77.6696 148.295 87.8117L149.002 88.5188C158.754 78.7672 174.561 78.7672 184.312 88.5188L185.02 87.8117ZM298.09 200.882L185.02 87.8117L184.312 88.5188L297.383 201.589L298.09 200.882ZM331.961 166.304L297.383 200.882L298.09 201.589L332.668 167.011L331.961 166.304ZM239.829 74.8785L331.961 167.011L332.668 166.304L240.536 74.1714L239.829 74.8785ZM222.174 67.5617C228.791 67.5617 235.146 70.1962 239.829 74.8785L240.536 74.1714C235.666 69.3018 229.056 66.5617 222.174 66.5617V67.5617ZM222.674 67.0744V67.0617H221.674V67.0744H222.674ZM132.437 304.78L167.01 270.207L166.303 269.5L131.73 304.073L132.437 304.78ZM167.01 338.646L132.437 304.073L131.73 304.78L166.303 339.353L167.01 338.646ZM200.876 304.073L166.303 338.646L167.01 339.353L201.583 304.78L200.876 304.073ZM166.303 270.207L200.876 304.78L201.583 304.073L167.01 269.5L166.303 270.207ZM166.657 200.739H111.141V201.739H166.657V200.739ZM166.683 200.739H166.657V201.739H166.683V200.739ZM222.199 200.739H166.683V201.739H222.199V200.739ZM240.561 208.349C235.692 203.479 229.082 200.739 222.199 200.739V201.739C228.816 201.739 235.172 204.374 239.854 209.056L240.561 208.349ZM267.141 234.929L240.561 208.349L239.854 209.056L266.434 235.636L267.141 234.929ZM232.563 270.214L267.141 235.636L266.434 234.929L231.856 269.507L232.563 270.214ZM184.325 222.684L231.856 270.214L232.563 269.507L185.032 221.977L184.325 222.684ZM149.015 222.684C158.766 212.932 174.574 212.932 184.325 222.684L185.032 221.977C174.89 211.834 158.45 211.834 148.308 221.977L149.015 222.684ZM101.484 270.214L149.015 222.684L148.308 221.977L100.777 269.507L101.484 270.214ZM66.1987 235.636L100.777 270.214L101.484 269.507L66.9058 234.929L66.1987 235.636ZM92.7787 208.349L66.1987 234.929L66.9058 235.636L93.4858 209.056L92.7787 208.349ZM111.141 200.739C104.258 200.739 97.6484 203.479 92.7787 208.349L93.4858 209.056C98.1682 204.374 104.524 201.739 111.141 201.739V200.739Z" fill="url(#paint1_linear_642_4128)" mask="url(#path-1-outside-1_642_4128)"></path><defs><linearGradient id="paint0_linear_642_4128" x1="82.5" y1="43" x2="183.837" y2="159.975" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4128" x1="100.5" y1="53.5" x2="210.094" y2="158.311" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"><a class="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none" href="https://the-guild.dev/graphql/mesh"><p class="font-medium">Mesh</p><svg width="52" height="53" viewBox="0 0 52 53" fill="none" class="mt-8"><g clip-path="url(#mesh-icon)" fill="currentColor"><path d="M52 15.386 44.915 8.3l-.69-.691L37.138.525H14.86L7.774 7.61l-.69.69L0 15.387v22.28l7.085 7.085.69.69 7.086 7.086h22.28l7.085-7.085.69-.69 7.086-7.086v-22.28H52ZM40.173 44.749H11.827a4.05 4.05 0 0 1-4.051-4.05V12.351a4.05 4.05 0 0 1 4.05-4.051h28.347a4.05 4.05 0 0 1 4.051 4.05v28.347a4.05 4.05 0 0 1-4.05 4.051Z"></path><path d="M14.782 19.317v14.416a4.05 4.05 0 0 0 4.05 4.05h14.335a4.05 4.05 0 0 0 4.051-4.05V19.317a4.05 4.05 0 0 0-4.05-4.05H18.832a4.05 4.05 0 0 0-4.051 4.05Zm14.66 3.725v6.966h-6.884v-6.966h6.884Z"></path></g><defs><clipPath id="mesh-icon"><path fill="#fff" transform="translate(0 .525)" d="M0 0h52v52H0z"></path></clipPath></defs></svg><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a><svg width="156" height="174" viewBox="0 0 156 172" fill="none" stroke-width="0.5px" class="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100" preserveAspectRatio="xMidYMid meet"><mask id="path-1-outside-1_642_4203" maskUnits="userSpaceOnUse" x="0" y="-75" width="248" height="248" fill="black"><rect fill="white" y="-75" width="248" height="248"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z"></path></mask><path fill-rule="evenodd" clip-rule="evenodd" d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z" fill="url(#paint0_linear_642_4203)"></path><path d="M246.99 -3.69922L246.637 -3.34566L246.783 -3.19922H246.99V-3.69922ZM213.474 -37.2159L213.827 -37.5695L213.474 -37.2159ZM247 -3.69922H247.5V-4.19922H247V-3.69922ZM247 101.699L247.354 102.053L247.5 101.906V101.699H247ZM213.483 135.216L213.837 135.57L213.483 135.216ZM210.216 138.483L210.57 138.837L210.216 138.483ZM176.699 172V172.5H176.906L177.053 172.354L176.699 172ZM71.3008 172L70.9472 172.354L71.0937 172.5H71.3008V172ZM37.7841 138.483L38.1376 138.13V138.13L37.7841 138.483ZM34.5167 135.216L34.1632 135.57V135.57L34.5167 135.216ZM1 101.699H0.5V101.906L0.646447 102.053L1 101.699ZM1 -3.69922L0.646396 -4.05272L0.5 -3.90628V-3.69922H1ZM34.5071 -37.2159L34.1536 -37.5695L34.1535 -37.5694L34.5071 -37.2159ZM37.7745 -40.4833L38.128 -40.1297L37.7745 -40.4833ZM71.2912 -74V-74.5H71.0841L70.9376 -74.3536L71.2912 -74ZM176.69 -74L177.043 -74.3536L176.897 -74.5H176.69V-74ZM210.206 -40.4833L209.853 -40.1297L210.206 -40.4833ZM140.279 32.5184H140.779V32.0184H140.279V32.5184ZM140.279 65.4698V65.9698H140.779V65.4698H140.279ZM107.711 32.5184V32.0184H107.211V32.5184H107.711ZM107.711 65.4698H107.211V65.9698H107.711V65.4698ZM247.344 -4.05277L213.827 -37.5695L213.12 -36.8624L246.637 -3.34566L247.344 -4.05277ZM247 -4.19922H246.99V-3.19922H247V-4.19922ZM247.5 101.699V-3.69922H246.5V101.699H247.5ZM213.837 135.57L247.354 102.053L246.646 101.346L213.13 134.862L213.837 135.57ZM210.57 138.837L213.837 135.57L213.13 134.862L209.862 138.13L210.57 138.837ZM177.053 172.354L210.57 138.837L209.862 138.13L176.346 171.646L177.053 172.354ZM71.3008 172.5H176.699V171.5H71.3008V172.5ZM37.4305 138.837L70.9472 172.354L71.6543 171.646L38.1376 138.13L37.4305 138.837ZM34.1632 135.57L37.4305 138.837L38.1376 138.13L34.8703 134.862L34.1632 135.57ZM0.646447 102.053L34.1632 135.57L34.8703 134.862L1.35355 101.346L0.646447 102.053ZM0.5 -3.69922V101.699H1.5V-3.69922H0.5ZM34.1535 -37.5694L0.646396 -4.05272L1.3536 -3.34572L34.8607 -36.8624L34.1535 -37.5694ZM37.4209 -40.8368L34.1536 -37.5695L34.8607 -36.8624L38.128 -40.1297L37.4209 -40.8368ZM70.9376 -74.3536L37.4209 -40.8368L38.128 -40.1297L71.6447 -73.6464L70.9376 -74.3536ZM176.69 -74.5H71.2912V-73.5H176.69V-74.5ZM210.56 -40.8368L177.043 -74.3536L176.336 -73.6464L209.853 -40.1297L210.56 -40.8368ZM213.827 -37.5695L210.56 -40.8368L209.853 -40.1297L213.12 -36.8624L213.827 -37.5695ZM191.043 134.706H56.9474V135.706H191.043V134.706ZM209.706 116.043C209.706 126.355 201.355 134.706 191.043 134.706V135.706C201.907 135.706 210.706 126.907 210.706 116.043H209.706ZM209.706 -18.0526V116.043H210.706V-18.0526H209.706ZM191.043 -36.7159C201.355 -36.7159 209.706 -28.3642 209.706 -18.0526H210.706C210.706 -28.9165 201.907 -37.7159 191.043 -37.7159V-36.7159ZM56.9474 -36.7159H191.043V-37.7159H56.9474V-36.7159ZM38.2841 -18.0526C38.2841 -28.3642 46.6358 -36.7159 56.9474 -36.7159V-37.7159C46.0835 -37.7159 37.2841 -28.9165 37.2841 -18.0526H38.2841ZM38.2841 116.043V-18.0526H37.2841V116.043H38.2841ZM56.9474 134.706C46.6358 134.706 38.2841 126.355 38.2841 116.043H37.2841C37.2841 126.907 46.0835 135.706 56.9474 135.706V134.706ZM70.4266 14.8977V83.0905H71.4266V14.8977H70.4266ZM90.09 -4.76562C79.2261 -4.76562 70.4266 4.03383 70.4266 14.8977H71.4266C71.4266 4.58612 79.7784 -3.76562 90.09 -3.76562V-4.76562ZM157.9 -4.76562H90.09V-3.76562H157.9V-4.76562ZM177.563 14.8977C177.563 4.03383 168.763 -4.76562 157.9 -4.76562V-3.76562C168.211 -3.76562 176.563 4.58612 176.563 14.8977H177.563ZM177.563 83.0905V14.8977H176.563V83.0905H177.563ZM157.9 102.754C168.763 102.754 177.563 93.9544 177.563 83.0905H176.563C176.563 93.4021 168.211 101.754 157.9 101.754V102.754ZM90.09 102.754H157.9V101.754H90.09V102.754ZM70.4266 83.0905C70.4266 93.9544 79.2261 102.754 90.09 102.754V101.754C79.7784 101.754 71.4266 93.4021 71.4266 83.0905H70.4266ZM139.779 32.5184V65.4698H140.779V32.5184H139.779ZM107.711 33.0184H140.279V32.0184H107.711V33.0184ZM108.211 65.4698V32.5184H107.211V65.4698H108.211ZM140.279 64.9698H107.711V65.9698H140.279V64.9698Z" fill="url(#paint1_linear_642_4203)" mask="url(#path-1-outside-1_642_4203)"></path><defs><linearGradient id="paint0_linear_642_4203" x1="1" y1="-1" x2="143.007" y2="171.994" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient><linearGradient id="paint1_linear_642_4203" x1="0.999998" y1="0.500001" x2="140.501" y2="171.999" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.6"></stop><stop offset="1" stop-color="white" stop-opacity="0.4"></stop></linearGradient></defs></svg><svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" class="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100"><g filter="url(#filter0_f_711_1774)"><path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"></path></g><defs><filter id="filter0_f_711_1774" x="-0.0000305176" y="-372" width="1244" height="1244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="175" result="effect1_foregroundBlur_711_1774"></feGaussianBlur></filter></defs><style> @supports (-moz-appearance: none) { .firefox-highlight-fix { opacity: 0.3; filter: blur(175px); } } </style></svg></li></ul><p class="text-green-800">Our libraries to support all your GraphQL needs</p><ul class="-mx-12 -my-2 flex h-max grid-cols-6 gap-[22px] overflow-x-auto overflow-y-hidden px-12 py-2 max-sm:-mx-8 max-sm:px-8 sm:grid sm:grid-cols-2 lg:grid-cols-3"><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/codegen" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">Codegen</p><p class="mt-2 text-sm text-green-800">Generation of typed queries, mutations, subscriptions and typed GraphQL resolvers</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/inspector" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">Inspector</p><p class="mt-2 text-sm text-green-800">Schema management tool</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><span role="img" class="inline-flex items-center justify-center text-xs font-medium">I</span></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/envelop" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">Envelop</p><p class="mt-2 text-sm text-green-800">Develop and share plugins that are usable with any GraphQL server framework or schema</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><span role="img" class="inline-flex items-center justify-center text-xs font-medium">E</span></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/sofa-api" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">SOFA</p><p class="mt-2 text-sm text-green-800">Generate RESTful APIs from your GraphQL server</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><span role="img" class="inline-flex items-center justify-center text-xs font-medium">So</span></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/scalars" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">Scalars</p><p class="mt-2 text-sm text-green-800">Common custom GraphQL Scalars for precise type-safe GraphQL schemas</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><span role="img" class="inline-flex items-center justify-center text-xs font-medium">S</span></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li><li class="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"><a href="https://the-guild.dev/graphql/eslint" class="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><p class="font-medium">GraphQL ESLint</p><p class="mt-2 text-sm text-green-800">Customizable ESLint parser, plugin, and rule set for GraphQL</p><div class="h-8 grow"></div><div role="presentation" class="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"><span role="img" class="inline-flex items-center justify-center text-xs font-medium">Esl</span></div><svg width="24" height="24" view-box="0 0 24 24" fill="currentColor" class="absolute bottom-8 right-8"><path d="m15.755 11.1-4.828-4.828L12.2 5l7 7-7 7-1.273-1.272 4.828-4.828H4.8v-1.8h10.955Z"></path></svg></a></li></ul><a class="relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 text-green-1000 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px] bg-primary hover:bg-green-800 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800 dark:bg-neutral-100 dark:text-neutral-800 dark:hover:bg-white dark:hover:text-neutral-900 outline-none transition focus-visible:ring" href="https://github.com/the-guild-org"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div>Explore the Ecosystem</a></section></div></div></div><footer class="relative flex justify-center px-4 py-6 xl:px-[120px] light pt-[72px]"><div class="mx-4 grid w-full max-w-[75rem] grid-cols-1 gap-x-6 text-green-800 max-lg:gap-y-16 sm:grid-cols-4 lg:gap-x-8 xl:gap-x-10 dark:text-neutral-400"><div class="max-lg:col-span-full"><a class="hive-focus -m-1.5 flex rounded p-1.5 text-green-1000 dark:text-white outline-none transition focus-visible:ring" href="/graphql/codegen"><div class="flex items-center gap-3 text-green-1000"><svg width="53" height="53" viewBox="0 0 53 53" fill="currentColor" class="size-8"><path d="m42.212 16.24-5.427-5.427-7.46 7.46a3.997 3.997 0 0 1-5.652 0l-7.46-7.46-5.428 5.427 7.46 7.46a3.997 3.997 0 0 1 0 5.653l-7.46 7.46 5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.428-5.427-7.46-7.46a3.997 3.997 0 0 1 0-5.653l7.46-7.46Z"></path><path d="M26.498 41.672 21.072 47.1l5.427 5.426 5.426-5.426-5.427-5.427ZM26.499.525 21.073 5.95l5.426 5.426 5.426-5.426L26.5.525ZM47.074 21.101l-5.426 5.427 5.426 5.426 5.426-5.426-5.426-5.427ZM5.926 21.1.5 26.528l5.426 5.426 5.426-5.426-5.426-5.426Z"></path></svg><span class="text-2xl/[1.2] font-medium tracking-[-0.16px]">Codegen</span></div></a><p class="mt-6 lg:mt-8">End-to-end type safety</p></div><div class="col-span-full grid grid-flow-row grid-cols-2 justify-stretch gap-6 text-sm sm:col-span-4 sm:grid-cols-3 lg:col-span-3 lg:pb-12 lg:text-base"><div class="flex flex-col gap-y-3 text-nowrap lg:gap-y-4"><h3 class="font-medium dark:text-white">Products</h3><ul class="contents"><li><a title="Schema registry for your GraphQL workflows" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive">Hive</a></li><li><a title="A fully-featured GraphQL gateway framework" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/mesh">Mesh</a></li><li><a title="A fully-featured, simple to set up, performant and extendable server" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/yoga-server">Yoga</a></li><li><a title="Generation of typed queries, mutations, subscriptions and typed GraphQL resolvers" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/codegen">Codegen</a></li><li><a title="Schema management tool" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/inspector">Inspector</a></li><li><a title="Common custom GraphQL Scalars for precise type-safe GraphQL schemas" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/scalars">Scalars</a></li><li><a title="Develop and share plugins that are usable with any GraphQL server framework or schema" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/envelop">Envelop</a></li><li><a title="Customizable ESLint parser, plugin, and rule set for GraphQL" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/eslint">GraphQL ESLint</a></li><li><a title="Generate RESTful APIs from your GraphQL server" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/sofa-api">SOFA</a></li></ul></div><div class="flex flex-col gap-[inherit]"><div class="flex flex-col gap-y-3 text-nowrap lg:gap-y-4"><h3 class="font-medium dark:text-white">Developer</h3><ul class="contents"><li><a title="Read the docs" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="/graphql/codegen/docs">Documentation</a></li><li><a title="Check Hive status" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://status.graphql-hive.com/">Hive Status</a></li><li><a title="Read most recent developments from GraphQL Hive" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive/product-updates">Hive Updates</a></li><li><a title="Read our blog" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/blog">Blog</a></li></ul></div><div class="flex flex-col gap-y-3 text-nowrap lg:gap-y-4"><h3 class="font-medium dark:text-white">Resources</h3><ul class="contents"><li><a title="Privacy Policy" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive/privacy-policy.pdf">Privacy Policy</a></li><li><a title="Terms of Use" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive/terms-of-use.pdf">Terms of Use</a></li></ul></div></div><div class="flex flex-col gap-[inherit]"><div class="flex flex-col gap-y-3 text-nowrap lg:gap-y-4"><h3 class="font-medium dark:text-white">Company</h3><ul class="contents"><li><a title="Learn more about us" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/about-us">About</a></li><li><a title="Brand Assets" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/logos">Brand Assets</a></li><li><a title="Newsletter" class="hive-focus -m-2 block rounded p-2 hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/newsletter">Newsletter</a></li></ul></div><a href="https://the-guild.dev/graphql/hive#pricing" class="hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100">Pricing</a><a class="hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100" href="https://the-guild.dev/contact">Contact Us</a></div><a href="https://cloudsecurityalliance.org/star/registry/software-products-guild-ltd-the-guild/services/graphql-hive" target="_blank" rel="noreferrer noopener" class="hive-focus w-fit rounded-full focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-[rgb(var(--nextra-bg))] sm:col-start-[-1] lg:col-start-[-2]"><svg fill="#00559a" viewBox="0 0 137.2 137.2" class="size-20 lg:size-[120px] dark:opacity-95"><title>Cloud Security Alliance Star Level One Badge</title><circle cx="68.95" cy="68.63" r="55.63" fill="#fff"></circle><path d="M68.6 0a68.6 68.6 0 1 0 68.6 68.6A68.68 68.68 0 0 0 68.6 0Zm0 120.6a52 52 0 1 1 52-52 52.05 52.05 0 0 1-52 52Z"></path><path d="m114 51.36.24-1.48v-.24a4 4 0 0 1-.21.38l-.88 1.4-.39-1.4a2.27 2.27 0 0 1-.09-.38v.24l-.24 1.48h-.28l.36-2.22h.33l.36 1.33c0 .13.08.31.1.4 0-.09.15-.27.22-.4l.81-1.33h.32l-.37 2.22Zm-2.67-2-.33 2h-.3l.33-2h-.72v-.23h1.73v.23ZM76.54 55.5v-.08ZM29.55 60.08a6.94 6.94 0 0 0 2.25 1.33 28.85 28.85 0 0 0 3.3 1c.71.17 1.29.33 1.75.48a6.69 6.69 0 0 1 1.07.47 1.42 1.42 0 0 1 .53.49.88.88 0 0 1 .09.56 1.35 1.35 0 0 1-.76 1.1 6 6 0 0 1-2.29.31 7.09 7.09 0 0 1-1.59-.19 10.7 10.7 0 0 1-1.67-.5 15.73 15.73 0 0 1-1.56-.7 9.8 9.8 0 0 1-1.28-.8l-3.61 4.76a14.31 14.31 0 0 0 3.88 1.89 15.75 15.75 0 0 0 5 .76 16 16 0 0 0 3.68-.4 9.77 9.77 0 0 0 3-1.25 7.38 7.38 0 0 0 2.19-2.19 8.08 8.08 0 0 0 1.14-3.2 6.61 6.61 0 0 0-.1-2.66 4.05 4.05 0 0 0-1.16-1.93 5.75 5.75 0 0 0-1-.74H28.54a4.1 4.1 0 0 0 1.01 1.41ZM34.38 55a1.44 1.44 0 0 1 .58-1 3.28 3.28 0 0 1 1.87-.38 8.7 8.7 0 0 1 3.08.53 9.28 9.28 0 0 1 1.93 1c.33.22.75.57.75.57l.46-.57L46.24 51a12 12 0 0 0-3.56-1.88 15.72 15.72 0 0 0-4.81-.65 12.35 12.35 0 0 0-3.63.5 9.44 9.44 0 0 0-2.92 1.41 7.5 7.5 0 0 0-2.05 2.19 7.36 7.36 0 0 0-1 2.64h6.08ZM51.95 71h6.07l1.7-12.06h-6.07L51.95 71zM60.36 54.39h6.13l.74-5.29H48.9l-.74 5.29h6.13l-.16 1.11h6.07l.16-1.11zM76.57 55.42v.08H82l-1.42-6.4h-6.15l-3.22 6.4h5.33ZM88.55 71h6l1-7.38H98l2.52 7.38h6.8l-3.21-8.35a8.35 8.35 0 0 0 3.22-2.38 6.88 6.88 0 0 0 .82-1.33h-17.9ZM96.88 54h3.68a2.38 2.38 0 0 1 2 .66 1.77 1.77 0 0 1 .36.8H109a6.75 6.75 0 0 0-.22-2.57 4.56 4.56 0 0 0-1.42-2.2 6.25 6.25 0 0 0-2.53-1.24 14 14 0 0 0-3.44-.39h-9.76l-.9 6.4h6ZM82.74 59H69.47L63.4 71h6.51l1.73-3.81h6.57l.65 3.81h6.57Zm-5.32 2.92.38 3.29-2.37-2-3.13 2L74 62l-2.42-1.94h3.29l.47-1.06H77l.18 1h3.3ZM76.58 56.41l-1.24 2.58H77l-.42-2.58z"></path><path d="M11.16 60.63a3.54 3.54 0 0 0 1.05-1.94c.15-.8-.12-1.44-.86-1.57s-1.17.62-1.58 1.46-1 1.78-2.24 1.56A1.94 1.94 0 0 1 6 57.61a4 4 0 0 1 .85-1.87l.94.17a3.75 3.75 0 0 0-1 1.86c-.13.76.11 1.35.8 1.48.85.15 1.13-.62 1.51-1.41s1-1.84 2.32-1.61A2 2 0 0 1 13 58.85a4.23 4.23 0 0 1-.89 1.95ZM8.18 52.18l-.63 2.23-.79-.22 1.49-5.33.79.22-.62 2.23L14.28 53l-.24.87ZM9.23 46.22l.31-.81 7.46-.18-.35.91h-2.08l-1.11 2.9L15 50.5l-.33.86Zm3.62 2.28.89-2.32h-3.37q.68.6 1.38 1.26ZM11.25 41.39l.86-1.66a3.94 3.94 0 0 1 1.2-1.56 1.76 1.76 0 0 1 1.87-.1 1.85 1.85 0 0 1 1 1.54 2.11 2.11 0 0 1-.11.83l3.72-.55-.51 1-3.6.5-.54 1 2.63 1.36-.42.81Zm3.8-.37a2.18 2.18 0 0 0 .35-1.35 1 1 0 0 0-.57-.76 1.09 1.09 0 0 0-1.14.05 3 3 0 0 0-.88 1.2l-.42.8 2.12 1.1ZM15.92 33.22l.52-.74 5 3.54 1.9-2.65.67.47-2.43 3.4ZM19.37 28.57l2.61-3 .62.53-2 2.34 1.58 1.37 1.77-2 .6.51-1.77 2 1.8 1.55 2.07-2.39.62.53-2.67 3.07ZM22.75 24.67l.7-.67 3.73 1.81c.58.27 1.15.55 1.76.86-.27-.62-.52-1.22-.78-1.83L26.6 21l.68-.64 2.82 6.84-.67.64ZM28.44 19.48 31.59 17l.51.65-2.44 1.88 1.28 1.67 2.14-1.66.48.63-2.14 1.65 1.45 1.88 2.51-1.93.5.65L32.66 25ZM33.12 16l.77-.49 3.26 5.14 2.75-1.75.44.69-3.52 2.23ZM43.29 10.32a3.48 3.48 0 0 1 4.64 1.86 3.51 3.51 0 1 1-4.64-1.86Zm2.5 5.75a2.6 2.6 0 0 0 1.31-3.52 2.61 2.61 0 1 0-4.78 2.07 2.61 2.61 0 0 0 3.47 1.45ZM50.33 15l-1.89-6.63.83-.23L53.1 11q.8.6 1.59 1.23c-.18-.57-.38-1.24-.56-1.89L53.2 7l.8-.22 1.89 6.65-.82.24-3.84-2.91c-.52-.39-1.06-.81-1.58-1.22l.56 1.89 1 3.34ZM56.24 6.35l3.93-.66.14.81-3 .51.34 2.07 2.67-.44.13.78-2.66.44.39 2.35 3.12-.52.14.8-4 .68ZM62.17 8.24a.62.62 0 1 1 .68.56.62.62 0 0 1-.68-.56Zm.9 3a.62.62 0 0 1 .68.56.62.62 0 0 1-1.24.12.62.62 0 0 1 .56-.71ZM67.49 10.63a3.67 3.67 0 0 0 2.08.74c.82 0 1.4-.35 1.42-1.11s-.8-1-1.7-1.32-1.91-.71-1.89-2 .92-1.91 2.27-1.89a3.9 3.9 0 0 1 2 .55v1a3.7 3.7 0 0 0-2-.67c-.77 0-1.32.31-1.33 1 0 .86.79 1 1.62 1.27 1 .3 2 .71 2 2s-.95 2-2.34 2a4.43 4.43 0 0 1-2.07-.58ZM73.71 5.35l4 .43-.09.82-3.07-.34-.23 2.09 2.69.3-.09.78-2.68-.29L74 11.5l3.15.35-.09.81-4.06-.44ZM79.51 6.08l.89.18-1.22 6 3.2.65-.16.81-4.09-.84ZM85.17 7.33l3.91 1.18-.23.79-3-.92-.64 2.14 2.68.81-.23.75-2.68-.8-.98 2.93-.83-.21ZM89.37 11.91l2.12.83-.28.71-2.12-.82ZM95.88 11.32l.78.38-.44 7.46-.88-.42.15-2.07-2.8-1.36-1.55 1.39-.83-.4Zm-2.56 3.41 2.23 1.09.12-1.54c0-.59.09-1.23.15-1.82l-1.36 1.27ZM97.43 18.28a3.75 3.75 0 0 0 1.4 1.72c.7.43 1.39.42 1.79-.22s-.14-1.31-.77-2-1.27-1.59-.6-2.66a1.93 1.93 0 0 1 2.91-.45 3.85 3.85 0 0 1 1.41 1.48l-.5.81a3.69 3.69 0 0 0-1.36-1.6c-.66-.41-1.3-.41-1.67.19s.15 1.27.73 1.92 1.34 1.64.64 2.75a2 2 0 0 1-3 .48 4.19 4.19 0 0 1-1.48-1.56ZM102 21.21a3.62 3.62 0 0 0 1.26 1.79c.65.5 1.34.55 1.8-.05s0-1.31-.58-2.07-1.12-1.7-.35-2.7a1.94 1.94 0 0 1 2.94-.18 3.93 3.93 0 0 1 1.26 1.62l-.57.75a3.74 3.74 0 0 0-1.21-1.72c-.61-.47-1.25-.53-1.68 0s0 1.28.56 2 1.17 1.75.37 2.8a2 2 0 0 1-3 .19 4.27 4.27 0 0 1-1.38-1.64ZM110.16 20.66l2.93 2.69-.55.61-2.27-2.09-1.42 1.55 2 1.82-.54.59-2-1.83-1.61 1.75 2.3 2.14-.56.6-3-2.75ZM110.21 28.21a3.65 3.65 0 0 0 .87 2c.55.61 1.22.79 1.78.28s.23-1.29-.19-2.14-.78-1.88.15-2.72a2 2 0 0 1 2.93.36 3.85 3.85 0 0 1 1 1.82l-.71.64a3.65 3.65 0 0 0-.87-1.91c-.52-.58-1.13-.76-1.65-.28s-.21 1.26.18 2c.46.94.82 1.94-.15 2.83a2 2 0 0 1-3-.37 4.43 4.43 0 0 1-1-1.91ZM113.81 32.29a3.64 3.64 0 0 0 .68 2.09c.49.66 1.14.9 1.74.45s.35-1.27 0-2.15-.61-1.94.4-2.69a1.93 1.93 0 0 1 2.88.63 3.93 3.93 0 0 1 .78 1.9l-.77.57a3.69 3.69 0 0 0-.68-2c-.47-.62-1.06-.85-1.63-.43s-.32 1.24 0 2.06c.37 1 .64 2-.41 2.79a2 2 0 0 1-3-.65 4.12 4.12 0 0 1-.8-2ZM120.33 37.06c.23-.5.47-1 .72-1.49-.35.22-.8.49-1.29.77l-3.37 2-.44-.76 6-3.46.43.76-1.81 3.88 4.27.37.43.75-6 3.46-.46-.79 3.38-1.94c.48-.29.94-.54 1.3-.74-.55 0-1.1-.07-1.64-.12l-2.63-.23ZM126.18 41.89l1.58 3.67-.76.32-1.22-2.83-1.93.83 1.07 2.48-.73.31-1.06-2.48-2.19.94 1.25 2.87-.75.33-1.61-3.75ZM121.85 49.38l6.6-2 .25.82-2.82 3.88c-.39.54-.79 1.08-1.2 1.61.57-.18 1.23-.4 1.87-.59l3.32-1 .26.84-6.61 2-.25-.82 2.83-3.88c.38-.54.79-1.08 1.19-1.61-.57.19-1.24.4-1.87.59l-3.33 1ZM130.13 57l-.41-2.28.81-.14 1 5.45-.8.15-.42-2.28-6 1.08-.16-.9ZM6.73 79a3.62 3.62 0 0 0-.28 2.19c.16.81.64 1.3 1.38 1.15s.86-1 .93-1.94.29-2 1.52-2.26 2.07.49 2.33 1.81a3.82 3.82 0 0 1-.11 2l-.93.19a3.8 3.8 0 0 0 .23-2.09c-.16-.76-.59-1.22-1.28-1.08s-.83 1-.89 1.85c-.09 1-.28 2.09-1.57 2.35a2 2 0 0 1-2.42-1.86 4.14 4.14 0 0 1 .12-2.15ZM13.22 83.21 14.36 87l-.78.24-.88-3-2 .6.78 2.59-.76.23-.77-2.59-2.28.68.91 3-.79.23-1.16-3.9ZM16 91a4.15 4.15 0 0 1 .29 2l-.92.38a3.35 3.35 0 0 0-.15-2.06 2.63 2.63 0 0 0-3.54-1.44 2.64 2.64 0 0 0-1.46 3.58A3.09 3.09 0 0 0 11.65 95l-.93.39a3.92 3.92 0 0 1-1.26-1.68A3.47 3.47 0 0 1 11.35 89 3.49 3.49 0 0 1 16 91ZM13.92 95.55l3.19-1.77.44.79-3.11 1.72a3.8 3.8 0 0 0-1.44 1.1 1.68 1.68 0 0 0 .06 1.83 1.67 1.67 0 0 0 1.51 1 3.66 3.66 0 0 0 1.65-.62l3.15-1.73.42.77-3.1 1.71a4.26 4.26 0 0 1-2.31.75 2.7 2.7 0 0 1-2.07-1.52 2.65 2.65 0 0 1-.18-2.55 4.17 4.17 0 0 1 1.79-1.48ZM20.5 99.7l1.08 1.53a3.83 3.83 0 0 1 .83 1.77 1.74 1.74 0 0 1-.76 1.71 1.83 1.83 0 0 1-1.84.21 2 2 0 0 1-.69-.48L17.91 108l-.64-.89 1.2-3.43-.67-1-2.42 1.71-.52-.74Zm-1.42 3.55a2.14 2.14 0 0 0 1 .92 1 1 0 0 0 .94-.16 1.07 1.07 0 0 0 .48-1 3 3 0 0 0-.67-1.34l-.52-.74-2 1.38ZM24.08 104.57l.58.7-5.34 4.38-.57-.7ZM26.17 108.22l-1.6-1.69.6-.56L29 110l-.59.57-1.6-1.69-4.42 4.19-.62-.66ZM28.65 114.72l.43-4.61.8.69-.2 2c-.06.52-.11 1-.18 1.58l1.54-.42 2-.52.77.66-4.46 1.15-2 2.38-.69-.59ZM36.83 117.19l-1.95-1.26.45-.69 4.66 3-.44.69-1.95-1.26-3.31 5.12-.76-.49ZM40.67 118.61l1.67.85a3.81 3.81 0 0 1 1.56 1.18 1.72 1.72 0 0 1 .1 1.86 1.8 1.8 0 0 1-1.52 1 2.18 2.18 0 0 1-.84-.1l.6 3.72-1-.5-.54-3.6-1.05-.53-1.34 2.64-.81-.41Zm.4 3.8a2.09 2.09 0 0 0 1.35.33 1 1 0 0 0 .76-.58 1.07 1.07 0 0 0-.06-1.13 3 3 0 0 0-1.22-.87l-.79-.41-1.11 2.13ZM44.64 124.66l1.28-3.43.85.32-1.24 3.34a3.94 3.94 0 0 0-.38 1.76A1.69 1.69 0 0 0 46.4 128a1.66 1.66 0 0 0 1.81-.21 3.69 3.69 0 0 0 .85-1.54l1.26-3.37.83.3-1.25 3.33a4.21 4.21 0 0 1-1.26 2.07 3 3 0 0 1-4.37-1.58 4.23 4.23 0 0 1 .37-2.34ZM50.81 128.78a3.53 3.53 0 0 0 1.84 1.22c.8.21 1.45 0 1.64-.74s-.52-1.26-1.29-1.69-1.69-1.14-1.37-2.36a1.93 1.93 0 0 1 2.64-1.3 3.75 3.75 0 0 1 1.79 1l-.24.92a3.57 3.57 0 0 0-1.82-1.12c-.75-.2-1.36 0-1.54.67-.22.83.52 1.17 1.28 1.61s1.75 1.17 1.42 2.44a2 2 0 0 1-2.73 1.36 4.29 4.29 0 0 1-1.88-1ZM59 125.85l-2.29-.36.13-.81 5.48.87-.13.81-2.32-.36-1 6-.89-.14ZM67.44 125.82h.87l2.74 7h-1l-.74-1.94-3.11-.05-.81 1.91h-.93Zm-.88 4.18H69l-.54-1.44c-.22-.55-.43-1.15-.64-1.72-.22.56-.46 1.14-.71 1.73ZM72.09 131.24a3.53 3.53 0 0 0 2.14.52c.82-.07 1.37-.49 1.3-1.24s-.9-1-1.83-1.14-2-.51-2.08-1.76.72-2 2.06-2.12a3.9 3.9 0 0 1 2 .34l.08 1a3.7 3.7 0 0 0-2-.46c-.77.07-1.28.45-1.22 1.15.08.86.89.93 1.75 1.09 1 .2 2 .51 2.16 1.82s-.75 2.08-2.13 2.2a4.26 4.26 0 0 1-2.12-.36ZM77.76 130.68a3.62 3.62 0 0 0 2.18.32c.81-.15 1.32-.61 1.18-1.36s-1-.88-1.92-1-2-.32-2.23-1.56.53-2 1.86-2.29a3.83 3.83 0 0 1 2 .15l.17.94a3.63 3.63 0 0 0-2.08-.27c-.77.13-1.24.56-1.12 1.25.16.85 1 .85 1.84.93 1 .1 2.08.32 2.32 1.62s-.56 2.13-1.92 2.38a4.23 4.23 0 0 1-2.14-.17ZM83 127.84l-1-3.51.87-.25 1 3.41a4 4 0 0 0 .76 1.64 1.72 1.72 0 0 0 1.81.34 1.67 1.67 0 0 0 1.32-1.25 3.73 3.73 0 0 0-.24-1.75l-1-3.45.84-.25 1 3.41a4.28 4.28 0 0 1 .23 2.41 3.06 3.06 0 0 1-4.47 1.31 4.2 4.2 0 0 1-1.12-2.06ZM88.5 122.32l1.73-.72a3.9 3.9 0 0 1 1.91-.42 1.74 1.74 0 0 1 1.5 1.12 1.83 1.83 0 0 1-.19 1.84 2.41 2.41 0 0 1-.62.57l3.21 2-1 .42-3.09-1.91-1.08.45 1.13 2.68-.84.35Zm3.16 2.16a2.18 2.18 0 0 0 1.13-.81 1 1 0 0 0 0-1 1 1 0 0 0-.89-.69 3.09 3.09 0 0 0-1.46.36l-.83.34.92 2.2ZM95.85 119l.76-.42 5.84 4.66-.86.47-1.6-1.31-2.72 1.5.24 2.07-.81.44Zm1.31 4 2.17-1.2-1.18-1c-.46-.38-1-.79-1.4-1.18.09.6.17 1.22.24 1.85ZM103.62 122.42l-4-5.61.7-.5 4.58 1.43c.64.19 1.28.4 1.91.61-.35-.48-.77-1-1.16-1.59l-2-2.82.72-.51 4 5.61-.7.5-4.59-1.42c-.63-.2-1.27-.4-1.91-.62.36.48.78 1 1.17 1.59l2 2.82ZM107.64 110.32a4 4 0 0 1 1.76-.95l.67.73a3.34 3.34 0 0 0-1.87.84 2.72 2.72 0 1 0 3.71 4 3 3 0 0 0 1-1.85l.68.74a3.88 3.88 0 0 1-1.15 1.76 3.55 3.55 0 1 1-4.8-5.24ZM109.92 108.24l2.67-3 .61.55-2.06 2.29 1.56 1.4 1.8-2 .59.53-1.8 2 1.77 1.59 2.11-2.35.61.54-2.72 3ZM120 99.76l1.65 2.1 2.18-.42-.6.9-1.14.22a2.37 2.37 0 0 1-.38 2.22 2 2 0 0 1-3.71-1.15v-.26h-.3a2 2 0 0 1-1.58-.22 1.77 1.77 0 0 1 2-2.92 1.83 1.83 0 0 1 .74 1.63v.47l1.89-.36-1.24-1.55Zm-2.34 2.87.42-.08V102a1.13 1.13 0 0 0-.44-1 .84.84 0 0 0-1.21.29.83.83 0 0 0 .2 1.2 1.29 1.29 0 0 0 .99.14Zm3.57.13-2.43.47v.42a1.21 1.21 0 0 0 2.32.69 1.47 1.47 0 0 0 .07-1.58ZM119.35 95.18l.8-1.69a3.83 3.83 0 0 1 1.14-1.59 1.74 1.74 0 0 1 1.86-.17 1.83 1.83 0 0 1 1.09 1.49 2.17 2.17 0 0 1-.08.84l3.7-.69-.47 1-3.58.63-.5 1.07 2.69 1.25-.39.82Zm3.79-.5a2.19 2.19 0 0 0 .29-1.36 1 1 0 0 0-.6-.74 1.05 1.05 0 0 0-1.13.09 3.06 3.06 0 0 0-.84 1.24l-.38.81 2.15 1ZM121.83 89.68l.32-.85 6.44 2.5-.32.85ZM127.85 89.29a3.65 3.65 0 0 0 1.3-1.78c.24-.78.06-1.45-.66-1.68s-1.24.47-1.75 1.26-1.22 1.63-2.42 1.25a1.94 1.94 0 0 1-1.18-2.7 3.86 3.86 0 0 1 1.08-1.74l.92.28a3.62 3.62 0 0 0-1.21 1.73c-.23.73-.07 1.35.6 1.56s1.2-.47 1.67-1.2 1.25-1.7 2.51-1.3a2 2 0 0 1 1.22 2.79 4.24 4.24 0 0 1-1.13 1.83ZM124.17 82.53l.19-.89 3.06.64-2.42-3.61.23-1.1 2.5 3.69 4.27-2.54-.24 1.16-4.15 2.43 3.49.73-.19.88Z" fill="#fff"></path><path d="M26.34 76.14h1.49v10h5.38v1.35h-6.87ZM35.1 76.14h6.58v1.35h-5.09V81h4.46v1.3h-4.46v3.92h5.23v1.35H35.1ZM42.73 76.14h1.6l2.43 6.39 1.11 3c.38-1 .76-2 1.15-3.07l2.44-6.34H53l-4.36 11.41h-1.52ZM54.53 76.14h6.57v1.35H56V81h4.45v1.3H56v3.92h5.23v1.35h-6.7ZM63.35 76.14h1.5v10h5.38v1.35h-6.88ZM81.22 76a5.87 5.87 0 1 1-5.79 5.87A5.72 5.72 0 0 1 81.22 76Zm0 10.35a4.49 4.49 0 1 0-4.29-4.48 4.3 4.3 0 0 0 4.29 4.45ZM89.07 87.53V76.14h1.42l4.77 6.33c.66.86 1.32 1.76 2 2.66v-8.99h1.45v11.39h-1.46l-4.76-6.32c-.66-.87-1.32-1.76-2-2.66v8.96ZM101.38 76.14H108v1.35h-5.08V81h4.45v1.3h-4.45v3.92h5.22v1.35h-6.71Z"></path></svg></a></div><div class="col-span-full flex flex-row flex-wrap justify-between gap-x-[inherit] gap-y-8 lg:w-full lg:pb-2 lg:pt-8"><div class="flex gap-6 lg:order-1"><a title="Check our GitHub account" class="hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://github.com/the-guild-org"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18" class="h-5 w-auto"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg></a><a title="Visit our Twitter" class="hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://twitter.com/TheGuildDev"><svg viewBox="0 0 1200 1227" fill="currentColor" class="h-5 w-auto"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"></path></svg></a><a title="Visit our LinkedIn" class="hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://linkedin.com/company/the-guild-software"><svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-auto"><path d="M13.3337 6.66675C14.6597 6.66675 15.9315 7.19353 16.8692 8.13121C17.8069 9.0689 18.3337 10.3407 18.3337 11.6667V17.5001H15.0003V11.6667C15.0003 11.2247 14.8247 10.8008 14.5122 10.4882C14.1996 10.1757 13.7757 10.0001 13.3337 10.0001C12.8916 10.0001 12.4677 10.1757 12.1551 10.4882C11.8426 10.8008 11.667 11.2247 11.667 11.6667V17.5001H8.33366V11.6667C8.33366 10.3407 8.86044 9.0689 9.79813 8.13121C10.7358 7.19353 12.0076 6.66675 13.3337 6.66675ZM1.66699 7.50008H5.00033V17.5001H1.66699V7.50008Z"></path><path d="M3.33366 5.00008C4.25413 5.00008 5.00033 4.25389 5.00033 3.33341C5.00033 2.41294 4.25413 1.66675 3.33366 1.66675C2.41318 1.66675 1.66699 2.41294 1.66699 3.33341C1.66699 4.25389 2.41318 5.00008 3.33366 5.00008Z"></path></svg></a><a title="Reach us on Discord" class="hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://discord.com/invite/xud7bH9"><svg width="24" height="24" fill="currentColor" viewBox="0 5 30.67 23.25" class="h-5 w-auto"><title>Discord</title><path d="M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z"></path></svg></a><a title="Watch Our Videos" class="hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd"><svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-auto"><path d="M9.99967 2.66675C7.20901 2.66675 3.58691 3.36597 3.58691 3.36597L3.5778 3.37638C2.30678 3.57966 1.33301 4.67183 1.33301 6.00008V10.0001V10.0014V14.0001V14.0014C1.33425 14.6357 1.56159 15.2489 1.97421 15.7307C2.38683 16.2125 2.95769 16.5315 3.58431 16.6303L3.58691 16.6342C3.58691 16.6342 7.20901 17.3347 9.99967 17.3347C12.7903 17.3347 16.4124 16.6342 16.4124 16.6342L16.4137 16.6329C17.041 16.5343 17.6126 16.2151 18.0255 15.7327C18.4384 15.2503 18.6657 14.6364 18.6663 14.0014V14.0001V10.0014V10.0001V6.00008C18.6654 5.3655 18.4382 4.75205 18.0256 4.26995C17.6129 3.78786 17.0419 3.46872 16.415 3.36987L16.4124 3.36597C16.4124 3.36597 12.7903 2.66675 9.99967 2.66675ZM7.99967 6.93237L13.333 10.0001L7.99967 13.0678V6.93237Z"></path></svg></a></div><p class="text-sm">© 2024 The Guild</p></div></div><svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360" fill="none" class="pointer-events-none absolute bottom-0 left-0 hidden mix-blend-multiply lg:block dark:opacity-5 dark:mix-blend-normal"><path d="M360 159.793a39.152 39.152 0 00-11.468-27.672l-56.99-56.99-6.673-6.673-56.99-56.99A39.153 39.153 0 00200.207 0H0v75.131h226.157c32.428 0 58.712 26.284 58.712 58.712V360H360V159.793z" fill="url(#paint0_linear_711_2541)"></path><defs><linearGradient id="paint0_linear_711_2541" x1="180" y1="-0.00000786805" x2="180" y2="360" gradientUnits="userSpaceOnUse"><stop stop-color="#C1D3D7"></stop><stop offset="1" stop-color="#86B6C1"></stop></linearGradient></defs></svg></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"ssg":[{"title":"Add","readme":"","createdAt":"2019-03-18T15:54:22.435Z","updatedAt":"2024-06-13T10:03:13.074Z","description":"GraphQL Code Generator plugin for adding custom content to your output file","linkHref":"/plugins/other/add","weeklyNPMDownloads":2889926,"icon":"graphql","tags":["plugin"]},{"title":"C# Operations","readme":"","createdAt":"2020-04-17T14:48:42.816Z","updatedAt":"2024-09-05T15:10:05.074Z","description":"GraphQL Code Generator plugin for generating CSharp code based on GraphQL operations","linkHref":"/plugins/c-sharp/c-sharp-operations","weeklyNPMDownloads":2526,"icon":"csharp","tags":["plugin","csharp"]},{"title":"Flow Operations","readme":"","createdAt":"2019-03-18T15:54:41.315Z","updatedAt":"2024-09-05T15:10:08.086Z","description":"GraphQL Code Generator plugin for generating Flow types for GraphQL operations (query/mutation/subscription/fragment)","linkHref":"/plugins/flow/flow-operations","weeklyNPMDownloads":13914,"icon":"flow","tags":["plugin","flow"]},{"title":"Flow Resolvers","readme":"","createdAt":"2019-03-18T15:54:41.268Z","updatedAt":"2024-09-05T15:10:08.415Z","description":"GraphQL Code Generator plugin for generating Flow types for GraphQL resolvers signature","linkHref":"/plugins/flow/flow-resolvers","weeklyNPMDownloads":9813,"icon":"flow","tags":["plugin","flow"]},{"title":"Fragment Matcher","readme":"","createdAt":"2019-03-18T15:54:22.389Z","updatedAt":"2024-02-06T14:57:00.701Z","description":"graphql-code-generate plugin for generating fragments matcher introspection file","linkHref":"/plugins/other/fragment-matcher","weeklyNPMDownloads":518923,"icon":"graphql","tags":["plugin","apollo"]},{"title":"GraphQL Modules Preset","readme":"","createdAt":"2020-09-06T15:41:38.988Z","updatedAt":"2024-11-22T20:42:25.973Z","description":"GraphQL Code Generator preset for modularized schema","linkHref":"/plugins/presets/graphql-modules-preset","weeklyNPMDownloads":28093,"icon":"graphql_modules","tags":["preset","utilities","resolvers"]},{"title":"Hasura Allow List","readme":"","createdAt":"2022-02-09T11:10:01.964Z","updatedAt":"2024-09-05T15:10:07.875Z","description":"GraphQL Code Generator plugin to generate hasura allow liste metadata from graphql files","linkHref":"/plugins/other/hasura-allow-list","weeklyNPMDownloads":2826,"icon":"hasura","tags":["plugin","utilities","hasura"]},{"title":"Import Types Preset","readme":"","createdAt":"2019-08-29T05:48:23.310Z","updatedAt":"2024-09-05T15:10:26.972Z","description":"GraphQL Code Generator preset for importing types to operation file","linkHref":"/plugins/presets/import-types-preset","weeklyNPMDownloads":154004,"icon":"codegen","tags":["preset","utilities"]},{"title":"Client preset","readme":"","createdAt":"2022-08-23T17:02:50.140Z","updatedAt":"2024-11-22T20:42:26.784Z","description":"GraphQL Code Generator preset for client.","linkHref":"/plugins/presets/preset-client","weeklyNPMDownloads":2009502,"icon":"codegen","tags":["preset","next","react","urql","typescript","vue"]},{"title":"Introspection","readme":"","createdAt":"2019-03-18T15:54:23.448Z","updatedAt":"2024-02-20T17:55:16.397Z","description":"GraphQL Code Generator plugin for generating an introspection JSON file for a GraphQLSchema","linkHref":"/plugins/other/introspection","weeklyNPMDownloads":752466,"icon":"graphql","tags":["plugin","utilities"]},{"title":"Java","readme":"","createdAt":"2019-04-17T08:46:19.632Z","updatedAt":"2024-09-05T15:10:07.627Z","description":"GraphQL Code Generator plugin for generating Java code based on a GraphQL schema","linkHref":"/plugins/java/java","weeklyNPMDownloads":1935,"icon":"java","tags":["plugin","java"]},{"title":"Java Apollo Android","readme":"","createdAt":"2019-05-28T14:53:46.697Z","updatedAt":"2024-09-05T15:10:06.777Z","description":"GraphQL Code Generator plugin for generating Java classes for Apollo-Android","linkHref":"/plugins/java/java-apollo-android","weeklyNPMDownloads":1818,"icon":"java","tags":["plugin","java","apollo","android"]},{"title":"Java Resolvers","readme":"","createdAt":"2019-04-14T15:45:37.947Z","updatedAt":"2024-09-05T15:10:09.783Z","description":"GraphQL Code Generator plugin for generating resolvers signature for Java backends","linkHref":"/plugins/java/java-resolvers","weeklyNPMDownloads":371,"icon":"java","tags":["plugin","java"]},{"title":"JSDoc","readme":"","createdAt":"2020-05-25T09:16:22.539Z","updatedAt":"2024-09-05T15:10:08.472Z","description":"GraphQL Code Generator plugin for generating JSDoc based types for GraphQL queries, mutations, subscriptions and fragments","linkHref":"/plugins/other/jsdoc","weeklyNPMDownloads":5587,"icon":"graphql","tags":["plugin","jsdoc"]},{"title":"Kotlin","readme":"","createdAt":"2019-10-02T18:51:45.348Z","updatedAt":"2024-09-05T15:10:08.726Z","description":"GraphQL Code Generator plugin for generating Kotlin code based on a GraphQL schema","linkHref":"/plugins/java/kotlin","weeklyNPMDownloads":4371,"icon":"java","tags":["plugin","java","kotlin"]},{"title":"Named Operations Object","readme":"","createdAt":"2020-05-18T15:04:50.975Z","updatedAt":"2024-09-05T15:10:16.755Z","description":"GraphQL Code Generator plugin for generating an enum with all loaded operations, for simpler and type-safe access","linkHref":"/plugins/typescript/named-operations-object","weeklyNPMDownloads":97647,"icon":"typescript","tags":["plugin","typescript"]},{"title":"Near Operation File Preset","readme":"","createdAt":"2019-05-12T15:45:12.536Z","updatedAt":"2024-09-05T15:10:27.955Z","description":"GraphQL Code Generator preset for generating operation code near the operation file","linkHref":"/plugins/presets/near-operation-file-preset","weeklyNPMDownloads":444510,"icon":"codegen","tags":["preset","utilities"]},{"title":"Reason Client","readme":"# TSDX Bootstrap\n\nThis project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).\n\n## Local Development\n\nBelow is a list of commands you will probably find useful.\n\n### `npm start` or `yarn start`\n\nRuns the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif\" width=\"600\" /\u003e\n\nYour library will be rebuilt if you make edits.\n\n### `npm run build` or `yarn build`\n\nBundles the package to the `dist` folder.\nThe package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).\n\n\u003cimg src=\"https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif\" width=\"600\" /\u003e\n\n### `npm test` or `yarn test`\n\nRuns the test watcher (Jest) in an interactive mode.\nBy default, runs tests related to files changed since the last commit.\n","createdAt":"2019-02-05T15:01:41.703Z","updatedAt":"2022-05-04T02:48:20.194Z","description":"A GraphQL Codegen plugin to generate ReasonML types","linkHref":"/plugins/other/reason-client","weeklyNPMDownloads":21,"icon":"reason_client","tags":["plugin","reason"]},{"title":"Relay Operation Optimizer","readme":"# @graphql-codegen/relay-operation-optimizer\n\n## Description\n\n[GraphQL Codegen Plugin](https://github.com/dotansimha/graphql-code-generator) for bringing the benefits of Relay Compiler to GraphQL Codegen.\n\n### Current List of Features\n\n- [Optimize Queries](https://relay.dev/docs/en/compiler-architecture#transforms) TL;DR: reduce query size\n - Inline Fragments\n - Flatten Transform\n - Skip Redundant Node Transform\n- FragmentArguments\n - [`@argumentsDefinition`](https://relay.dev/docs/en/graphql-in-relay#argumentdefinitions)\n - [`@arguments`](https://relay.dev/docs/en/graphql-in-relay#arguments)\n\n## Install Instructions\n\n`yarn add -D -E @graphql-codegen/relay-operation-optimizer`\n\n## Usage Instructions\n\n**codegen.yml**\n\n```yaml\noverwrite: true\nschema: schema.graphql\ngenerates:\n src/generated-types.tsx:\n documents: 'src/documents/**/*.graphql'\n config:\n skipDocumentsValidation: true\n plugins:\n - 'relay-optimizer-plugin'\n - 'typescript'\n - 'typescript-operations'\n - 'typescript-react-apollo'\n```\n","createdAt":"2019-10-11T08:42:47.431Z","updatedAt":"2022-04-05T15:48:04.705Z","description":"GraphQL Code Generator plugin for optimizing your GraphQL operations relay style.","linkHref":"/plugins/typescript/relay-operation-optimizer","weeklyNPMDownloads":1819,"icon":"graphql","tags":["plugin","relay"]},{"title":"Schema AST","readme":"","createdAt":"2019-03-18T15:54:22.431Z","updatedAt":"2024-06-30T06:20:59.195Z","description":"GraphQL Code Generator plugin for generating a .graphql file from a given schema","linkHref":"/plugins/other/schema-ast","weeklyNPMDownloads":3203349,"icon":"graphql","tags":["plugin","utilities"]},{"title":"Time","readme":"","createdAt":"2019-03-18T15:54:22.481Z","updatedAt":"2024-03-27T11:16:18.633Z","description":"GraphQL Code Generator plugin for adding the current time for an output file","linkHref":"/plugins/other/time","weeklyNPMDownloads":4250,"icon":"graphql","tags":["plugin","utilities"]},{"title":"TypedDocumentNode","readme":"","createdAt":"2020-07-19T11:57:23.483Z","updatedAt":"2024-11-22T20:42:26.556Z","description":"GraphQL Code Generator plugin for generating ready-to-use TypedDocumentNode based on GraphQL operations","linkHref":"/plugins/typescript/typed-document-node","weeklyNPMDownloads":2103871,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript","readme":"","createdAt":"2019-03-18T15:54:31.815Z","updatedAt":"2024-11-22T20:42:27.090Z","description":"GraphQL Code Generator plugin for generating TypeScript types","linkHref":"/plugins/typescript/typescript","weeklyNPMDownloads":3646657,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Apollo Angular","readme":"","createdAt":"2019-03-18T15:54:31.913Z","updatedAt":"2024-09-05T15:10:14.736Z","description":"GraphQL Code Generator plugin for generating ready-to-use Angular Components based on GraphQL operations","linkHref":"/plugins/typescript/typescript-apollo-angular","weeklyNPMDownloads":74145,"icon":"angular","tags":["plugin","typescript","apollo","angular"]},{"title":"Apollo-Client Helpers","readme":"","createdAt":"2020-10-25T09:09:38.783Z","updatedAt":"2024-09-05T15:10:12.499Z","description":"GraphQL Code Generator plugin for generating TypeScript helpers for Apollo Client \u003e 3","linkHref":"/plugins/typescript/typescript-apollo-client-helpers","weeklyNPMDownloads":105027,"icon":"typescript","tags":["plugin","typescript","apollo"]},{"title":"Typescript Apollo Next.js","readme":"# ⚠ Maintaner needed ⚠\n \nAn alternative solution based on `swr` and `gql-request` can be found [here](https://github.com/correttojs/swr-gql)\n\n\n# graphql-codegen-apollo-next-ssr\nGenerate apollo code for nextjs ssr\n\n\n## Motivations\n\nNextjs recently introduced `getServerSideProps` which doesn't allow to use the HOC pattern adopted by the official apollo graphql plugin (based on `getInitialProps`). At the same time the SSR method offered by apollo client (`getDataFromTree` ) enforces the react app to render multiple times in order to collect and fetch all the relevant queries.\nBy declaring a top level query we can save rendering time and provide a simpler pattern which works with `getServerSideProps `. This plugin generates a typesafe version of `getServerSideProps ` for each server query, and the corresponding HOC to wrap the react component returning the cache result. The limitation/advantage of this solution is that all the queries embedded into inner react components are ignored, unless covered by the top level cache.\n\n## Configuration\n- `excludePatterns` (default: null): regexp to exclude operation names\n- `excludePatternsOptions` (default: ''): regexp flags to exclude operation names\n- `reactApolloVersion` (default: 2): apollo client version\n- `apolloCacheImportFrom` (default: apollo-cache-inmemory): apollo-cache-inmemory dependency\n- `apolloImportFrom` (default: apollo-client v2 or @apollo/client v3): apollo client dependency\n- `apolloCacheImportFrom` (default: apollo-cache-inmemory v2 or @apollo/client v3): apollo cache client dependency\n- `apolloStateKey` (default: apolloState): Key used for storing Apollo state\n- `withHooks` (default: false): Customized the output by enabling/disabling the generated React Hooks.\n- `withHOC` (default: true): Customized the output by enabling/disabling the HOC.\n- `customImports` (default: ''): full custom import declaration\n- `contextType` (default: 'any'): Contex type passed to getApolloClient\n- `contextTypeRequired` (default: false): If the context should be required when called from getServerSideProps\n- `pre` (default: ''): custom code before each function\n- `post` (default: ''): custom code after each function\n- `apolloClientInstanceImport`(default: ''): Add apolloClient instance imports\n- `replaceQuery` (default: false): Replace \"query\" keyword inside the generated operations \n- `replacePage` (default: false): Replace \"page\" keyword inside the generated operations \n- `reactImport` (default: import type React from 'react';): custom react import \n\n## Example config\n\n```\noverwrite: true\nschema:\n - 'https://myschema/graphql'\ndocuments:\n - 'src/**/*.graphql'\ngenerates:\n src/@types/codegen/graphql.tsx:\n plugins:\n - 'typescript'\n - 'typescript-operations'\n - 'typescript-react-apollo'\n src/@types/codegen/page.tsx:\n config:\n documentMode: external\n importDocumentNodeExternallyFrom: ./graphql\n preset: import-types\n presetConfig:\n typesPath: ./graphql\n plugins:\n - ./build/src/index.js\nhooks:\n afterAllFileWrite:\n - prettier --write\n\n```\n","createdAt":"2020-06-20T21:12:49.832Z","updatedAt":"2022-07-11T20:58:42.183Z","description":"GraphQL Code Generator plugin for generating a functions to read and write from the apollo cache","linkHref":"/plugins/typescript/typescript-apollo-next","weeklyNPMDownloads":8173,"icon":"apollo","tags":["plugin","typescript","apollo","next"]},{"title":"TypeScript Document Nodes","readme":"","createdAt":"2019-07-04T16:03:41.344Z","updatedAt":"2024-11-22T20:42:26.650Z","description":"GraphQL Code Generator plugin for generating TypeScript modules with embedded GraphQL document nodes","linkHref":"/plugins/typescript/typescript-document-nodes","weeklyNPMDownloads":148163,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Mock Data Factory","readme":"# graphql-codegen-typescript-fabbrica\n\nGraphQL Code Generator Plugin to define mock data factory.\n\n## Installation\n\n```sh\nnpm install -D @mizdra/graphql-codegen-typescript-fabbrica @graphql-codegen/cli @graphql-codegen/typescript\nnpm install -S graphql\n```\n\n## Requirements\n\n- `graphql` \u003e= 16.0.0\n- `typescript` \u003e= 5.0.0\n - `--moduleResolution Bundler`, `--moduleResolution Node16` or `--moduleResolution NodeNext` is required\n\n## Playground\n\nYou can try this library in the following playground.\n\n- https://stackblitz.com/edit/playground-graphql-codegen-typescript-fabbrica?file=src%2Findex.test.ts\u0026view=editor\n\n## Usage\n\nFirst, you should configure the configuration file of GraphQL Code Generator as follows.\n\n```ts\n// codegen.ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\n\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n config: {\n enumsAsTypes: true, // required\n avoidOptionals: true, // required\n // skipIsAbstractType: false, // If you use Relay, you should set this option to `false`\n },\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n config: {\n typesFile: './types', // required\n // typesFile: './types.js' // If you use factories from Node.js and set `--moduleResolution` of `tsconfig.json` to `Node16` or `NodeNext`, you should add `.js` extension\n },\n },\n },\n};\n\nexport default config;\n```\n\n```graphql\n# schema.graphql\ntype Book {\n id: ID!\n title: String!\n author: Author!\n}\ntype Author {\n id: ID!\n name: String!\n books: [Book!]!\n}\n```\n\nSecond, you should generate the code with the GraphQL Code Generator.\n\n```sh\nnpx graphql-codegen\n```\n\nThen, the utilities to define a factory are generated. You can define your preferred factory with it.\n\n```ts\n// src/app.ts\nimport { defineBookFactory, defineAuthorFactory, dynamic } from '../__generated__/fabbrica';\nimport { faker } from '@faker-js/faker';\n\nconst BookFactory = defineBookFactory({\n defaultFields: {\n __typename: 'Book',\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(() =\u003e faker.word.noun()),\n author: undefined,\n },\n});\nconst AuthorFactory = defineAuthorFactory({\n defaultFields: {\n __typename: 'Author',\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: dynamic(() =\u003e faker.person.firstName()),\n books: undefined,\n },\n});\n```\n\nThe factory generates strictly typed mock data.\n\n```ts\n// simple\nconst book0 = await BookFactory.build();\nexpect(book0).toStrictEqual({\n __typename: 'Book',\n id: 'Book-0',\n title: expect.any(String),\n author: undefined,\n});\nexpectTypeOf(book0).toEqualTypeOf\u003c{\n __typename: 'Book';\n id: string;\n title: string;\n author: undefined;\n}\u003e();\n\n// nested\nconst book1 = await BookFactory.build({\n author: await AuthorFactory.build(),\n});\nexpect(book1).toStrictEqual({\n __typename: 'Book',\n id: 'Book-1',\n title: expect.any(String),\n author: {\n __typename: 'Author',\n id: 'Author-0',\n name: expect.any(String),\n books: undefined,\n },\n});\nexpectTypeOf(book1).toEqualTypeOf\u003c{\n __typename: 'Book';\n id: string;\n title: string;\n author: {\n __typename: 'Author';\n id: string;\n name: string;\n books: undefined;\n };\n}\u003e();\n```\n\n## Notable features\n\nThe library has several notable features. And many of them are inspired by [FactoryBot](https://thoughtbot.github.io/factory_bot/).\n\n### Dynamic Fields\n\nThe `dynamic` function allows you to define fields with a dynamic value.\n\n```ts\nimport { dynamic } from '../__generated__/fabbrica';\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(() =\u003e faker.datatype.uuid()),\n title: 'Yuyushiki',\n },\n});\nexpect(await BookFactory.build()).toStrictEqual({\n id: expect.any(String), // Randomly generated UUID\n title: 'Yuyushiki',\n});\n```\n\n### Sequences\n\nSequences allow you to build sequentially numbered data.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(async ({ seq }) =\u003e Promise.resolve(`Yuyushiki Vol.${seq}`)),\n author: undefined,\n },\n});\nexpect(await BookFactory.build()).toStrictEqual({\n id: 'Book-0',\n title: 'Yuyushiki Vol.0',\n author: undefined,\n});\nexpect(await BookFactory.build()).toStrictEqual({\n id: 'Book-1',\n title: 'Yuyushiki Vol.1',\n author: undefined,\n});\n```\n\n### Dependent Fields\n\nFields can be based on the values of other fields using `get` function.\n\n```ts\nconst UserFactory = defineUserFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `User-${seq}`),\n name: 'yukari',\n email: dynamic(async ({ get }) =\u003e `${(await get('name')) ?? 'defaultName'}@yuyushiki.net`),\n },\n});\nexpect(await UserFactory.build()).toStrictEqual({\n id: 'User-0',\n name: 'yukari',\n email: 'yukari@yuyushiki.net',\n});\nexpect(await UserFactory.build({ name: 'yui' })).toStrictEqual({\n id: 'User-1',\n name: 'yui',\n email: 'yui@yuyushiki.net',\n});\n```\n\n### Building lists\n\nYou can build a list of mock data with the `buildList` method.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(({ seq }) =\u003e `Yuyushiki Vol.${seq}`),\n author: undefined,\n },\n});\nexpect(await BookFactory.buildList(3)).toStrictEqual([\n { id: 'Book-0', title: 'Yuyushiki Vol.0', author: undefined },\n { id: 'Book-1', title: 'Yuyushiki Vol.1', author: undefined },\n { id: 'Book-2', title: 'Yuyushiki Vol.2', author: undefined },\n]);\n```\n\n### Building connection\n\nYou can build a [connection](https://relay.dev/graphql/connections.htm) of mock data with the `buildConnection` method.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n },\n});\nexpect(await BookFactory.buildConnection(3, { first: 2 })).toStrictEqual([\n edges: [\n { cursor: \"YXJyYXljb25uZWN0aW9uOjA=\", node: { id: 'Book-0' } },\n { cursor: \"YXJyYXljb25uZWN0aW9uOjE=\", node: { id: 'Book-1' } },\n ],\n pageInfo: {\n startCursor: \"YXJyYXljb25uZWN0aW9uOjA=\",\n endCursor: \"YXJyYXljb25uZWN0aW9uOjE=\",\n hasPreviousPage: false,\n hasNextPage: true,\n },\n]);\n```\n\n### Build mock data of related types (a.k.a. Associations)\n\nYou can build mock data of the relevant type in one shot.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(({ seq }) =\u003e `Yuyushiki Vol.${seq}`),\n author: undefined,\n },\n});\nconst AuthorFactory = defineAuthorFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: 'Komata Mikami',\n books: dynamic(async () =\u003e BookFactory.buildList(1)), // Build mock data of related types\n },\n});\nexpect(await AuthorFactory.build()).toStrictEqual({\n id: 'Author-0',\n name: 'Komata Mikami',\n books: [{ id: 'Book-0', title: 'Yuyushiki Vol.0', author: undefined }],\n});\n```\n\n### Transient Fields\n\nTransient fields are only available within the factory definition and are not included in the data being built. This allows more complex logic to be used inside factories.\n\n```ts\nimport { defineAuthorFactory, dynamic } from '../__generated__/fabbrica';\nimport { Author } from '../__generated__/types';\n\nconst AuthorFactory = defineAuthorFactory.withTransientFields({\n bookCount: 0,\n})({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: 'Komata Mikami',\n books: dynamic(async ({ get }) =\u003e {\n const bookCount = (await get('bookCount')) ?? 0;\n return BookFactory.buildList(bookCount);\n }),\n },\n});\nexpect(await AuthorFactory.build({ bookCount: 3 })).toStrictEqual({\n id: 'Author-0',\n name: 'Komata Mikami',\n books: [\n { id: 'Book-0', title: 'Yuyushiki Vol.0', author: undefined },\n { id: 'Book-1', title: 'Yuyushiki Vol.1', author: undefined },\n { id: 'Book-2', title: 'Yuyushiki Vol.2', author: undefined },\n ],\n});\n```\n\n### Additional Fields\n\nYou can add additional fields to the data being built. This is useful when you want to build a fake data for a query that contains [aliases](https://graphql.org/learn/queries/#aliases), such as:\n\n```graphql\nquery GetAuthorInfo {\n author(id: '1') {\n id\n name\n books {\n id\n title\n }\n popularBooks: books(popularOnly: true) {\n id\n title\n }\n }\n}\n```\n\n```ts\nimport { defineAuthorFactory, type OptionalAuthor, dynamic } from '../__generated__/fabbrica';\nconst AuthorFactory = defineAuthorFactory.withAdditionalFields\u003c{ popularBooks: OptionalAuthor['books'] }\u003e()({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: 'Komata Mikami',\n // Generate a fake data for the `Author.books()` field\n books: dynamic(() =\u003e BookFactory.buildList(3)),\n // Generate a fake data for the `Author.books(popularOnly: true)` field\n popularBooks: dynamic(() =\u003e BookFactory.buildList(1)),\n },\n});\nexpect(await AuthorFactory.build()).toStrictEqual({\n id: 'Author-0',\n name: 'Komata Mikami',\n books: [\n { id: 'Book-0', title: 'Yuyushiki Vol.0' },\n { id: 'Book-1', title: 'Yuyushiki Vol.1' },\n { id: 'Book-2', title: 'Yuyushiki Vol.2' },\n ],\n popularBooks: [{ id: 'Book-3', title: 'Yuyushiki Vol.3' }],\n});\n```\n\n### Traits\n\nTraits allow you to group the default values of fields and apply them to factories.\n\n```ts\nimport I_SPACER from '../assets/spacer.gif';\nimport I_AVATAR from '../assets/dummy/avatar.png';\nimport I_BANNER from '../assets/dummy/banner.png';\n\nconst ImageFactory = defineImageFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Image-${seq}`),\n url: I_SPACER.src,\n width: I_SPACER.width,\n height: I_SPACER.height,\n },\n traits: {\n avatar: {\n defaultFields: {\n url: I_AVATAR.src,\n width: I_AVATAR.width,\n height: I_AVATAR.height,\n },\n },\n banner: {\n defaultFields: {\n url: I_BANNER.src,\n width: I_BANNER.width,\n height: I_BANNER.height,\n },\n },\n },\n});\nexpect(await ImageFactory.build()).toStrictEqual({\n id: 'Image-0',\n url: I_SPACER.src,\n width: I_SPACER.width,\n height: I_SPACER.height,\n});\nexpect(await ImageFactory.use('avatar').build()).toStrictEqual({\n id: 'Image-1',\n url: I_AVATAR.src,\n width: I_AVATAR.width,\n height: I_AVATAR.height,\n});\nexpect(await ImageFactory.use('banner').build()).toStrictEqual({\n id: 'Image-2',\n url: I_BANNER.src,\n width: I_BANNER.width,\n height: I_BANNER.height,\n});\n```\n\n## Available configs\n\nSeveral configs can be set in the GraphQL Code Generator configuration file.\n\n### `typesFile`\n\ntype: `string`, required\n\nDefines the file path containing all GraphQL types. This file can be generated with the [typescript plugin](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript).\n\nIf you use factories on Node.js and set `--moduleResolution` of `tsconfig.json` to `Node16` or `NodeNext`, you should add `.js` extension to the file path. If you use factories on other runtimes, you should not add `.js` extension.\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n config: {\n // ...\n },\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n config: {\n typesFile: './types', // required\n // typesFile: './types.js' // If you use factories from Node.js and set `--moduleResolution` of `tsconfig.json` to `Node16` or `NodeNext`, you should add `.js` extension\n },\n },\n },\n};\n```\n\n### `skipTypename`\n\ntype: `boolean`, default: `false`\n\nDoes not add `__typename` to the fields that can be passed to factory.\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n config: {\n // ...\n },\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n config: {\n // ...\n skipTypename: true,\n },\n },\n },\n};\nexport default config;\n```\n\n### `skipIsAbstractType`\n\ntype: `boolean`, default: `true`\n\nDoes not add `__is\u003cAbstractType\u003e` to the fields that can be passed to factory. `__is\u003cAbstractType\u003e` is a field that relay-compiler automatically adds to the query[^1][^2]. It is recommended for Relay users to set this option to `false`.\n\n[^1]: https://github.com/facebook/relay/issues/3129#issuecomment-659439154\n\n[^2]: https://github.com/search?q=repo%3Afacebook%2Frelay%20%2F__is%3CAbstractType%3E%2F\u0026type=code\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n config: {\n // ...\n },\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n config: {\n // ...\n skipIsAbstractType: false,\n },\n },\n },\n};\nexport default config;\n```\n\n### `nonOptionalDefaultFields`\n\ntype: `boolean`, default: `false`\n\nMake it mandatory to pass all fields to `defaultFields`. This is useful to force the `defaultFields` to be updated when new fields are added to the schema.\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n config: {\n // ...\n },\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n config: {\n // ...\n nonOptionalDefaultFields: true,\n },\n },\n },\n};\nexport default config;\n```\n\n### `namingConvention`\n\ntype: `NamingConvention`, default: `change-case-all#pascalCase`\n\nAllow you to override the naming convention of the output.\n\nThis option is compatible with [the one for typescript plugin](https://the-guild.dev/graphql/codegen/docs/config-reference/naming-convention#namingconvention). If you specify it for the typescript plugin, you must set the same value for graphql-codegen-typescript-fabbrica.\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n config: {\n namingConvention: 'change-case-all#lowerCase',\n },\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n // ...\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n // ...\n },\n },\n};\nexport default config;\n```\n\n### `typesPrefix`\n\ntype: `string`, default: `''`\n\nPrefixes all the generated types.\n\nThis option is compatible with [the one for typescript plugin](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#typesprefix). If you specify it for the typescript plugin, you must set the same value for graphql-codegen-typescript-fabbrica.\n\n```ts\nimport { CodegenConfig } from '@graphql-codegen/cli';\nconst config: CodegenConfig = {\n schema: './schema.graphql',\n config: {\n typesPrefix: 'I',\n },\n generates: {\n '__generated__/types.ts': {\n plugins: ['typescript'],\n // ...\n },\n './__generated__/fabbrica.ts': {\n plugins: ['@mizdra/graphql-codegen-typescript-fabbrica'],\n // ...\n },\n },\n};\nexport default config;\n```\n\n### `typesSuffix`\n\ntype: `string`, default: `''`\n\nSuffixes all the generated types.\n\nThis option is compatible with [the one for typescript plugin](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#typessuffix). If you specify it for the typescript plugin, you must set the same value for graphql-codegen-typescript-fabbrica.\n\n## Troubleshooting\n\n### `error TS7022: '\u003cType\u003eFactory' implicitly has type 'any' because ...`\n\nCreating a circular type with [Associations](#build-mock-data-of-related-types-aka-associations) may cause compile errors.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(({ seq }) =\u003e `ゆゆ式 ${seq}巻`),\n author: dynamic(({ seq }) =\u003e AuthorFactory.build()),\n },\n});\nconst AuthorFactory = defineAuthorFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: dynamic(({ seq }) =\u003e `${seq}上小又`),\n books: dynamic(({ seq }) =\u003e BookFactory.buildList()),\n },\n});\n```\n\n```console\n$ npx tsc --noEmit\nexample.ts:1:7 - error TS7022: 'BookFactory' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.\n\n1 const BookFactory = defineBookFactory({\n ~~~~~~~~~~~\n\nexample.ts:8:7 - error TS7022: 'AuthorFactory' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.\n\n8 const AuthorFactory = defineAuthorFactory({\n ~~~~~~~~~~~~~\n```\n\nThis error is due to the type of each field being cycled, making the type undecidable. To avoid this, you can pass `undefined` to any field.\n\n```ts\nconst BookFactory = defineBookFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Book-${seq}`),\n title: dynamic(({ seq }) =\u003e `ゆゆ式 ${seq}巻`),\n author: dynamic(({ seq }) =\u003e AuthorFactory.build()),\n },\n});\nconst AuthorFactory = defineAuthorFactory({\n defaultFields: {\n id: dynamic(({ seq }) =\u003e `Author-${seq}`),\n name: dynamic(({ seq }) =\u003e `${seq}上小又`),\n // Pass `undefined` to avoid type being undecidable.\n books: undefined,\n },\n});\n```\n\n### `error TS2307: Cannot find module '@mizdra/graphql-codegen-typescript-fabbrica/helper' or its corresponding type declarations.`\n\nIncorrect values for the `moduleResolution` option in `tsconfig.json` cause compile errors.\n\n```json\n{\n \"compilerOptions\": {\n \"moduleResolution\": \"node\" // incorrect\n }\n}\n```\n\n```console\n$ npx tsc --noEmit\n__generated__/1-basic/fabbrica.ts:7:8 - error TS2307: Cannot find module '@mizdra/graphql-codegen-typescript-fabbrica/helper' or its corresponding type declarations.\n\n7 } from '@mizdra/graphql-codegen-typescript-fabbrica/helper';\n ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n```\n\nTo resolve this error, set the value of `moduleResolution` to `Bundler`, `Node16` or `NodeNext`.\n\n```json\n{\n \"compilerOptions\": {\n \"moduleResolution\": \"Bundler\" // ok\n }\n}\n```\n\n## License\n\nThis library is licensed under the MIT license.\n\nThe copyright contains two names. The first is [@mizdra](https://github.com/mizdra), author of graphql-codegen-typescript-fabbrica. The second is [@Quramy](https://github.com/Quramy), author of [prisma-fabbrica](https://github.com/Quramy/prisma-fabbrica).\n\nThe name of the author of prisma-fabbrica is written because graphql-codegen-typescript-fabbrica reuses some of prisma-fabbrica's code.\n","createdAt":"2023-10-02T15:46:12.255Z","updatedAt":"2024-09-19T15:08:48.961Z","description":"GraphQL Code Generator Plugin to define mock data factory.","linkHref":"/plugins/typescript/typescript-fabbrica","weeklyNPMDownloads":1726,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Generic SDK","readme":"","createdAt":"2020-02-04T12:31:36.508Z","updatedAt":"2024-09-05T15:10:15.539Z","description":"GraphQL Code Generator plugin for generating a ready-to-use client-agnostic SDK based on GraphQL operations","linkHref":"/plugins/typescript/typescript-generic-sdk","weeklyNPMDownloads":91228,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript GraphQL Files Modules","readme":"","createdAt":"2019-03-18T15:54:22.401Z","updatedAt":"2024-09-05T15:10:17.923Z","description":"GraphQL Code Generator plugin for generating TypeScript module declarations based on GraphQL operations","linkHref":"/plugins/typescript/typescript-graphql-files-modules","weeklyNPMDownloads":110536,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript GraphQL-Request","readme":"","createdAt":"2019-10-05T13:26:14.067Z","updatedAt":"2024-09-05T15:10:17.068Z","description":"GraphQL Code Generator plugin for generating a ready-to-use SDK based on graphql-request and GraphQL operations","linkHref":"/plugins/typescript/typescript-graphql-request","weeklyNPMDownloads":332432,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Mock Data","readme":"# graphql-codegen-typescript-mock-data\n\n## Description\n\n[GraphQL Codegen Plugin](https://github.com/dotansimha/graphql-code-generator) for building mock data based on the schema.\n\n## Installation\n\n`yarn add -D graphql-codegen-typescript-mock-data`\n\n## Configuration\n\n### typesFile (`string`, defaultValue: `null`)\n\nDefines the file path containing all GraphQL types. This file can also be generated through graphql-codegen\n\n### useTypeImports(boolean, defaultValue: false)\n\nWill use import type {} rather than import {} when importing only types. This gives compatibility with TypeScript's \"importsNotUsedAsValues\": \"error\" option\n\n### addTypename (`boolean`, defaultValue: `false`)\n\nAdds `__typename` property to mock data\n\n### enumsAsTypes (`boolean`, defaultValue: `false`)\n\nChanges enums to TypeScript string union types\n\n### terminateCircularRelationships (`boolean | 'immediate'`, defaultValue: `false`)\n\nWhen enabled, prevents circular relationships from triggering infinite recursion. After the first resolution of a\nspecific type in a particular call stack, subsequent resolutions will return an empty object cast to the correct type.\n\nWhen enabled with `immediate`, it will only resolve the relationship once, independently of the call stack. Use this option if you're experiencing `out of memory` errors while generating mocks.\n\n### prefix (`string`, defaultValue: `a` for consonants \u0026 `an` for vowels)\n\nThe prefix to add to the mock function name. Cannot be empty since it will clash with the associated\ntypescript definition from `@graphql-codegen/typescript`\n\n### listElementCount (`number`, defaultValue: `1`)\n\nHow many elements should be generated for lists. For example, with `listElementCount: 3` a schema field `names: [String!]!` would generate `3` names in each mock.\n\n### enumValues (`string`, defaultValue: `change-case-all#pascalCase`)\n\nChanges the case of the enums. The format of the converter must be a valid `module#method`. You can also use `keep` to\nkeep all GraphQL names as-is. Available case functions in `change-case-all` are `camelCase`, `capitalCase`, `constantCase`,\n`dotCase`, `headerCase`, `noCase`, `paramCase`, `pascalCase`, `pathCase`, `sentenceCase`, `snakeCase`, `lowerCase`,\n`localeLowerCase`, `lowerCaseFirst`, `spongeCase`, `titleCase`, `upperCase`, `localeUpperCase` and `upperCaseFirst`\n[See more](https://github.com/btxtiger/change-case-all)\n\n### typeNames (`string`, defaultValue: `change-case-all#pascalCase`)\n\nChanges the case of types. The format of the converter must be a valid `module#method`. You can also use `keep` to\nkeep all GraphQL names as-is. Available case functions in `change-case-all` are `camelCase`, `capitalCase`, `constantCase`,\n`dotCase`, `headerCase`, `noCase`, `paramCase`, `pascalCase`, `pathCase`, `sentenceCase`, `snakeCase`, `lowerCase`,\n`localeLowerCase`, `lowerCaseFirst`, `spongeCase`, `titleCase`, `upperCase`, `localeUpperCase` and `upperCaseFirst`\n[See more](https://github.com/btxtiger/change-case-all)\n\n### scalars (`{ [Scalar: string]: GeneratorOptions }`, defaultValue: `undefined`)\n\nAllows you to define mappings for your custom scalars. Allows you to map any GraphQL Scalar to a\n[casual](https://github.com/boo1ean/casual#embedded-generators) embedded generator (string or\nfunction key) with optional arguments, or a or [faker](https://fakerjs.dev/api/) generator with optional arguments\n\nFor detailed configuration options, see [GeneratorOptions](#generatoroptions-type) documentation.\n\nExamples using **casual**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: date # gets translated to casual.date()\n```\n\n**With arguments**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: # gets translated to casual.date('YYYY-MM-DD')\n generator: date\n arguments: 'YYYY-MM-DD'\n```\n\nExamples using **faker**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: date.past # gets translated to faker.date.past()\n```\n\n**With arguments**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: # gets translated to faker.date.past(10)\n generator: date.past\n arguments: 10\n```\n\n**Custom value generator**\n\n```yaml\nplugins:\n - add: \"import { arrayBufferGenerator } from '../generators';\"\n - typescript-mock-data:\n scalars:\n ArrayBuffer: arrayBufferGenerator()\n```\n\n### typesPrefix (`string`, defaultValue: '')\n\nUseful if you have globally exported types under a certain namespace.\ne.g If the types file is something like this\n\n```\ndeclare namespace Api {\n type User {\n ...\n }\n}\n```\n\nSetting the `typesPrefix` to `Api.` will create the following mock data\n\n```\nexport const aUser = (overrides?: Partial\u003cApi.User\u003e): Api.User =\u003e {\n```\n\n### enumsPrefix (`string`, defaultValue: '')\n\nSimilar to `typesPrefix`, but for enum types\n\n```\ndeclare namespace Api {\n enum Status {\n ...\n }\n}\n```\n\nSetting the `enumsPrefix` to `Api.` will create the following mock data\n\n```\nexport const aUser = (overrides?: Partial\u003cUser\u003e): User =\u003e {\n status: overrides \u0026\u0026 overrides.hasOwnProperty('status') ? overrides.status! : Api.Status.Online,\n}\n```\n\n### typeNamesMapping (`{ [typeName: string]: string }`, defaultValue: `{}`)\n\nAllows you to define mappings to rename the types. This is useful when you want to override the generated type name. For example, if you have a type called `User` and you want to rename it to `RenamedUser` you can do the following:\n\n```\nplugins:\n - typescript-mock-data:\n typesFile: '../generated-types.ts'\n typeNamesMapping:\n User: RenamedUser\n```\n\nThis will generate the following mock function:\n\n```\nexport const aUser = (overrides?: Partial\u003cRenamedUser\u003e): RenamedUser =\u003e {\n```\n\n**Note:** It is not possible to rename your enums using this option.\n\n### transformUnderscore (`boolean`, defaultValue: `true`)\n\nWhen disabled, underscores will be retained for type names when the case is changed. It has no effect if `typeNames` is set to `keep`.\n\n### dynamicValues (`boolean`, defaultValue: `false`)\n\nWhen enabled, values will be generated dynamically when the mock function is called rather than statically when the mock function is generated. The values are generated consistently from a [casual seed](https://github.com/boo1ean/casual#seeding) that can be manually configured using the generated `seedMocks(seed: number)` function, as shown in [this test](https://github.com/JimmyPaolini/graphql-codegen-typescript-mock-data/blob/dynamic-mode/tests/dynamicValues/spec.ts#L13).\n\n### useImplementingTypes (`boolean`, defaultValue: `false`)\n\nWhen enabled, it will support the useImplementingTypes GraphQL codegen configuration.\n\n- When a GraphQL interface is used for a field, this flag will use the implementing types, instead of the interface itself.\n\n### defaultNullableToNull (`boolean`, defaultValue: `false`)\n\nWhen enabled, it will set all nullable fields to null per default instead of generating a value.\n\n### fieldGeneration (`{ [typeName: string]: { [fieldName: string]: GeneratorOptions } }`, defaultValue: `undefined`)\n\nThis setting allows you to add specific generation to a field for a given type. For example if you have a type called `User` and a field called `birthDate` you can override any generated value there as follows:\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: date.future\n fieldGeneration:\n User:\n birthDate: date.past\n```\n\nNote that even if `birthDate` is a scalar of `Date` type, its value will still be overridden.\n\nIf you want to use a specific generator for **all** fields of a given name, you can declare it under a property called `_all`:\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: date.future\n fieldGeneration:\n _all:\n email: internet.email\n AdminUser:\n email: 'admin@email.com'\n```\n\nIn the above example all resolvers with the name `email` will use the `internet.email` generator. However since we specified a specific email for `AdminUser` that will take precedence over the `_all` generated value.\n\nFor detailed configuration options, see [GeneratorOptions](#generatoroptions-type) documentation.\n\n### generateLibrary (`'casual' | 'faker'`, defaultValue: `'faker'`)\n\nSelect a library to generate mock values. The default is [faker](https://github.com/faker-js/faker), Other options include [casual](https://github.com/boo1ean/casual)\ncasual is not maintained and will be remove in future major versions.\nfaker is useful when you want to use a mock function with the dynamicValues option enabled in the browser.\n\n### `GeneratorOptions` type\n\nThis type is used in `scalars` and `fieldGeneration` options.\n\nExamples using **faker**\n\n**With arguments**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: # gets translated to faker.date.past(10)\n generator: date.past\n arguments: 10\n```\n\n**With multiple arguments**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Description: # gets translated to faker.lorem.paragraphs(3, '\\n')\n generator: lorem.paragraphs\n arguments:\n - 3\n - '\\n'\n```\n\n**Shorthand if you don't have arguments**\n\n```yaml\nplugins:\n - typescript-mock-data:\n scalars:\n Date: date.past # gets translated to faker.date.past()\n```\n\n**With extra function call**\n\n```yaml\nfieldName: # gets translated to faker.date.past().toLocaleDateString()\n generator: date.past\n extra:\n function: toLocaleDateString\n```\n\n**With extra function call arguments**\n\n```yaml\nfieldName: # gets translated to faker.date.past().toLocaleDateString('en_GB)\n generator: date.past\n extra:\n function: toLocaleDateString\n arguments: 'en_GB'\n```\n\n**Custom value generator**\n\n```yaml\n# gets translated as is\nfieldName: arrayBufferGenerator()\n```\n\nExamples using **casual** (deprecated)\n\n**Shorthand if you don't have arguments**\n\n```yaml\nfieldName: date # gets translated to casual.date()\n```\n\n**With arguments**\n\n```yaml\nfieldName: # gets translated to casual.date('YYYY-MM-DD')\n generator: date\n arguments: 'YYYY-MM-DD'\n```\n\n**With multiple arguments**\n\n```yaml\nfieldName: # gets translated to casual.integer(-100, 100)\n generator: integer\n arguments:\n - -100\n - 100\n```\n\n**With extra function call**\n\n```yaml\nfieldName: # gets translated to casual.integer.toFixed()\n generator: integer\n extra:\n function: toFixed\n```\n\n**With extra function call arguments**\n\n```yaml\nfieldName: # gets translated to casual.integer.toFixed(3)\n generator: integer\n extra:\n function: toFixed\n arguments: 3\n```\n\n## Examples of usage\n\n**codegen.yml**\n\n```yaml\noverwrite: true\nschema: schema.graphql\ngenerates:\n src/generated-types.ts:\n plugins:\n - 'typescript'\n src/mocks/generated-mocks.ts:\n plugins:\n - typescript-mock-data:\n typesFile: '../generated-types.ts'\n enumValues: upper-case#upperCase\n typeNames: keep\n scalars:\n AWSTimestamp: number.int # gets translated to faker.number.int()\n```\n\n### With `eslint-disable` rule\n\n**codegen.yml**\n\n```yaml\noverwrite: true\nschema: schema.graphql\ngenerates:\n src/generated-types.ts:\n plugins:\n - 'typescript'\n src/mocks/generated-mocks.ts:\n plugins:\n - add:\n content: '/* eslint-disable @typescript-eslint/no-use-before-define,@typescript-eslint/no-unused-vars,no-prototype-builtins */'\n - typescript-mock-data:\n typesFile: '../generated-types.ts'\n enumValues: upper-case#upperCase\n typeNames: keep\n scalars:\n AWSTimestamp: number.int # gets translated to faker.number.int()\n```\n\n## Example of generated code\n\nGiven the following schema:\n\n```graphql\nscalar AWSTimestamp\n\ntype Avatar {\n id: ID!\n url: String!\n}\n\ntype User {\n id: ID!\n login: String!\n avatar: Avatar\n status: Status!\n updatedAt: AWSTimestamp\n}\n\ntype Query {\n user: User!\n}\n\ninput UpdateUserInput {\n id: ID!\n login: String\n avatar: Avatar\n}\n\nenum Status {\n ONLINE\n OFFLINE\n}\n\ntype Mutation {\n updateUser(user: UpdateUserInput): User\n}\n```\n\nThe code generated will look like:\n\n```typescript\nexport const anAvatar = (overrides?: Partial\u003cAvatar\u003e): Avatar =\u003e {\n return {\n id: overrides \u0026\u0026 overrides.hasOwnProperty('id') ? overrides.id! : '0550ff93-dd31-49b4-8c38-ff1cb68bdc38',\n url: overrides \u0026\u0026 overrides.hasOwnProperty('url') ? overrides.url! : 'aliquid',\n };\n};\n\nexport const anUpdateUserInput = (overrides?: Partial\u003cUpdateUserInput\u003e): UpdateUserInput =\u003e {\n return {\n id: overrides \u0026\u0026 overrides.hasOwnProperty('id') ? overrides.id! : '1d6a9360-c92b-4660-8e5f-04155047bddc',\n login: overrides \u0026\u0026 overrides.hasOwnProperty('login') ? overrides.login! : 'qui',\n avatar: overrides \u0026\u0026 overrides.hasOwnProperty('avatar') ? overrides.avatar! : anAvatar(),\n };\n};\n\nexport const aUser = (overrides?: Partial\u003cUser\u003e): User =\u003e {\n return {\n id: overrides \u0026\u0026 overrides.hasOwnProperty('id') ? overrides.id! : 'a5756f00-41a6-422a-8a7d-d13ee6a63750',\n login: overrides \u0026\u0026 overrides.hasOwnProperty('login') ? overrides.login! : 'libero',\n avatar: overrides \u0026\u0026 overrides.hasOwnProperty('avatar') ? overrides.avatar! : anAvatar(),\n status: overrides \u0026\u0026 overrides.hasOwnProperty('status') ? overrides.status! : Status.Online,\n updatedAt: overrides \u0026\u0026 overrides.hasOwnProperty('updatedAt') ? overrides.updatedAt! : 1458071232,\n };\n};\n```\n\n### Usage in tests\n\nThose helper functions can be used in our unit tests:\n\n```typescript\nconst user = aUser({ login: 'johndoe' });\n\n// will create a user object with `login` property overridden to `johndoe`\n```\n\n### Dealing with Timezone\n\nIf some properties use generated dates, the result could different depending on the timezone of your machine.\n\nTo force a timezone, you can set environment variable `TZ`:\n\n```bash\nTZ=UTC graphql-codegen\n```\n\nThis will force the timezone to `UTC`, whatever the timezone of your machine or CI\n\n### Contributing\n\nFeel free to open issues and pull requests. We always welcome support from the community.\n\nTo run this project locally:\n\n- Use Node \u003e= 16\n- Make sure that you have the latest Yarn version (https://yarnpkg.com/lang/en/docs/install/)\n- Clone this repo using `git clone`\n- Run `yarn`\n- Run `yarn build` to build the package\n- Run `yarn test` to make sure everything works\n\n### License\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-lightgrey.svg?maxAge=2592000)](https://raw.githubusercontent.com/ardeois/graphql-codegen-typescript-mock-data/master/LICENSE)\n\nMIT\n","createdAt":"2019-10-29T03:26:16.486Z","updatedAt":"2024-09-20T15:27:47.529Z","description":"GraphQL Codegen plugin for building mock data","linkHref":"/plugins/typescript/typescript-mock-data","weeklyNPMDownloads":92145,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript MongoDB","readme":"","createdAt":"2019-03-18T15:54:41.310Z","updatedAt":"2024-09-05T15:10:19.127Z","description":"GraphQL Code Generator plugin for generting a ready-to-use ORM types for MongoDB","linkHref":"/plugins/typescript/typescript-mongodb","weeklyNPMDownloads":8327,"icon":"mongodb","tags":["plugin","typescript","mongodb"]},{"title":"TypeScript Nhost","readme":"","createdAt":"2023-02-14T19:44:20.473Z","updatedAt":"2024-09-05T15:10:17.648Z","description":"GraphQL Code Generator plugin for the Typescript Nhost SDK","linkHref":"/plugins/undefined/typescript-nhost","weeklyNPMDownloads":204,"icon":"nhost","tags":["plugin","typescript","nhost"]},{"title":"TypeScript Msw","readme":"","createdAt":"2021-11-18T10:42:04.873Z","updatedAt":"2024-09-05T15:10:16.927Z","description":"GraphQL Code Generator plugin for generating MSW mock handlers based on GraphQL operations","linkHref":"/plugins/typescript/typescript-msw","weeklyNPMDownloads":48418,"icon":"msw","tags":["plugin","typescript","utilities"]},{"title":"TypeScript Oclif","readme":"","createdAt":"2020-03-08T16:44:11.905Z","updatedAt":"2024-09-05T15:10:19.824Z","description":"GraphQL Code Generator plugin for generating a CLI tool with oclif","linkHref":"/plugins/typescript/typescript-oclif","weeklyNPMDownloads":126,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Operations","readme":"","createdAt":"2019-03-18T15:54:41.259Z","updatedAt":"2024-11-22T20:42:26.387Z","description":"GraphQL Code Generator plugin for generating TypeScript types for GraphQL queries, mutations, subscriptions and fragments","linkHref":"/plugins/typescript/typescript-operations","weeklyNPMDownloads":3117484,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript React Apollo","readme":"","createdAt":"2019-03-18T15:54:31.755Z","updatedAt":"2024-09-09T16:02:01.569Z","description":"GraphQL Code Generator plugin for generating a ready-to-use React Components/HOC/Hooks based on GraphQL operations","linkHref":"/plugins/typescript/typescript-react-apollo","weeklyNPMDownloads":764105,"icon":"apollo","tags":["plugin","typescript","react","apollo"]},{"title":"TypeScript React-Query","readme":"","createdAt":"2020-11-19T10:35:46.157Z","updatedAt":"2024-09-05T15:10:19.961Z","description":"GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations","linkHref":"/plugins/typescript/typescript-react-query","weeklyNPMDownloads":181332,"icon":"react_query","tags":["plugin","typescript","react"]},{"title":"TypeScript Resolvers","readme":"","createdAt":"2019-03-18T15:54:41.339Z","updatedAt":"2024-11-22T20:42:26.951Z","description":"GraphQL Code Generator plugin for generating TypeScript types for resolvers signature","linkHref":"/plugins/typescript/typescript-resolvers","weeklyNPMDownloads":701778,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript RTK-Query","readme":"","createdAt":"2021-06-20T09:07:05.145Z","updatedAt":"2024-09-05T15:10:20.011Z","description":"GraphQL Code Generator plugin for injecting graphql endpoints into a preconfigured RTK Query api","linkHref":"/plugins/typescript/typescript-rtk-query","weeklyNPMDownloads":23018,"icon":"typescript","tags":["plugin","typescript","react"]},{"title":"TypeScript Stencil Apollo","readme":"","createdAt":"2019-03-18T15:54:31.768Z","updatedAt":"2024-09-05T15:10:22.682Z","description":"GraphQL Code Generator plugin for generating Stencil Components based on GraphQL operations","linkHref":"/plugins/typescript/typescript-stencil-apollo","weeklyNPMDownloads":290,"icon":"apollo","tags":["plugin","typescript","apollo"]},{"title":"TypeScript Svelte Apollo","readme":"# Typescript Svelte Apollo\n[GraphQL Code Generator](https://www.graphql-code-generator.com) plugin to use Apollo in Svelte with full Typescript support.\nBecause Svelte and Apollo share the same reactive programming, Apollo queries are treated like Svelte store. \nHence that generator is all you need if you want to use Apollo with Svelte.\nSee a live example [here](https://ticruz38.github.io/graphql-codegen-svelte-apollo/), the code for this is in the /example folder\n\n## Motivation\n\n[Apollo](https://www.apollographql.com) and [graphql-code-generator](https://graphql-code-generator.com) are a powerfull combination for data management in the front-end.\nUnlike other big frameworks, Svelte was still missing a graphql-code-generator plugin for client queries.\nIt turns out that Svelte with its reactive programming, is particularly well designed to be used together with Apollo\n\n## Note\n\ngraphql-codegen-svelte-apollo is a plugin for [graphql-code-generator](https://graphql-code-generator.com) ecosystem, please refer to their [website](https://graphql-code-generator.com) for documentation relative to the configuration in codegen.yml\n\n## Installation\n\n\n\n\u003cimg alt=\"graphql-codegen-svelte-apollo plugin version\" src=\"https://img.shields.io/npm/v/graphql-codegen-svelte-apollo?color=%23e15799\u0026label=plugin\u0026nbsp;version\u0026style=for-the-badge\"/\u003e\n\nEnsure that your project contains all needed dependencies for this plugin\n\n```shell\nnpm i -S graphql\n\nnpm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql-codegen-svelte-apollo\n```\n\n## API Reference\n\n### `clientPath`\n\ntype: `string`\ndefault: `null`\nrequired: true\n\nPath to the apollo client for this project (should point to a file with an apollo-client as default export)\n\n#### Usage Examples\n\n```yml\ngenerates:\npath/to/file.ts:\n plugins:\n - typescript\n - typescript-operations\n - graphql-codegen-svelte-apollo\n config:\n clientPath: PATH_TO_APOLLO_CLIENT\n```\n\n### `asyncQuery`\ntype: `boolean`\ndefault: `false`\n\nBy default, the plugin only generate observable queries, sometimes it may be useful to generate promise-based queries\n\n#### Usage Examples\n\n```yml\ngenerates:\npath/to/file.ts:\n plugins:\n - typescript\n - typescript-operations\n - graphql-codegen-svelte-apollo\n config:\n clientPath: PATH_TO_APOLLO_CLIENT\n asyncQuery: true\n```\n\n## Usage Example\n\n### With Observable queries\n\nFor the given input:\n\n```graphql\nfragment TransactionFragment on TransactionDescription {\n contractAddress\n from\n gasUsed\n gasPrice\n input\n isError\n to\n value\n}\n\nquery Transactions($address: String) {\n transactions(address: $address) {\n ...TransactionFragment\n }\n}\n```\n\nAnd the following configuration:\n\n```yaml\nschema: YOUR_SCHEMA_HERE\ndocuments: \"./src/**/*.graphql\"\ngenerates:\npath/to/file.ts:\n plugins:\n - typescript\n - typescript-operations\n - graphql-codegen-svelte-apollo\n config:\n clientPath: PATH_TO_APOLLO_CLIENT\n```\n\nCodegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.\n\nIn you application code, you can import it from the generated file, and use the query in your component code: \n\n```html\n\u003cscript lang=\"ts\"\u003e\n import { Transactions } from \"codegen\";\n\n var address = \"0x0000000000000000000000000000\"\n $: t = Transactions({ address });\n\u003c/script\u003e\n\n\u003cul\u003e\n {#each $t?.data?.transactions || [] as transaction}\n \u003cli\u003eSent transaction from {transaction.from} to {transaction.to}\u003c/li\u003e\n {/each}\n\u003c/ul\u003e\n```\n\nEach time you change the address, the query will re-fetch and show the new results in the template.\n\n### With Async Queries\n\nSometimes, you may need/prefer to have an async query (only available with asyncQuery option set to true)\n\nFor the given input:\n\n```graphql\nfragment TransactionFragment on TransactionDescription {\n contractAddress\n from\n gasUsed\n gasPrice\n input\n isError\n to\n value\n}\n\nquery Transactions($address: String) {\n transactions(address: $address) {\n ...TransactionFragment\n }\n}\n```\n\nAnd the following configuration:\n\n```yaml\nschema: YOUR_SCHEMA_HERE\ndocuments: \"./src/**/*.graphql\"\ngenerates:\npath/to/file.ts:\n plugins:\n - typescript\n - typescript-operations\n - graphql-codegen-svelte-apollo\n config:\n clientPath: PATH_TO_APOLLO_CLIENT\n asyncQuery: true\n```\n\nCodegen will pre-compile the GraphQL operation into a `DocumentNode` object, and generate a ready-to-use Apollo query for each operation you have.\n\nIn you application code, you can import it from the generated file, and use the query in your component code: \n\n```html\n\u003cscript lang=\"ts\"\u003e\n import { AsyncTransactions } from \"codegen\";\n\n var address = \"0x0000000000000000000000000000\"\n\u003c/script\u003e\n\n\u003cul\u003e\n {#await AsyncTransactions({ address })}\n Loading...\n {:then transactions}\n {#each transactions || [] as transaction}\n \u003cli\u003eSent transaction from {transaction.from} to {transaction.to}\u003c/li\u003e\n {/each}\n {/await}\n\u003c/ul\u003e\n```","createdAt":"2020-10-02T14:57:49.245Z","updatedAt":"2022-05-04T02:48:38.489Z","description":"GraphQL Code Generator plugin to generate client queries from graphql","linkHref":"/plugins/typescript/typescript-svelte-apollo","weeklyNPMDownloads":2075,"icon":"apollo","tags":["plugin","typescript","svelte","apollo"]},{"title":"TypeScript TypeGraphQL","readme":"","createdAt":"2019-08-01T15:23:18.168Z","updatedAt":"2024-09-05T15:10:23.491Z","description":"GraphQL Code Generator plugin for generating TypeGraphQL compatible TypeScript types","linkHref":"/plugins/typescript/typescript-type-graphql","weeklyNPMDownloads":2422,"icon":"type_graphql","tags":["plugin","typescript"]},{"title":"TypeScript Urql","readme":"","createdAt":"2019-05-07T05:36:58.700Z","updatedAt":"2024-09-05T15:10:24.887Z","description":"GraphQL Code Generator plugin for generating an introspection file for Urql's Schema Awareness","linkHref":"/plugins/typescript/typescript-urql","weeklyNPMDownloads":76107,"icon":"typescript","tags":["plugin","typescript","urql","react"]},{"title":"TypeScript Validation Schema","readme":"# graphql-codegen-typescript-validation-schema\n\n[![Test](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/actions/workflows/ci.yml/badge.svg)](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/actions/workflows/ci.yml) [![npm version](https://badge.fury.io/js/graphql-codegen-typescript-validation-schema.svg)](https://badge.fury.io/js/graphql-codegen-typescript-validation-schema)\n\n[GraphQL code generator](https://github.com/dotansimha/graphql-code-generator) plugin to generate form validation schema from your GraphQL schema.\n\n- [x] support [yup](https://github.com/jquense/yup)\n- [x] support [zod](https://github.com/colinhacks/zod)\n- [x] support [myzod](https://github.com/davidmdm/myzod)\n- [x] support [valibot](https://valibot.dev/)\n\n## Quick Start\n\nStart by installing this plugin and write simple plugin config;\n\n```sh\n$ npm i graphql-codegen-typescript-validation-schema\n```\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n - typescript-validation-schema # specify to use this plugin\n config:\n # You can put the config for typescript plugin here\n # see: https://www.graphql-code-generator.com/plugins/typescript\n strictScalars: true\n # Overrides built-in ID scalar to both input and output types as string.\n # see: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars\n scalars:\n ID: string\n # You can also write the config for this plugin together\n schema: yup # or zod\n```\n\nIt is recommended to write `scalars` config for built-in type `ID`, as in the yaml example shown above. For more information: [#375](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/pull/375)\n\nYou can check [example](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/tree/main/example) directory if you want to see more complex config example or how is generated some files.\n\nThe Q\u0026A for each schema is written in the README in the respective example directory.\n\n## Config API Reference\n\n### `schema`\n\ntype: `ValidationSchema` default: `'yup'`\n\nSpecify generete validation schema you want.\n\nYou can specify `yup` or `zod` or `myzod`.\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n - typescript-validation-schema\n config:\n schema: yup\n```\n\n### `importFrom`\n\ntype: `string`\n\nWhen provided, import types from the generated typescript types file path. if not given, omit import statement.\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n path/to/validation.ts:\n plugins:\n - typescript-validation-schema\n config:\n importFrom: ./graphql # path for generated ts code\n```\n\nThen the generator generates code with import statement like below.\n\n```ts\nimport { GeneratedInput } from './graphql'\n\n/* generates validation schema here */\n```\n\n### `schemaNamespacedImportName`\n\ntype: `string`\n\nIf defined, will use named imports from the specified module (defined in `importFrom`) rather than individual imports for each type.\n\n```yml\ngenerates:\n path/to/types.ts:\n plugins:\n - typescript\n path/to/schemas.ts:\n plugins:\n - graphql-codegen-validation-schema\n config:\n schema: yup\n importFrom: ./path/to/types\n schemaNamespacedImportName: types\n```\n\nThen the generator generates code with import statement like below.\n\n```ts\nimport * as types from './graphql'\n\n/* generates validation schema here */\n```\n\n### `useTypeImports`\n\ntype: `boolean` default: `false`\n\nWill use `import type {}` rather than `import {}` when importing generated TypeScript types.\nThis gives compatibility with TypeScript's \"importsNotUsedAsValues\": \"error\" option.\nShould used in conjunction with `importFrom` option.\n\n### `typesPrefix`\n\ntype: `string` default: (empty)\n\nPrefixes all import types from generated typescript type.\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n path/to/validation.ts:\n plugins:\n - typescript-validation-schema\n config:\n typesPrefix: I\n importFrom: ./graphql # path for generated ts code\n```\n\nThen the generator generates code with import statement like below.\n\n```ts\nimport { IGeneratedInput } from './graphql'\n\n/* generates validation schema here */\n```\n\n### `typesSuffix`\n\ntype: `string` default: (empty)\n\nSuffixes all import types from generated typescript type.\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n path/to/validation.ts:\n plugins:\n - typescript-validation-schema\n config:\n typesSuffix: I\n importFrom: ./graphql # path for generated ts code\n```\n\nThen the generator generates code with import statement like below.\n\n```ts\nimport { GeneratedInputI } from './graphql'\n\n/* generates validation schema here */\n```\n\n### `enumsAsTypes`\n\ntype: `boolean` default: `false`\n\nGenerates enum as TypeScript `type` instead of `enum`.\n\n### `notAllowEmptyString`\n\ntype: `boolean` default: `false`\n\nGenerates validation string schema as do not allow empty characters by default.\n\n### `scalarSchemas`\n\ntype: `ScalarSchemas`\n\nExtends or overrides validation schema for the built-in scalars and custom GraphQL scalars.\n\n#### yup schema\n\n```yml\nconfig:\n schema: yup\n scalarSchemas:\n Date: yup.date()\n Email: yup.string().email()\n```\n\n#### zod schema\n\n```yml\nconfig:\n schema: zod\n scalarSchemas:\n Date: z.date()\n Email: z.string().email()\n```\n\n### `defaultScalarTypeSchema`\n\ntype: `string`\n\nFallback scalar type for undefined scalar types in the schema not found in `scalarSchemas`.\n\n#### yup schema\n```yml\nconfig:\n schema: yup\n defaultScalarSchema: yup.unknown()\n```\n\n#### zod schema\n```yml\nconfig:\n schema: zod\n defaultScalarSchema: z.unknown()\n```\n\n### `withObjectType`\n\ntype: `boolean` default: `false`\n\nGenerates validation schema with GraphQL type objects. But excludes `Query`, `Mutation`, `Subscription` objects.\n\nIt is currently added for the purpose of using simple objects. See also [#20](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/issues/20#issuecomment-1058969191), [#107](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/issues/107).\n\nThis option currently **does not support fragment** generation. If you are interested, send me PR would be greatly appreciated!\n\n### `validationSchemaExportType`\n\ntype: `ValidationSchemaExportType` default: `'function'`\n\nSpecify validation schema export type.\n\n### `useEnumTypeAsDefaultValue`\n\ntype: `boolean` default: `false`\n\nUses the full path of the enum type as the default value instead of the stringified value.\n\n### `namingConvention`\n\ntype: `NamingConventionMap` default: `{ enumValues: \"change-case-all#pascalCase\" }`\n\nUses the full path of the enum type as the default value instead of the stringified value.\n\nRelated: https://the-guild.dev/graphql/codegen/docs/config-reference/naming-convention#namingconvention\n\n### `directives`\n\ntype: `DirectiveConfig`\n\nGenerates validation schema with more API based on directive schema. For example, yaml config and GraphQL schema is here.\n\n```graphql\ninput ExampleInput {\n email: String! @required(msg: \"Hello, World!\") @constraint(minLength: 50, format: \"email\")\n message: String! @constraint(startsWith: \"Hello\")\n}\n```\n\n#### yup schema\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n - typescript-validation-schema\n config:\n schema: yup\n directives:\n # Write directives like\n #\n # directive:\n # arg1: schemaApi\n # arg2: [\"schemaApi2\", \"Hello $1\"]\n #\n # See more examples in `./tests/directive.spec.ts`\n # https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/blob/main/tests/directive.spec.ts\n required:\n msg: required\n constraint:\n minLength: min\n # Replace $1 with specified `startsWith` argument value of the constraint directive\n startsWith: [matches, /^$1/]\n format:\n # This example means `validation-schema: directive-arg`\n # directive-arg is supported String and Enum.\n email: email\n```\n\nThen generates yup validation schema like below.\n\n```ts\nexport function ExampleInputSchema(): yup.SchemaOf\u003cExampleInput\u003e {\n return yup.object({\n email: yup.string().defined().required('Hello, World!').min(50).email(),\n message: yup.string().defined().matches(/^Hello/)\n })\n}\n```\n\n#### zod schema\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript\n - typescript-validation-schema\n config:\n schema: zod\n directives:\n # Write directives like\n #\n # directive:\n # arg1: schemaApi\n # arg2: [\"schemaApi2\", \"Hello $1\"]\n #\n # See more examples in `./tests/directive.spec.ts`\n # https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/blob/main/tests/directive.spec.ts\n constraint:\n minLength: min\n # Replace $1 with specified `startsWith` argument value of the constraint directive\n startsWith: [regex, /^$1/, message]\n format:\n # This example means `validation-schema: directive-arg`\n # directive-arg is supported String and Enum.\n email: email\n```\n\nThen generates zod validation schema like below.\n\n```ts\nexport function ExampleInputSchema(): z.ZodSchema\u003cExampleInput\u003e {\n return z.object({\n email: z.string().min(50).email(),\n message: z.string().regex(/^Hello/, 'message')\n })\n}\n```\n\n#### other schema\n\nPlease see [example](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/tree/main/example) directory.\n\n## Notes\n\nTheir is currently a compatibility issue with the client-preset. A workaround for this is to split the generation into two (one for client-preset and one for typescript-validation-schema).\n\n```yml\ngenerates:\n path/to/graphql.ts:\n plugins:\n - typescript-validation-schema\n /path/to/graphql/:\n preset: 'client',\n plugins:\n ...\n```\n","createdAt":"2022-01-20T03:55:09.693Z","updatedAt":"2024-11-08T15:22:00.293Z","description":"GraphQL Code Generator plugin to generate form validation schema from your GraphQL schema","linkHref":"/plugins/typescript/typescript-validation-schema","weeklyNPMDownloads":44291,"icon":"graphql","tags":["plugin","validation","yup","zod","typescript"]},{"title":"TypeScript Vue Apollo Composition API","readme":"","createdAt":"2020-01-22T16:49:56.156Z","updatedAt":"2024-09-05T15:10:23.878Z","description":"GraphQL Code Generator plugin for generating ready-to-use Vue-Apollo composition functions based on GraphQL operations","linkHref":"/plugins/typescript/typescript-vue-apollo","weeklyNPMDownloads":27546,"icon":"vue","tags":["plugin","typescript","vue","apollo"]},{"title":"TypeScript Vue Apollo Smart Operations","readme":"","createdAt":"2021-06-20T09:07:26.207Z","updatedAt":"2024-09-05T15:10:23.336Z","description":"GraphQL Code Generator plugin for generating typed Vue-Apollo Smart Query and mutation functions based on GraphQL operations","linkHref":"/plugins/typescript/typescript-vue-apollo-smart-ops","weeklyNPMDownloads":1067,"icon":"vue","tags":["plugin","typescript","vue","apollo"]},{"title":"TypeScript Vue Urql","readme":"","createdAt":"2021-06-20T09:07:26.377Z","updatedAt":"2024-09-05T15:10:23.452Z","description":"GraphQL Code Generator plugin for generating ready-to-use Vue-Urql composition functions based on GraphQL operations","linkHref":"/plugins/typescript/typescript-vue-urql","weeklyNPMDownloads":2097,"icon":"vue","tags":["plugin","typescript","vue","urql"]},{"title":"Urql Introspection for Schema Awareness","readme":"","createdAt":"2021-01-27T10:45:43.971Z","updatedAt":"2024-09-05T15:10:10.696Z","description":"graphql-code-generate plugin for generating fragments matcher introspection file","linkHref":"/plugins/other/urql-introspection","weeklyNPMDownloads":33917,"icon":"graphql","tags":["plugin","urql","typescript"]},{"title":"Dart Flutter Freezed Classes","readme":"","createdAt":"2022-08-11T09:44:20.539Z","updatedAt":"2024-09-05T15:10:05.522Z","description":"GraphQL Code Generator plugin to generate Freezed models from your GraphQL schema","linkHref":"/plugins/dart/flutter-freezed","weeklyNPMDownloads":513,"icon":"dart","tags":["plugin","dart","flutter"]}]},"__N_SSG":true},"page":"/","query":{},"buildId":"u6ASScd3CT8d7V6lLAcYP","assetPrefix":"/graphql/codegen","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>