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/047107d588945a00.css" as="style"/><link rel="stylesheet" href="/graphql/codegen/_next/static/css/047107d588945a00.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-9f0844fdfea42c7f.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/pages/_app-481a12bc9d71c18f.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/1227-c0c188053dbe88b2.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/838-202078e9401c12a2.js" defer=""></script><script src="/graphql/codegen/_next/static/chunks/pages/index-0a6df41e31759dce.js" defer=""></script><script src="/graphql/codegen/_next/static/HEN71uZxrwu87BsfzRIYM/_buildManifest.js" defer=""></script><script src="/graphql/codegen/_next/static/HEN71uZxrwu87BsfzRIYM/_ssgManifest.js" defer=""></script><style id="__jsx-307672915">:root{--font-sans:'__neueMontreal_44a316', '__neueMontreal_Fallback_44a316'}</style><style id="__jsx-53e0112d5ab8e415">html{scroll-behavior:smooth;color-scheme:light!important}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="/graphql/codegen/docs"><div class="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200"></div>Docs</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-53e0112d5ab8e415 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-53e0112d5ab8e415"><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-53e0112d5ab8e415"><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-53e0112d5ab8e415"><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://the-guild.dev/graphql/hive/ecosystem">Learn more<svg width="24" height="24" viewBox="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="nextra-scrollbar -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 max-md:min-w-[283.5px] bg-green-1000 text-white"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 160 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:Rppd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":Rppd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="#3b736a"></stop><stop offset="1" stop-color="#245850"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 177 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R19pd6:)"><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"></path></svg><svg class="size-0"><defs><linearGradient id=":R19pd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 -11 211 163" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R1ppd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":R1ppd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 156 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R29pd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":R29pd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></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="2025-02-02T12:57:42.473Z">Feb 2, 2025</time></span><span class="hidden @sm:block">3.7M 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="2025-02-02T12:57:39.529Z">Feb 2, 2025</time></span><span class="hidden @sm:block">3.3M 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="2025-02-02T12:57:35.534Z">Feb 2, 2025</time></span><span class="hidden @sm:block">3.2M 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="2025-02-02T12:57:34.850Z">Feb 2, 2025</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="2025-02-02T12:57:39.811Z">Feb 2, 2025</time></span><span class="hidden @sm:block">2.2M 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="2025-02-08T13:38:32.292Z">Feb 8, 2025</time></span><span class="hidden @sm:block">2.1M 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="2025-02-02T12:57:35.089Z">Feb 2, 2025</time></span><span class="hidden @sm:block">830K 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="2025-02-13T05:45:26.658Z">Feb 13, 2025</time></span><span class="hidden @sm:block">764K 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="2025-02-02T12:57:40.079Z">Feb 2, 2025</time></span><span class="hidden @sm:block">654K 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="2025-02-08T13:38:32.643Z">Feb 8, 2025</time></span><span class="hidden @sm:block">526K 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="Near Operation File Preset 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/presets/near-operation-file-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="Near Operation File 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">Near Operation File Preset</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator preset for generating operation code near the operation 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">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></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.941Z">Feb 13, 2025</time></span><span class="hidden @sm:block">429K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="Import Types 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/import-types-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="Import Types 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">Import Types Preset</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator preset for importing types to operation 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">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></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.624Z">Feb 13, 2025</time></span><span class="hidden @sm:block">162K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Vue Apollo Smart 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-vue-apollo-smart-ops"><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 Vue Apollo Smart 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/vue.c7132105.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Vue Apollo Smart Operations</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating typed Vue-Apollo Smart Query and mutation functions 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">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">apollo</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.477Z">Feb 13, 2025</time></span><span class="hidden @sm:block">1.7K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Stencil 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-stencil-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 Stencil 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 Stencil Apollo</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating Stencil Components 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">apollo</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.370Z">Feb 13, 2025</time></span><span class="hidden @sm:block">1.3K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Vue Urql 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-vue-urql"><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 Vue Urql" 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/vue.c7132105.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Vue Urql</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 Vue-Urql composition functions 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">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">urql</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.201Z">Feb 13, 2025</time></span><span class="hidden @sm:block">4.9K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Vue Apollo Composition API 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-vue-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 Vue Apollo Composition API" 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/vue.c7132105.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript Vue Apollo Composition API</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 Vue-Apollo composition functions 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">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">apollo</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:30.177Z">Feb 13, 2025</time></span><span class="hidden @sm:block">21K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript TypeGraphQL 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-type-graphql"><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 TypeGraphQL" 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/type-graphql.ad6cfa61.png"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript TypeGraphQL</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating TypeGraphQL compatible 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="2025-02-13T05:45:29.995Z">Feb 13, 2025</time></span><span class="hidden @sm:block">4.8K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript Urql 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-urql"><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 Urql" 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 Urql</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for generating an introspection file for Urql's Schema Awareness</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">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">react</button></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:28.696Z">Feb 13, 2025</time></span><span class="hidden @sm:block">82K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript RTK-Query 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-rtk-query"><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 RTK-Query" 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 RTK-Query</h3><div class="mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base">GraphQL Code Generator plugin for injecting graphql endpoints into a preconfigured RTK Query api</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></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:27.142Z">Feb 13, 2025</time></span><span class="hidden @sm:block">26K weekly downloads</span></div></div></a></li><li class="*:h-full"><a title="TypeScript React-Query 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-query"><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-Query" 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/react-query.3a42bfa4.svg"/></div><div class="flex flex-col"><h3 class="m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl">TypeScript React-Query</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-Query 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></div><div class="flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm"><span>Updated <time dateTime="2025-02-13T05:45:27.062Z">Feb 13, 2025</time></span><span class="hidden @sm:block">146K 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="nextra-scrollbar -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 max-md:min-w-[283.5px] bg-green-1000 text-white"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 160 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R1fpd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":R1fpd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="#3b736a"></stop><stop offset="1" stop-color="#245850"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 177 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R2fpd6:)"><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"></path></svg><svg class="size-0"><defs><linearGradient id=":R2fpd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 -11 211 163" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R3fpd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":R3fpd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></li><li class="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px] bg-blue-400 text-green-1000"><a class="relative z-10 flex h-full flex-1 flex-col justify-between 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" viewBox="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><div class="pointer-events-none absolute inset-0 overflow-hidden"><svg viewBox="0 0 156 172" stroke-width="0.5px" class="stroke-white/70 pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100" fill="url(#:R4fpd6:)"><path 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></svg><svg class="size-0"><defs><linearGradient id=":R4fpd6:" x1="1" y1="2" x2="161" y2="171" gradientUnits="userSpaceOnUse"><stop stop-color="white" stop-opacity="0.1"></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></div></a></li></ul><p class="text-green-800">Our libraries to support all your GraphQL needs</p><ul class="nextra-scrollbar -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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><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><div role="presentation" class="mt-8 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" viewBox="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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><p class="font-medium">Inspector</p><p class="mt-2 text-sm text-green-800">Schema management tool</p></div><div role="presentation" class="mt-8 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" viewBox="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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><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><div role="presentation" class="mt-8 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" viewBox="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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><p class="font-medium">SOFA</p><p class="mt-2 text-sm text-green-800">Generate RESTful APIs from your GraphQL server</p></div><div role="presentation" class="mt-8 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" viewBox="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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><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><div role="presentation" class="mt-8 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" viewBox="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 justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"><div><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><div role="presentation" class="mt-8 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" viewBox="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://the-guild.dev/graphql/hive/ecosystem"><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="Open Source GraphQL Federation Platform (Schema Registry, Gateway, Analytics)" 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="GraphQL Gateway (Router) for federated GraphQL with Subscriptions support and built-in security features" 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/docs/gateway">Hive Gateway</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="A fully-featured GraphQL federation 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="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="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="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><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="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></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 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><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 class="hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive/oss-friends">OSS Friends</a><a class="hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100 outline-none transition focus-visible:ring" href="https://the-guild.dev/graphql/hive#pricing">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">© 2025 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":"2025-02-02T12:57:34.850Z","description":"GraphQL Code Generator plugin for adding custom content to your output file","linkHref":"/plugins/other/add","weeklyNPMDownloads":2940535,"icon":"graphql","tags":["plugin"]},{"title":"C# Operations","readme":"","createdAt":"2020-04-17T14:48:42.816Z","updatedAt":"2025-02-13T05:45:17.745Z","description":"GraphQL Code Generator plugin for generating CSharp code based on GraphQL operations","linkHref":"/plugins/c-sharp/c-sharp-operations","weeklyNPMDownloads":2555,"icon":"csharp","tags":["plugin","csharp"]},{"title":"Flow Operations","readme":"","createdAt":"2019-03-18T15:54:41.315Z","updatedAt":"2025-02-13T05:45:17.759Z","description":"GraphQL Code Generator plugin for generating Flow types for GraphQL operations (query/mutation/subscription/fragment)","linkHref":"/plugins/flow/flow-operations","weeklyNPMDownloads":12867,"icon":"flow","tags":["plugin","flow"]},{"title":"Flow Resolvers","readme":"","createdAt":"2019-03-18T15:54:41.268Z","updatedAt":"2025-02-13T05:45:17.704Z","description":"GraphQL Code Generator plugin for generating Flow types for GraphQL resolvers signature","linkHref":"/plugins/flow/flow-resolvers","weeklyNPMDownloads":11133,"icon":"flow","tags":["plugin","flow"]},{"title":"Fragment Matcher","readme":"","createdAt":"2019-03-18T15:54:22.389Z","updatedAt":"2025-02-08T13:38:32.643Z","description":"graphql-code-generate plugin for generating fragments matcher introspection file","linkHref":"/plugins/other/fragment-matcher","weeklyNPMDownloads":525829,"icon":"graphql","tags":["plugin","apollo"]},{"title":"GraphQL Modules Preset","readme":"","createdAt":"2020-09-06T15:41:38.988Z","updatedAt":"2025-02-02T12:57:40.041Z","description":"GraphQL Code Generator preset for modularized schema","linkHref":"/plugins/presets/graphql-modules-preset","weeklyNPMDownloads":17756,"icon":"graphql_modules","tags":["preset","utilities","resolvers"]},{"title":"Hasura Allow List","readme":"","createdAt":"2022-02-09T11:10:01.964Z","updatedAt":"2025-02-13T05:45:20.382Z","description":"GraphQL Code Generator plugin to generate hasura allow liste metadata from graphql files","linkHref":"/plugins/other/hasura-allow-list","weeklyNPMDownloads":3117,"icon":"hasura","tags":["plugin","utilities","hasura"]},{"title":"Import Types Preset","readme":"","createdAt":"2019-08-29T05:48:23.310Z","updatedAt":"2025-02-13T05:45:30.624Z","description":"GraphQL Code Generator preset for importing types to operation file","linkHref":"/plugins/presets/import-types-preset","weeklyNPMDownloads":162348,"icon":"codegen","tags":["preset","utilities"]},{"title":"Client preset","readme":"","createdAt":"2022-08-23T17:02:50.140Z","updatedAt":"2025-02-08T13:38:32.292Z","description":"GraphQL Code Generator preset for client.","linkHref":"/plugins/presets/preset-client","weeklyNPMDownloads":2128051,"icon":"codegen","tags":["preset","next","react","urql","typescript","vue"]},{"title":"Introspection","readme":"","createdAt":"2019-03-18T15:54:23.448Z","updatedAt":"2025-02-02T12:57:35.089Z","description":"GraphQL Code Generator plugin for generating an introspection JSON file for a GraphQLSchema","linkHref":"/plugins/other/introspection","weeklyNPMDownloads":830167,"icon":"graphql","tags":["plugin","utilities"]},{"title":"Java","readme":"","createdAt":"2019-04-17T08:46:19.632Z","updatedAt":"2025-02-13T05:45:20.058Z","description":"GraphQL Code Generator plugin for generating Java code based on a GraphQL schema","linkHref":"/plugins/java/java","weeklyNPMDownloads":1994,"icon":"java","tags":["plugin","java"]},{"title":"Java Apollo Android","readme":"","createdAt":"2019-05-28T14:53:46.697Z","updatedAt":"2025-02-13T05:45:19.578Z","description":"GraphQL Code Generator plugin for generating Java classes for Apollo-Android","linkHref":"/plugins/java/java-apollo-android","weeklyNPMDownloads":1294,"icon":"java","tags":["plugin","java","apollo","android"]},{"title":"Java Resolvers","readme":"","createdAt":"2019-04-14T15:45:37.947Z","updatedAt":"2025-02-13T05:45:23.568Z","description":"GraphQL Code Generator plugin for generating resolvers signature for Java backends","linkHref":"/plugins/java/java-resolvers","weeklyNPMDownloads":1432,"icon":"java","tags":["plugin","java"]},{"title":"JSDoc","readme":"","createdAt":"2020-05-25T09:16:22.539Z","updatedAt":"2025-02-13T05:45:20.261Z","description":"GraphQL Code Generator plugin for generating JSDoc based types for GraphQL queries, mutations, subscriptions and fragments","linkHref":"/plugins/other/jsdoc","weeklyNPMDownloads":6811,"icon":"graphql","tags":["plugin","jsdoc"]},{"title":"Kotlin","readme":"","createdAt":"2019-10-02T18:51:45.348Z","updatedAt":"2025-02-13T05:45:21.177Z","description":"GraphQL Code Generator plugin for generating Kotlin code based on a GraphQL schema","linkHref":"/plugins/java/kotlin","weeklyNPMDownloads":5117,"icon":"java","tags":["plugin","java","kotlin"]},{"title":"Named Operations Object","readme":"","createdAt":"2020-05-18T15:04:50.975Z","updatedAt":"2025-02-13T05:45:24.593Z","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":81924,"icon":"typescript","tags":["plugin","typescript"]},{"title":"Near Operation File Preset","readme":"","createdAt":"2019-05-12T15:45:12.536Z","updatedAt":"2025-02-13T05:45:30.941Z","description":"GraphQL Code Generator preset for generating operation code near the operation file","linkHref":"/plugins/presets/near-operation-file-preset","weeklyNPMDownloads":429282,"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":19,"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":2089,"icon":"graphql","tags":["plugin","relay"]},{"title":"Schema AST","readme":"","createdAt":"2019-03-18T15:54:22.431Z","updatedAt":"2025-02-02T12:57:35.534Z","description":"GraphQL Code Generator plugin for generating a .graphql file from a given schema","linkHref":"/plugins/other/schema-ast","weeklyNPMDownloads":3239699,"icon":"graphql","tags":["plugin","utilities"]},{"title":"Time","readme":"","createdAt":"2019-03-18T15:54:22.481Z","updatedAt":"2025-02-02T12:57:34.726Z","description":"GraphQL Code Generator plugin for adding the current time for an output file","linkHref":"/plugins/other/time","weeklyNPMDownloads":6650,"icon":"graphql","tags":["plugin","utilities"]},{"title":"TypedDocumentNode","readme":"","createdAt":"2020-07-19T11:57:23.483Z","updatedAt":"2025-02-02T12:57:39.811Z","description":"GraphQL Code Generator plugin for generating ready-to-use TypedDocumentNode based on GraphQL operations","linkHref":"/plugins/typescript/typed-document-node","weeklyNPMDownloads":2229373,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript","readme":"","createdAt":"2019-03-18T15:54:31.815Z","updatedAt":"2025-02-02T12:57:42.473Z","description":"GraphQL Code Generator plugin for generating TypeScript types","linkHref":"/plugins/typescript/typescript","weeklyNPMDownloads":3720030,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Apollo Angular","readme":"","createdAt":"2019-03-18T15:54:31.913Z","updatedAt":"2025-02-13T05:45:21.411Z","description":"GraphQL Code Generator plugin for generating ready-to-use Angular Components based on GraphQL operations","linkHref":"/plugins/typescript/typescript-apollo-angular","weeklyNPMDownloads":97786,"icon":"angular","tags":["plugin","typescript","apollo","angular"]},{"title":"Apollo-Client Helpers","readme":"","createdAt":"2020-10-25T09:09:38.783Z","updatedAt":"2025-02-13T05:45:21.289Z","description":"GraphQL Code Generator plugin for generating TypeScript helpers for Apollo Client \u003e 3","linkHref":"/plugins/typescript/typescript-apollo-client-helpers","weeklyNPMDownloads":117882,"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":7619,"icon":"apollo","tags":["plugin","typescript","apollo","next"]},{"title":"TypeScript Document Nodes","readme":"","createdAt":"2019-07-04T16:03:41.344Z","updatedAt":"2025-02-02T12:57:35.824Z","description":"GraphQL Code Generator plugin for generating TypeScript modules with embedded GraphQL document nodes","linkHref":"/plugins/typescript/typescript-document-nodes","weeklyNPMDownloads":138629,"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":1254,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Generic SDK","readme":"","createdAt":"2020-02-04T12:31:36.508Z","updatedAt":"2025-02-13T05:45:22.812Z","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":90482,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript GraphQL Files Modules","readme":"","createdAt":"2019-03-18T15:54:22.401Z","updatedAt":"2025-02-13T05:45:23.830Z","description":"GraphQL Code Generator plugin for generating TypeScript module declarations based on GraphQL operations","linkHref":"/plugins/typescript/typescript-graphql-files-modules","weeklyNPMDownloads":92287,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript GraphQL-Request","readme":"","createdAt":"2019-10-05T13:26:14.067Z","updatedAt":"2025-02-13T05:45:23.946Z","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":368042,"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":"2025-02-06T17:36:35.979Z","description":"GraphQL Codegen plugin for building mock data","linkHref":"/plugins/typescript/typescript-mock-data","weeklyNPMDownloads":108448,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript MongoDB","readme":"","createdAt":"2019-03-18T15:54:41.310Z","updatedAt":"2025-02-13T05:45:26.911Z","description":"GraphQL Code Generator plugin for generting a ready-to-use ORM types for MongoDB","linkHref":"/plugins/typescript/typescript-mongodb","weeklyNPMDownloads":6241,"icon":"mongodb","tags":["plugin","typescript","mongodb"]},{"title":"TypeScript Nhost","readme":"","createdAt":"2023-02-14T19:44:20.473Z","updatedAt":"2025-02-13T05:45:25.676Z","description":"GraphQL Code Generator plugin for the Typescript Nhost SDK","linkHref":"/plugins/undefined/typescript-nhost","weeklyNPMDownloads":1266,"icon":"nhost","tags":["plugin","typescript","nhost"]},{"title":"TypeScript Msw","readme":"","createdAt":"2021-11-18T10:42:04.873Z","updatedAt":"2025-02-13T05:45:23.950Z","description":"GraphQL Code Generator plugin for generating MSW mock handlers based on GraphQL operations","linkHref":"/plugins/typescript/typescript-msw","weeklyNPMDownloads":57560,"icon":"msw","tags":["plugin","typescript","utilities"]},{"title":"TypeScript Oclif","readme":"","createdAt":"2020-03-08T16:44:11.905Z","updatedAt":"2025-02-13T05:45:26.783Z","description":"GraphQL Code Generator plugin for generating a CLI tool with oclif","linkHref":"/plugins/typescript/typescript-oclif","weeklyNPMDownloads":1113,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript Operations","readme":"","createdAt":"2019-03-18T15:54:41.259Z","updatedAt":"2025-02-02T12:57:39.529Z","description":"GraphQL Code Generator plugin for generating TypeScript types for GraphQL queries, mutations, subscriptions and fragments","linkHref":"/plugins/typescript/typescript-operations","weeklyNPMDownloads":3258683,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript React Apollo","readme":"","createdAt":"2019-03-18T15:54:31.755Z","updatedAt":"2025-02-13T05:45:26.658Z","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":764241,"icon":"apollo","tags":["plugin","typescript","react","apollo"]},{"title":"TypeScript React-Query","readme":"","createdAt":"2020-11-19T10:35:46.157Z","updatedAt":"2025-02-13T05:45:27.062Z","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":146127,"icon":"react_query","tags":["plugin","typescript","react"]},{"title":"TypeScript Resolvers","readme":"","createdAt":"2019-03-18T15:54:41.339Z","updatedAt":"2025-02-02T12:57:40.079Z","description":"GraphQL Code Generator plugin for generating TypeScript types for resolvers signature","linkHref":"/plugins/typescript/typescript-resolvers","weeklyNPMDownloads":654458,"icon":"typescript","tags":["plugin","typescript"]},{"title":"TypeScript RTK-Query","readme":"","createdAt":"2021-06-20T09:07:05.145Z","updatedAt":"2025-02-13T05:45:27.142Z","description":"GraphQL Code Generator plugin for injecting graphql endpoints into a preconfigured RTK Query api","linkHref":"/plugins/typescript/typescript-rtk-query","weeklyNPMDownloads":25531,"icon":"typescript","tags":["plugin","typescript","react"]},{"title":"TypeScript Stencil Apollo","readme":"","createdAt":"2019-03-18T15:54:31.768Z","updatedAt":"2025-02-13T05:45:30.370Z","description":"GraphQL Code Generator plugin for generating Stencil Components based on GraphQL operations","linkHref":"/plugins/typescript/typescript-stencil-apollo","weeklyNPMDownloads":1263,"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":2091,"icon":"apollo","tags":["plugin","typescript","svelte","apollo"]},{"title":"TypeScript TypeGraphQL","readme":"","createdAt":"2019-08-01T15:23:18.168Z","updatedAt":"2025-02-13T05:45:29.995Z","description":"GraphQL Code Generator plugin for generating TypeGraphQL compatible TypeScript types","linkHref":"/plugins/typescript/typescript-type-graphql","weeklyNPMDownloads":4751,"icon":"type_graphql","tags":["plugin","typescript"]},{"title":"TypeScript Urql","readme":"","createdAt":"2019-05-07T05:36:58.700Z","updatedAt":"2025-02-13T05:45:28.696Z","description":"GraphQL Code Generator plugin for generating an introspection file for Urql's Schema Awareness","linkHref":"/plugins/typescript/typescript-urql","weeklyNPMDownloads":82027,"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":"2025-02-11T03:20:15.722Z","description":"GraphQL Code Generator plugin to generate form validation schema from your GraphQL schema","linkHref":"/plugins/typescript/typescript-validation-schema","weeklyNPMDownloads":44633,"icon":"graphql","tags":["plugin","validation","yup","zod","typescript"]},{"title":"TypeScript Vue Apollo Composition API","readme":"","createdAt":"2020-01-22T16:49:56.156Z","updatedAt":"2025-02-13T05:45:30.177Z","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":21385,"icon":"vue","tags":["plugin","typescript","vue","apollo"]},{"title":"TypeScript Vue Apollo Smart Operations","readme":"","createdAt":"2021-06-20T09:07:26.207Z","updatedAt":"2025-02-13T05:45:30.477Z","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":1688,"icon":"vue","tags":["plugin","typescript","vue","apollo"]},{"title":"TypeScript Vue Urql","readme":"","createdAt":"2021-06-20T09:07:26.377Z","updatedAt":"2025-02-13T05:45:30.201Z","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":4870,"icon":"vue","tags":["plugin","typescript","vue","urql"]},{"title":"Urql Introspection for Schema Awareness","readme":"","createdAt":"2021-01-27T10:45:43.971Z","updatedAt":"2025-02-13T05:45:20.815Z","description":"graphql-code-generate plugin for generating fragments matcher introspection file","linkHref":"/plugins/other/urql-introspection","weeklyNPMDownloads":35525,"icon":"graphql","tags":["plugin","urql","typescript"]},{"title":"Dart Flutter Freezed Classes","readme":"","createdAt":"2022-08-11T09:44:20.539Z","updatedAt":"2025-02-13T05:45:17.276Z","description":"GraphQL Code Generator plugin to generate Freezed models from your GraphQL schema","linkHref":"/plugins/dart/flutter-freezed","weeklyNPMDownloads":1547,"icon":"dart","tags":["plugin","dart","flutter"]}]},"__N_SSG":true},"page":"/","query":{},"buildId":"HEN71uZxrwu87BsfzRIYM","assetPrefix":"/graphql/codegen","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>