Cloud Security Alliance Star Level One Badge

<!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"/><meta name="next-head-count" content="5"/><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/pages/plugins/typescript/typescript-react-apollo-032839ade049b594.js" defer=""></script><script src="/graphql/codegen/_next/static/K2P7GsBAmgQYRl4Gjn_8Y/_buildManifest.js" defer=""></script><script src="/graphql/codegen/_next/static/K2P7GsBAmgQYRl4Gjn_8Y/_ssgManifest.js" defer=""></script><style id="__jsx-307672915">:root{--font-sans:'__neueMontreal_44a316', '__neueMontreal_Fallback_44a316'}</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" 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 max-w-[90rem]"><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 _max-w-[90rem]"><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:_sticky md:_self-start 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 class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 nextra-menu-desktop max-md:_hidden"><li class="open"><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/typescript" type="button" data-headlessui-state="">TypeScript<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/named-operations-object">named-operations-object</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/relay-operation-optimizer">relay-operation-optimizer</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typed-document-node">typed-document-node</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript">typescript</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-apollo-angular">apollo-angular</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-apollo-client-helpers">apollo-client-helpers</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-apollo-next">apollo-next</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-document-nodes">document-nodes</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-fabbrica">fabbrica</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-generic-sdk">generic-sdk</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-graphql-files-modules">graphql-files-modules</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-graphql-request">graphql-request</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-mongodb">mongodb</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-msw">msw</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-oclif">oclif</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-nhost">nhost</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-operations">operations</a></li><li class="_flex _flex-col _gap-1 active"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _bg-primary-100 _font-semibold _text-primary-800 dark:_bg-primary-400/10 dark:_text-primary-600 contrast-more:_border-primary-500 contrast-more:dark:_border-primary-500" href="/graphql/codegen/plugins/typescript/typescript-react-apollo">react-apollo</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-react-query">react-query</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-resolvers">resolvers</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-rtk-query">rtk-query</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-stencil-apollo">stencil-apollo</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-svelte-apollo">svelte-apollo</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-type-graphql">type-graphql</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-urql">urql</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-validation-schema">validation-schema</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-vue-apollo">vue-apollo</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-vue-apollo-smart-ops">vue-apollo-smart-ops</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-vue-urql">vue-urql</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/typescript/typescript-mock-data">typescript-mock-data</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/presets" type="button" data-headlessui-state="">Presets<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/presets/preset-client">client-preset</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/presets/graphql-modules-preset">graphql-modules</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/presets/import-types-preset">import-types</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/presets/near-operation-file-preset">near-operation-file</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/java" type="button" data-headlessui-state="">Java<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/java/java">java</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/java/java-apollo-android">java-apollo-android</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/java/java-resolvers">java-resolvers</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/java/kotlin">kotlin</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/c-sharp" type="button" data-headlessui-state="">C-Sharp<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/c-sharp/c-sharp-operations">operations</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/flow" type="button" data-headlessui-state="">Flow<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/flow/flow-operations">operations</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/flow/flow-resolvers">resolvers</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/dart" type="button" data-headlessui-state="">dart<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/dart/flutter-freezed">flutter-freezed</a></li></ul></div></div></li><li class=""><button class="_transition _items-center _justify-between _gap-2 _text-left _w-full _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" data-href="/plugins/other" type="button" data-headlessui-state="">other<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/add">add</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/fragment-matcher">fragment-matcher</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/hasura-allow-list">hasura-allow-list</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/introspection">introspection</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/jsdoc">jsdoc</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/reason-client">reason-client</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/schema-ast">schema-ast</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/time">time</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/graphql/codegen/plugins/other/urql-introspection">urql-introspection</a></li></ul></div></div></li></ul></div></div></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><nav class="nextra-toc _order-last max-xl:_hidden _w-64 _shrink-0 print:_hidden" aria-label="table of contents"><div class="_grid _grid-rows-[min-content_1fr_min-content] _sticky _top-[--nextra-navbar-height] _pt-6 _text-sm _max-h-[calc(100vh-var(--nextra-navbar-height))]"><p class="_mx-4 _font-semibold _tracking-tight _pb-2 _shadow-[0_12px_16px_rgb(var(--nextra-bg))] contrast-more:_shadow-none _z-[1]">On This Page</p><ul class="_px-4 nextra-scrollbar _overscroll-y-contain _overflow-y-auto _hyphens-auto _py-1.5"><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#usage-example" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Usage Example</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#with-react-hooks" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">With React Hooks</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#generate-data-component" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Generate Data Component</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#generate-hoc" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Generate HOC</a></li></ul><div class="nextra-toc-footer _pt-4 _flex _flex-col _items-start _gap-2 _pb-4 _mx-4"><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/dotansimha/graphql-code-generator/issues/new?title=Feedback%20for%20%E2%80%9CTypeScript%20React%20Apollo%E2%80%9D&labels=kind/docs" target="_blank" rel="noreferrer">Question? Give us feedback →</a><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/dotansimha/graphql-code-generator/tree/master/website/src/pages/plugins/typescript/typescript-react-apollo.mdx">Edit this page on GitHub</a><button class="_transition _flex _items-center _gap-1.5 _whitespace-nowrap _opacity-0 _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" aria-hidden="true" type="button" disabled="" data-headlessui-state="disabled" data-disabled="">Scroll to top<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="16" class="_-rotate-90 _border _rounded-full _border-current"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></nav><div id="reach-skip-nav"></div><article class="_w-full _break-words nextra-content _flex _min-h-[calc(100vh-var(--nextra-navbar-height))] _min-w-0 _justify-center _pb-8 _pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="_w-full _min-w-0 _max-w-6xl _px-6 _pt-4 md:_px-12"><div class="nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current"><a class="_whitespace-nowrap _transition-colors _min-w-6 _overflow-hidden _text-ellipsis nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100" title="Plugins" href="/graphql/codegen/plugins">Plugins</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="_shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><a class="_whitespace-nowrap _transition-colors _min-w-6 _overflow-hidden _text-ellipsis nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100" title="TypeScript" href="/graphql/codegen/plugins/typescript/named-operations-object">TypeScript</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="_shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="_whitespace-nowrap _transition-colors _font-medium _text-gray-700 contrast-more:_font-bold contrast-more:_text-current dark:_text-gray-100 contrast-more:dark:_text-current" title="react-apollo">react-apollo</span></div><div class="nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4 contrast-more:_border-current contrast-more:dark:_border-current _border-blue-200 _bg-blue-100 _text-blue-900 dark:_border-blue-200/30 dark:_bg-blue-900/30 dark:_text-blue-200"><div class="_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""><svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20" class="_mt-1"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"></path></svg></div><div class="_w-full _min-w-0 _leading-7"><p class="[&:not(:first-child)]:_mt-6 _leading-7">We now recommend using the <code class="nextra-code" dir="ltr">client-preset</code> package for a <strong>better developer experience</strong> and smaller impact on bundle size.</p><p class="[&:not(:first-child)]:_mt-6 _leading-7"><strong>Get started on <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="/graphql/codegen/docs/guides/react-vue">our “React/Vue” guide</a>.</strong></p></div></div> <h1 class="_mt-2 _text-4xl _font-bold _tracking-tight _text-slate-900 dark:_text-slate-100">TypeScript React Apollo</h1> <table class="_not-prose _block _overflow-x-auto nextra-scrollbar [&:not(:first-child)]:_mt-6 _p-0"><thead><tr class="_m-0 _border-t _border-gray-300 _p-0 dark:_border-gray-600 even:_bg-gray-100 even:dark:_bg-gray-600/20"><th class="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">Package name</th><th class="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">Weekly Downloads</th><th class="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">Version</th><th class="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">License</th><th class="_m-0 _border _border-gray-300 _px-4 _py-2 _font-semibold dark:_border-gray-600">Updated</th></tr></thead><tbody><tr class="_m-0 _border-t _border-gray-300 _p-0 dark:_border-gray-600 even:_bg-gray-100 even:dark:_bg-gray-600/20"><td class="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"><a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://npmjs.com/package/@graphql-codegen/typescript-react-apollo"><code class="nextra-code" dir="ltr">@graphql-codegen/typescript-react-apollo</code></a></td><td class="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"><img src="https://badgen.net/npm/dw/@graphql-codegen/typescript-react-apollo" alt="Downloads" title="Downloads"/></td><td class="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"><img src="https://badgen.net/npm/v/@graphql-codegen/typescript-react-apollo" alt="Version" title="Version"/></td><td class="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600"><img src="https://badgen.net/npm/license/@graphql-codegen/typescript-react-apollo" alt="License" title="License"/></td><td class="_m-0 _border _border-gray-300 _px-4 _py-2 dark:_border-gray-600">Feb 19th, 2025</td></tr></tbody></table> <h2 id="installation" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Installation<a href="#installation" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <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" 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" id="headlessui-tabs-tab-:R1c0s6j9d6:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected="">npm</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" id="headlessui-tabs-tab-:R2c0s6j9d6:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">pnpm</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" id="headlessui-tabs-tab-:R3c0s6j9d6:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">yarn</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" id="headlessui-tabs-tab-:R4c0s6j9d6:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">bun</button></div><div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:R1k0s6j9d6:" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> i</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @graphql-codegen/typescript-react-apollo</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div></div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:R2k0s6j9d6:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @graphql-codegen/typescript-react-apollo</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div></div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:R3k0s6j9d6:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> --dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @graphql-codegen/typescript-react-apollo</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div></div><div class="_rounded _mt-6" id="headlessui-tabs-panel-:R4k0s6j9d6:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> --dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @graphql-codegen/typescript-react-apollo</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div></div></div></div> <div class="nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4 contrast-more:_border-current contrast-more:dark:_border-current _border-yellow-100 _bg-yellow-50 _text-yellow-900 dark:_border-yellow-200/30 dark:_bg-yellow-700/30 dark:_text-yellow-200"><div class="_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">⚠️</div><div class="_w-full _min-w-0 _leading-7"><p class="[&:not(:first-child)]:_mt-6 _leading-7"><strong>Usage Requirements</strong> In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (<code class="nextra-code" dir="ltr">query</code> / <code class="nextra-code" dir="ltr">mutation</code> / <code class="nextra-code" dir="ltr">subscription</code> and <code class="nextra-code" dir="ltr">fragment</code>) set as <code class="nextra-code" dir="ltr">documents: …</code> in your <code class="nextra-code" dir="ltr">codegen.yml</code>.</p><p class="[&:not(:first-child)]:_mt-6 _leading-7">Without loading your GraphQL operations (<code class="nextra-code" dir="ltr">query</code>, <code class="nextra-code" dir="ltr">mutation</code>, <code class="nextra-code" dir="ltr">subscription</code> and <code class="nextra-code" dir="ltr">fragment</code>), you won’t see any change in the generated output.</p></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">This plugin generates React Apollo components and HOC with TypeScript typings.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">It extends the basic TypeScript plugins: <code class="nextra-code" dir="ltr">@graphql-codegen/typescript</code>, <code class="nextra-code" dir="ltr">@graphql-codegen/typescript-operations</code> - and thus shares a similar configuration.</p> <h2 id="config-api-reference" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Config API Reference<a href="#config-api-reference" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <h3 id="withcomponent" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withComponent</code><a href="#withcomponent" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the output by enabling/disabling the generated Component (deprecated since Apollo-Client v3). For more details: <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://apollographql.com/docs/react/api/react/components">https://apollographql.com/docs/react/api/react/components</a></p> <h4 id="usage-examples" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withComponent: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withhoc" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withHOC</code><a href="#withhoc" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the output by enabling/disabling the HOC (deprecated since Apollo-Client v3). For more details: <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://apollographql.com/docs/react/api/react/hoc">https://apollographql.com/docs/react/api/react/hoc</a></p> <h4 id="usage-examples-1" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-1" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withHOC: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withhooks" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withHooks</code><a href="#withhooks" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customized the output by enabling/disabling the generated React Hooks. For more details: <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://apollographql.com/docs/react/api/react/hooks">https://apollographql.com/docs/react/api/react/hooks</a></p> <h4 id="usage-examples-2" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-2" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withHooks: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withmutationfn" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withMutationFn</code><a href="#withmutationfn" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customized the output by enabling/disabling the generated mutation function signature.</p> <h4 id="usage-examples-3" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-3" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withMutationFn: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withrefetchfn" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withRefetchFn</code><a href="#withrefetchfn" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Enable generating a function to be used with refetchQueries</p> <h4 id="usage-examples-4" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-4" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withRefetchFn: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">false</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="apolloreactcommonimportfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">apolloReactCommonImportFrom</code><a href="#apolloreactcommonimportfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">@apollo/react-common</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the package where apollo-react common lib is loaded from.</p> <h3 id="apolloreactcomponentsimportfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">apolloReactComponentsImportFrom</code><a href="#apolloreactcomponentsimportfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">@apollo/react-components</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the package where apollo-react component lib is loaded from.</p> <h3 id="apolloreacthocimportfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">apolloReactHocImportFrom</code><a href="#apolloreacthocimportfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">@apollo/react-hoc</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the package where apollo-react HOC lib is loaded from.</p> <h3 id="apolloreacthooksimportfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">apolloReactHooksImportFrom</code><a href="#apolloreacthooksimportfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">@apollo/react-hooks</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize the package where apollo-react hooks lib is loaded from.</p> <h3 id="componentsuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">componentSuffix</code><a href="#componentsuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">Component</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">You can specify a suffix that gets attached to the name of the generated component.</p> <h3 id="reactapolloversion" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">reactApolloVersion</code><a href="#reactapolloversion" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">number (values: 2, 3)</code> default: <code class="nextra-code" dir="ltr">3</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Sets the version of react-apollo. If you are using the old (deprecated) package of <code class="nextra-code" dir="ltr">react-apollo</code>, please set this configuration to <code class="nextra-code" dir="ltr">2</code>. If you are using Apollo-Client v3, please set this to <code class="nextra-code" dir="ltr">3</code>.</p> <h4 id="usage-examples-5" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-5" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> reactApolloVersion: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withresulttype" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withResultType</code><a href="#withresulttype" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customized the output by enabling/disabling the generated result type.</p> <h4 id="usage-examples-6" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-6" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withResultType: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="withmutationoptionstype" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">withMutationOptionsType</code><a href="#withmutationoptionstype" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customized the output by enabling/disabling the generated mutation option type.</p> <h4 id="usage-examples-7" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-7" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withMutationOptionsType: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="adddocblocks" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">addDocBlocks</code><a href="#adddocblocks" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Allows you to enable/disable the generation of docblocks in generated code. Some IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.</p> <h4 id="usage-examples-8" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-8" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> addDocBlocks: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="defaultbaseoptions" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">defaultBaseOptions</code><a href="#defaultbaseoptions" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">object</code></p> <h3 id="hookssuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">hooksSuffix</code><a href="#hookssuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code></p> <h3 id="nographqltag" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">noGraphQLTag</code><a href="#nographqltag" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Deprecated. Changes the documentMode to <code class="nextra-code" dir="ltr">documentNode</code>.</p> <h3 id="gqlimport" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">gqlImport</code><a href="#gqlimport" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">graphql-tag#gql</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize from which module will <code class="nextra-code" dir="ltr">gql</code> be imported from. This is useful if you want to use modules other than <code class="nextra-code" dir="ltr">graphql-tag</code>, e.g. <code class="nextra-code" dir="ltr">graphql.macro</code>.</p> <h4 id="usage-examples-9" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-9" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <h5 id="graphqlmacro" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">graphql.macro<a href="#graphqlmacro" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> gqlImport: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'graphql.macro#gql'</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h5 id="gatsby" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">Gatsby<a href="#gatsby" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> gqlImport: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'gatsby#graphql'</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="documentnodeimport" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">documentNodeImport</code><a href="#documentnodeimport" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">graphql#DocumentNode</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Customize from which module will <code class="nextra-code" dir="ltr">DocumentNode</code> be imported from. This is useful if you want to use modules other than <code class="nextra-code" dir="ltr">graphql</code>, e.g. <code class="nextra-code" dir="ltr">@graphql-typed-document-node</code>.</p> <h3 id="noexport" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">noExport</code><a href="#noexport" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Set this configuration to <code class="nextra-code" dir="ltr">true</code> if you wish to tell codegen to generate code with no <code class="nextra-code" dir="ltr">export</code> identifier.</p> <h3 id="dedupeoperationsuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">dedupeOperationSuffix</code><a href="#dedupeoperationsuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Set this configuration to <code class="nextra-code" dir="ltr">true</code> if you wish to make sure to remove duplicate operation name suffix.</p> <h3 id="omitoperationsuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">omitOperationSuffix</code><a href="#omitoperationsuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Set this configuration to <code class="nextra-code" dir="ltr">true</code> if you wish to disable auto add suffix of operation name, like <code class="nextra-code" dir="ltr">Query</code>, <code class="nextra-code" dir="ltr">Mutation</code>, <code class="nextra-code" dir="ltr">Subscription</code>, <code class="nextra-code" dir="ltr">Fragment</code>.</p> <h3 id="operationresultsuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">operationResultSuffix</code><a href="#operationresultsuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Adds a suffix to generated operation result type names</p> <h3 id="documentvariableprefix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">documentVariablePrefix</code><a href="#documentvariableprefix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Changes the GraphQL operations variables prefix.</p> <h3 id="documentvariablesuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">documentVariableSuffix</code><a href="#documentvariablesuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">Document</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Changes the GraphQL operations variables suffix.</p> <h3 id="fragmentvariableprefix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">fragmentVariablePrefix</code><a href="#fragmentvariableprefix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Changes the GraphQL fragments variables prefix.</p> <h3 id="fragmentvariablesuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">fragmentVariableSuffix</code><a href="#fragmentvariablesuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">FragmentDoc</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Changes the GraphQL fragments variables suffix.</p> <h3 id="documentmode" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">documentMode</code><a href="#documentmode" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">DocumentMode</code> default: <code class="nextra-code" dir="ltr">graphQLTag</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Declares how DocumentNode are created:</p> <ul class="[:is(ol,ul)_&]:_my-3 [&:not(:first-child)]:_mt-6 _list-disc ltr:_ml-6 rtl:_mr-6"> <li class="_my-2"><code class="nextra-code" dir="ltr">graphQLTag</code>: <code class="nextra-code" dir="ltr">graphql-tag</code> or other modules (check <code class="nextra-code" dir="ltr">gqlImport</code>) will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client</li> <li class="_my-2"><code class="nextra-code" dir="ltr">documentNode</code>: document nodes will be generated as objects when we generate the templates.</li> <li class="_my-2"><code class="nextra-code" dir="ltr">documentNodeImportFragments</code>: Similar to documentNode except it imports external fragments instead of embedding them.</li> <li class="_my-2"><code class="nextra-code" dir="ltr">external</code>: document nodes are imported from an external file. To be used with <code class="nextra-code" dir="ltr">importDocumentNodeExternallyFrom</code></li> </ul> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Note that some plugins (like <code class="nextra-code" dir="ltr">typescript-graphql-request</code>) also supports <code class="nextra-code" dir="ltr">string</code> for this parameter.</p> <h3 id="optimizedocumentnode" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">optimizeDocumentNode</code><a href="#optimizedocumentnode" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">If you are using <code class="nextra-code" dir="ltr">documentNode: documentMode | documentNodeImportFragments</code>, you can set this to <code class="nextra-code" dir="ltr">true</code> to apply document optimizations for your GraphQL document. This will remove all “loc” and “description” fields from the compiled document, and will remove all empty arrays (such as <code class="nextra-code" dir="ltr">directives</code>, <code class="nextra-code" dir="ltr">arguments</code> and <code class="nextra-code" dir="ltr">variableDefinitions</code>).</p> <h3 id="importoperationtypesfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">importOperationTypesFrom</code><a href="#importoperationtypesfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">This config is used internally by presets, but you can use it manually to tell codegen to prefix all base types that it’s using. This is useful if you wish to generate base types from <code class="nextra-code" dir="ltr">typescript-operations</code> plugin into a different file, and import it from there.</p> <h3 id="importdocumentnodeexternallyfrom" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">importDocumentNodeExternallyFrom</code><a href="#importdocumentnodeexternallyfrom" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">This config should be used if <code class="nextra-code" dir="ltr">documentMode</code> is <code class="nextra-code" dir="ltr">external</code>. This has 2 usage:</p> <ul class="[:is(ol,ul)_&]:_my-3 [&:not(:first-child)]:_mt-6 _list-disc ltr:_ml-6 rtl:_mr-6"> <li class="_my-2"> <p class="[&:not(:first-child)]:_mt-6 _leading-7">any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use <code class="nextra-code" dir="ltr">graphql-tag</code> in a separate file and export the generated document</p> </li> <li class="_my-2"> <p class="[&:not(:first-child)]:_mt-6 _leading-7">‘near-operation-file’: This is a special mode that is intended to be used with <code class="nextra-code" dir="ltr">near-operation-file</code> preset to import document nodes from those files. If these files are <code class="nextra-code" dir="ltr">.graphql</code> files, we make use of webpack loader.</p> </li> </ul> <h4 id="usage-examples-10" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-10" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> documentMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'external'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> importDocumentNodeExternallyFrom: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'path/to/document-node-file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> documentMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'external'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> importDocumentNodeExternallyFrom: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'near-operation-file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="puremagiccomment" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">pureMagicComment</code><a href="#puremagiccomment" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler.</p> <h3 id="experimentalfragmentvariables" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">experimentalFragmentVariables</code><a href="#experimentalfragmentvariables" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">If set to true, it will enable support for parsing variables on fragments.</p> <h3 id="strictscalars" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">strictScalars</code><a href="#strictscalars" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Makes scalars strict.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">If scalars are found in the schema that are not defined in <code class="nextra-code" dir="ltr">scalars</code> an error will be thrown during codegen.</p> <h4 id="usage-examples-11" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-11" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> strictScalars: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="defaultscalartype" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">defaultScalarType</code><a href="#defaultscalartype" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">any</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Allows you to override the type that unknown scalars will have.</p> <h4 id="usage-examples-12" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-12" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> defaultScalarType: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'unknown'</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="scalars" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">scalars</code><a href="#scalars" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">ScalarsMap</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.</p> <h4 id="usage-examples-13" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-13" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> scalars: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DateTime: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Date'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> JSON: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'{ [key: string]: any }'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="namingconvention" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">namingConvention</code><a href="#namingconvention" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">NamingConvention</code> default: <code class="nextra-code" dir="ltr">change-case-all#pascalCase</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Allow you to override the naming convention of the output. You can either override all namings, or specify an object with specific custom naming convention per output. The format of the converter must be a valid <code class="nextra-code" dir="ltr">module#method</code>. Allowed values for specific output are: <code class="nextra-code" dir="ltr">typeNames</code>, <code class="nextra-code" dir="ltr">enumValues</code>. You can also use “keep” to keep all GraphQL names as-is. Additionally, you can set <code class="nextra-code" dir="ltr">transformUnderscore</code> to <code class="nextra-code" dir="ltr">true</code> if you want to override the default behavior, which is to preserve underscores.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Available case functions in <code class="nextra-code" dir="ltr">change-case-all</code> are <code class="nextra-code" dir="ltr">camelCase</code>, <code class="nextra-code" dir="ltr">capitalCase</code>, <code class="nextra-code" dir="ltr">constantCase</code>, <code class="nextra-code" dir="ltr">dotCase</code>, <code class="nextra-code" dir="ltr">headerCase</code>, <code class="nextra-code" dir="ltr">noCase</code>, <code class="nextra-code" dir="ltr">paramCase</code>, <code class="nextra-code" dir="ltr">pascalCase</code>, <code class="nextra-code" dir="ltr">pathCase</code>, <code class="nextra-code" dir="ltr">sentenceCase</code>, <code class="nextra-code" dir="ltr">snakeCase</code>, <code class="nextra-code" dir="ltr">lowerCase</code>, <code class="nextra-code" dir="ltr">localeLowerCase</code>, <code class="nextra-code" dir="ltr">lowerCaseFirst</code>, <code class="nextra-code" dir="ltr">spongeCase</code>, <code class="nextra-code" dir="ltr">titleCase</code>, <code class="nextra-code" dir="ltr">upperCase</code>, <code class="nextra-code" dir="ltr">localeUpperCase</code> and <code class="nextra-code" dir="ltr">upperCaseFirst</code> <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://github.com/btxtiger/change-case-all">See more</a></p> <h4 id="usage-examples-14" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-14" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <h5 id="override-all-names" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">Override All Names<a href="#override-all-names" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> namingConvention: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'change-case-all#lowerCase'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h5 id="upper-case-enum-values" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">Upper-case enum values<a href="#upper-case-enum-values" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> namingConvention: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> typeNames: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'change-case-all#pascalCase'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> enumValues: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'change-case-all#upperCase'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h5 id="keep-names-as-is" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">Keep names as is<a href="#keep-names-as-is" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> namingConvention: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'keep'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h5 id="remove-underscores" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-lg">Remove Underscores<a href="#remove-underscores" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h5> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> namingConvention: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> typeNames: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'change-case-all#pascalCase'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> transformUnderscore: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="typesprefix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">typesPrefix</code><a href="#typesprefix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Prefixes all the generated types.</p> <h4 id="usage-examples-15" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-15" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> typesPrefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'I'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="typessuffix" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">typesSuffix</code><a href="#typessuffix" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">(empty)</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Suffixes all the generated types.</p> <h4 id="usage-examples-16" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-16" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> typesSuffix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'I'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="skiptypename" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">skipTypename</code><a href="#skiptypename" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Does not add <code class="nextra-code" dir="ltr">__typename</code> to the generated types, unless it was specified in the selection set.</p> <h4 id="usage-examples-17" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-17" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> skipTypename: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="nonoptionaltypename" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">nonOptionalTypename</code><a href="#nonoptionaltypename" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Automatically adds <code class="nextra-code" dir="ltr">__typename</code> field to the generated types, even when they are not specified in the selection set, and makes it non-optional</p> <h4 id="usage-examples-18" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-18" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> nonOptionalTypename: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="usetypeimports" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">useTypeImports</code><a href="#usetypeimports" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Will use <code class="nextra-code" dir="ltr">import type {}</code> rather than <code class="nextra-code" dir="ltr">import {}</code> when importing only types. This gives compatibility with TypeScript’s “importsNotUsedAsValues”: “error” option</p> <h4 id="usage-examples-19" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-xl">Usage Examples<a href="#usage-examples-19" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h4> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'path/to/file'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // plugins...</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> useTypeImports: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> };</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config;</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="dedupefragments" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">dedupeFragments</code><a href="#dedupefragments" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">false</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Removes fragment duplicates for reducing data transfer. It is done by removing sub-fragments imports from fragment definition Instead - all of them are imported to the Operation node.</p> <h3 id="inlinefragmenttypes" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">inlineFragmentTypes</code><a href="#inlinefragmenttypes" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">string</code> default: <code class="nextra-code" dir="ltr">inline</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Whether fragment types should be inlined into other operations. “inline” is the default behavior and will perform deep inlining fragment types within operation type definitions. “combine” is the previous behavior that uses fragment type references without inlining the types (and might cause issues with deeply nested fragment that uses list types).</p> <h3 id="emitlegacycommonjsimports" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl"><code class="nextra-code" dir="ltr">emitLegacyCommonJSImports</code><a href="#emitlegacycommonjsimports" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">type: <code class="nextra-code" dir="ltr">boolean</code> default: <code class="nextra-code" dir="ltr">true</code></p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Emit legacy common js imports. Default it will be <code class="nextra-code" dir="ltr">true</code> this way it ensure that generated code works with <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://github.com/dotansimha/graphql-code-generator/issues/8065">non-compliant bundlers</a>.</p>  <h2 id="usage-example" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Usage Example<a href="#usage-example" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <h3 id="with-react-hooks" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">With React Hooks<a href="#with-react-hooks" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">For the given input:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">query</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> feed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> id</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> commentCount</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> repository</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> full_name</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> html_url</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> owner</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"> avatar_url</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">And the following configuration:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M0 2.66667V21.3333C0 22.8067 1.19333 24 2.66667 24H21.3333C22.8067 24 24 22.8067 24 21.3333V2.66667C24 1.19333 22.8067 0 21.3333 0H2.66667C1.19333 0 0 1.19333 0 2.66667ZM14.2213 12.6013H11.3973V21.3333H9.12133V12.6013H6.356V10.6667H14.2213V12.6013ZM14.664 20.8347V18.5C14.664 18.5 15.9387 19.4613 17.4693 19.4613C19 19.4613 18.94 18.4613 18.94 18.324C18.94 16.872 14.6053 16.872 14.6053 13.656C14.6053 9.28133 20.9213 11.008 20.9213 11.008L20.8427 13.0867C20.8427 13.0867 19.784 12.38 18.5867 12.38C17.3907 12.38 16.9587 12.9493 16.9587 13.5573C16.9587 15.1267 21.3333 14.9693 21.3333 18.128C21.3333 22.992 14.664 20.8347 14.664 20.8347Z"></path></svg><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> schema: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'YOUR_SCHEMA_HERE'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> documents: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'./src/**/*.graphql'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> './generated-types.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Codegen will pre-compile the GraphQL operation into a <code class="nextra-code" dir="ltr">DocumentNode</code> object, and generate a ready-to-use React Hook for each operation you have.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">In your application code, you can import it from the generated file, and use the React Hook in your component code:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { useTest } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> './generated-types'</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> MyComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> React</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">FC</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useTest</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">()</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>…</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div> <h3 id="generate-data-component" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Generate Data Component<a href="#generate-data-component" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Codegen also supports generating data Components (deprecated in <code class="nextra-code" dir="ltr">@apollo/client</code> v3), you can turn it on this way:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M0 2.66667V21.3333C0 22.8067 1.19333 24 2.66667 24H21.3333C22.8067 24 24 22.8067 24 21.3333V2.66667C24 1.19333 22.8067 0 21.3333 0H2.66667C1.19333 0 0 1.19333 0 2.66667ZM14.2213 12.6013H11.3973V21.3333H9.12133V12.6013H6.356V10.6667H14.2213V12.6013ZM14.664 20.8347V18.5C14.664 18.5 15.9387 19.4613 17.4693 19.4613C19 19.4613 18.94 18.4613 18.94 18.324C18.94 16.872 14.6053 16.872 14.6053 13.656C14.6053 9.28133 20.9213 11.008 20.9213 11.008L20.8427 13.0867C20.8427 13.0867 19.784 12.38 18.5867 12.38C17.3907 12.38 16.9587 12.9493 16.9587 13.5573C16.9587 15.1267 21.3333 14.9693 21.3333 18.128C21.3333 22.992 14.664 20.8347 14.664 20.8347Z"></path></svg><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> schema: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'YOUR_SCHEMA_HERE'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> documents: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'./src/**/*.graphql'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> './generated-types.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span data-highlighted-line=""><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withComponent: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h3 id="generate-hoc" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Generate HOC<a href="#generate-hoc" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Codegen also supports generating High-Order-Components (deprecated in <code class="nextra-code" dir="ltr">@apollo/client</code> v3), you can turn it on this way:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M0 2.66667V21.3333C0 22.8067 1.19333 24 2.66667 24H21.3333C22.8067 24 24 22.8067 24 21.3333V2.66667C24 1.19333 22.8067 0 21.3333 0H2.66667C1.19333 0 0 1.19333 0 2.66667ZM14.2213 12.6013H11.3973V21.3333H9.12133V12.6013H6.356V10.6667H14.2213V12.6013ZM14.664 20.8347V18.5C14.664 18.5 15.9387 19.4613 17.4693 19.4613C19 19.4613 18.94 18.4613 18.94 18.324C18.94 16.872 14.6053 16.872 14.6053 13.656C14.6053 9.28133 20.9213 11.008 20.9213 11.008L20.8427 13.0867C20.8427 13.0867 19.784 12.38 18.5867 12.38C17.3907 12.38 16.9587 12.9493 16.9587 13.5573C16.9587 15.1267 21.3333 14.9693 21.3333 18.128C21.3333 22.992 14.664 20.8347 14.664 20.8347Z"></path></svg><span class="_truncate">codegen.ts</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { CodegenConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@graphql-codegen/cli'</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> CodegenConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> schema: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'YOUR_SCHEMA_HERE'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> documents: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'./src/**/*.graphql'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> generates: {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> './generated-types.ts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> plugins: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-operations'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'typescript-react-apollo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">],</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config: {</span></span> <span data-highlighted-line=""><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> withHOC: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> config</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <div class="nextra-callout _overflow-x-auto _mt-6 _flex _rounded-lg _border _py-2 ltr:_pr-4 rtl:_pl-4 contrast-more:_border-current contrast-more:dark:_border-current _border-orange-100 _bg-orange-50 _text-orange-800 dark:_border-orange-400/30 dark:_bg-orange-400/20 dark:_text-orange-300"><div class="_select-none _text-xl ltr:_pl-3 ltr:_pr-2 rtl:_pr-3 rtl:_pl-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"">💡</div><div class="_w-full _min-w-0 _leading-7"><p class="[&:not(:first-child)]:_mt-6 _leading-7">Watch <a class="hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 font-medium text-blue-700 underline underline-offset-2 hover:no-underline focus-visible:no-underline focus-visible:ring-current focus-visible:ring-offset-blue-200 dark:text-primary/90 dark:focus-visible:ring-primary/50 outline-none transition focus-visible:ring" href="https://graphql.wtf/episodes/29-apollo-client-3-with-graphql-code-generator">Episode #29 of <code class="nextra-code" dir="ltr">graphql.wtf</code></a> for a quick introduction to using this plugin with GraphQL Code Generator:</p></div></div> <iframe class="mt-6 aspect-video w-full" title="YouTube Video Player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://youtube.com/embed/PYDGjTufGsk"></iframe><div class="_mt-16"></div><div class="_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800 contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400 print:_hidden"><a title="operations" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_pr-4 rtl:_pl-4" href="/graphql/codegen/plugins/typescript/typescript-operations"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 ltr:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>operations</a><a title="react-query" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left" href="/graphql/codegen/plugins/typescript/typescript-react-query">react-query<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></main></article></div><footer class="relative flex justify-center px-4 py-6 xl:px-[120px] [&>:first-child]:mx-0 [&>:first-child]:max-w-[90rem] 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":{"__nextra_dynamic_mdx":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nconst title = \"TypeScript React Apollo\";\nconst frontMatter = {};\nfunction useTOC(props) {\n const _components = {\n code: \"code\",\n ..._provideComponents()\n };\n return [{\n value: \"Installation\",\n id: \"installation\",\n depth: 2\n }, {\n value: \"Config API Reference\",\n id: \"config-api-reference\",\n depth: 2\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withComponent\"\n })\n }),\n id: \"withcomponent\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withHOC\"\n })\n }),\n id: \"withhoc\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-1\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withHooks\"\n })\n }),\n id: \"withhooks\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-2\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withMutationFn\"\n })\n }),\n id: \"withmutationfn\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-3\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withRefetchFn\"\n })\n }),\n id: \"withrefetchfn\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-4\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"apolloReactCommonImportFrom\"\n })\n }),\n id: \"apolloreactcommonimportfrom\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"apolloReactComponentsImportFrom\"\n })\n }),\n id: \"apolloreactcomponentsimportfrom\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"apolloReactHocImportFrom\"\n })\n }),\n id: \"apolloreacthocimportfrom\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"apolloReactHooksImportFrom\"\n })\n }),\n id: \"apolloreacthooksimportfrom\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"componentSuffix\"\n })\n }),\n id: \"componentsuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"reactApolloVersion\"\n })\n }),\n id: \"reactapolloversion\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-5\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withResultType\"\n })\n }),\n id: \"withresulttype\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-6\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"withMutationOptionsType\"\n })\n }),\n id: \"withmutationoptionstype\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-7\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"addDocBlocks\"\n })\n }),\n id: \"adddocblocks\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-8\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"defaultBaseOptions\"\n })\n }),\n id: \"defaultbaseoptions\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"hooksSuffix\"\n })\n }),\n id: \"hookssuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"noGraphQLTag\"\n })\n }),\n id: \"nographqltag\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"gqlImport\"\n })\n }),\n id: \"gqlimport\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-9\",\n depth: 4\n }, {\n value: \"graphql.macro\",\n id: \"graphqlmacro\",\n depth: 5\n }, {\n value: \"Gatsby\",\n id: \"gatsby\",\n depth: 5\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"documentNodeImport\"\n })\n }),\n id: \"documentnodeimport\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"noExport\"\n })\n }),\n id: \"noexport\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"dedupeOperationSuffix\"\n })\n }),\n id: \"dedupeoperationsuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"omitOperationSuffix\"\n })\n }),\n id: \"omitoperationsuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"operationResultSuffix\"\n })\n }),\n id: \"operationresultsuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"documentVariablePrefix\"\n })\n }),\n id: \"documentvariableprefix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"documentVariableSuffix\"\n })\n }),\n id: \"documentvariablesuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"fragmentVariablePrefix\"\n })\n }),\n id: \"fragmentvariableprefix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"fragmentVariableSuffix\"\n })\n }),\n id: \"fragmentvariablesuffix\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"documentMode\"\n })\n }),\n id: \"documentmode\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"optimizeDocumentNode\"\n })\n }),\n id: \"optimizedocumentnode\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"importOperationTypesFrom\"\n })\n }),\n id: \"importoperationtypesfrom\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"importDocumentNodeExternallyFrom\"\n })\n }),\n id: \"importdocumentnodeexternallyfrom\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-10\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"pureMagicComment\"\n })\n }),\n id: \"puremagiccomment\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"experimentalFragmentVariables\"\n })\n }),\n id: \"experimentalfragmentvariables\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"strictScalars\"\n })\n }),\n id: \"strictscalars\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-11\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"defaultScalarType\"\n })\n }),\n id: \"defaultscalartype\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-12\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"scalars\"\n })\n }),\n id: \"scalars\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-13\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"namingConvention\"\n })\n }),\n id: \"namingconvention\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-14\",\n depth: 4\n }, {\n value: \"Override All Names\",\n id: \"override-all-names\",\n depth: 5\n }, {\n value: \"Upper-case enum values\",\n id: \"upper-case-enum-values\",\n depth: 5\n }, {\n value: \"Keep names as is\",\n id: \"keep-names-as-is\",\n depth: 5\n }, {\n value: \"Remove Underscores\",\n id: \"remove-underscores\",\n depth: 5\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"typesPrefix\"\n })\n }),\n id: \"typesprefix\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-15\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"typesSuffix\"\n })\n }),\n id: \"typessuffix\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-16\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"skipTypename\"\n })\n }),\n id: \"skiptypename\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-17\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"nonOptionalTypename\"\n })\n }),\n id: \"nonoptionaltypename\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-18\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"useTypeImports\"\n })\n }),\n id: \"usetypeimports\",\n depth: 3\n }, {\n value: \"Usage Examples\",\n id: \"usage-examples-19\",\n depth: 4\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"dedupeFragments\"\n })\n }),\n id: \"dedupefragments\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"inlineFragmentTypes\"\n })\n }),\n id: \"inlinefragmenttypes\",\n depth: 3\n }, {\n value: _jsx(_Fragment, {\n children: _jsx(_components.code, {\n children: \"emitLegacyCommonJSImports\"\n })\n }),\n id: \"emitlegacycommonjsimports\",\n depth: 3\n }];\n}\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n h4: \"h4\",\n h5: \"h5\",\n img: \"img\",\n li: \"li\",\n p: \"p\",\n pre: \"pre\",\n span: \"span\",\n strong: \"strong\",\n table: \"table\",\n tbody: \"tbody\",\n td: \"td\",\n th: \"th\",\n thead: \"thead\",\n tr: \"tr\",\n ul: \"ul\",\n ..._provideComponents(),\n ...props.components\n }, {$Tabs, Callout} = _components;\n if (!$Tabs) _missingMdxReference(\"$Tabs\", true);\n if (!$Tabs.Tab) _missingMdxReference(\"$Tabs.Tab\", true);\n if (!Callout) _missingMdxReference(\"Callout\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h1, {\n children: \"TypeScript React Apollo\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n children: \"Package name\"\n }), _jsx(_components.th, {\n children: \"Weekly Downloads\"\n }), _jsx(_components.th, {\n children: \"Version\"\n }), _jsx(_components.th, {\n children: \"License\"\n }), _jsx(_components.th, {\n children: \"Updated\"\n })]\n })\n }), _jsx(_components.tbody, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n children: _jsx(_components.a, {\n href: \"https://npmjs.com/package/@graphql-codegen/typescript-react-apollo\",\n children: _jsx(_components.code, {\n children: \"@graphql-codegen/typescript-react-apollo\"\n })\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.img, {\n src: \"https://badgen.net/npm/dw/@graphql-codegen/typescript-react-apollo\",\n alt: \"Downloads\",\n title: \"Downloads\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.img, {\n src: \"https://badgen.net/npm/v/@graphql-codegen/typescript-react-apollo\",\n alt: \"Version\",\n title: \"Version\"\n })\n }), _jsx(_components.td, {\n children: _jsx(_components.img, {\n src: \"https://badgen.net/npm/license/@graphql-codegen/typescript-react-apollo\",\n alt: \"License\",\n title: \"License\"\n })\n }), _jsx(_components.td, {\n children: \"Feb 19th, 2025\"\n })]\n })\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"installation\",\n children: \"Installation\"\n }), \"\\n\", _jsxs($Tabs, {\n items: [\"npm\", \"pnpm\", \"yarn\", \"bun\"],\n storageKey: \"selectedPackageManager\",\n children: [_jsx($Tabs.Tab, {\n children: _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-word-wrap\": \"\",\n \"data-copy\": \"\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \"npm\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" i\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" -D\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" @graphql-codegen/typescript-react-apollo\"\n })]\n })\n })\n })\n }), _jsx($Tabs.Tab, {\n children: _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-word-wrap\": \"\",\n \"data-copy\": \"\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \"pnpm\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" add\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" -D\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" @graphql-codegen/typescript-react-apollo\"\n })]\n })\n })\n })\n }), _jsx($Tabs.Tab, {\n children: _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-word-wrap\": \"\",\n \"data-copy\": \"\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \"yarn\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" add\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" --dev\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" @graphql-codegen/typescript-react-apollo\"\n })]\n })\n })\n })\n }), _jsx($Tabs.Tab, {\n children: _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"sh\",\n \"data-word-wrap\": \"\",\n \"data-copy\": \"\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \"bun\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" add\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" --dev\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" @graphql-codegen/typescript-react-apollo\"\n })]\n })\n })\n })\n })]\n }), \"\\n\", _jsxs(Callout, {\n type: \"warning\",\n children: [_jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Usage Requirements\"\n }), \"\\nIn order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (\", _jsx(_components.code, {\n children: \"query\"\n }), \" / \", _jsx(_components.code, {\n children: \"mutation\"\n }), \" / \", _jsx(_components.code, {\n children: \"subscription\"\n }), \" and \", _jsx(_components.code, {\n children: \"fragment\"\n }), \") set as \", _jsx(_components.code, {\n children: \"documents: …\"\n }), \" in your \", _jsx(_components.code, {\n children: \"codegen.yml\"\n }), \".\"]\n }), _jsxs(_components.p, {\n children: [\"Without loading your GraphQL operations (\", _jsx(_components.code, {\n children: \"query\"\n }), \", \", _jsx(_components.code, {\n children: \"mutation\"\n }), \", \", _jsx(_components.code, {\n children: \"subscription\"\n }), \" and \", _jsx(_components.code, {\n children: \"fragment\"\n }), \"), you won’t see any change in the generated output.\"]\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"This plugin generates React Apollo components and HOC with TypeScript typings.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"It extends the basic TypeScript plugins: \", _jsx(_components.code, {\n children: \"@graphql-codegen/typescript\"\n }), \", \", _jsx(_components.code, {\n children: \"@graphql-codegen/typescript-operations\"\n }), \" - and thus shares a similar configuration.\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"config-api-reference\",\n children: \"Config API Reference\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withcomponent\",\n children: _jsx(_components.code, {\n children: \"withComponent\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Customize the output by enabling/disabling the generated Component (deprecated since Apollo-Client v3). For more details: \", _jsx(_components.a, {\n href: \"https://apollographql.com/docs/react/api/react/components\",\n children: \"https://apollographql.com/docs/react/api/react/components\"\n })]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withComponent: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withhoc\",\n children: _jsx(_components.code, {\n children: \"withHOC\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Customize the output by enabling/disabling the HOC (deprecated since Apollo-Client v3). For more details: \", _jsx(_components.a, {\n href: \"https://apollographql.com/docs/react/api/react/hoc\",\n children: \"https://apollographql.com/docs/react/api/react/hoc\"\n })]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-1\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withHOC: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withhooks\",\n children: _jsx(_components.code, {\n children: \"withHooks\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Customized the output by enabling/disabling the generated React Hooks. For more details: \", _jsx(_components.a, {\n href: \"https://apollographql.com/docs/react/api/react/hooks\",\n children: \"https://apollographql.com/docs/react/api/react/hooks\"\n })]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-2\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withHooks: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withmutationfn\",\n children: _jsx(_components.code, {\n children: \"withMutationFn\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customized the output by enabling/disabling the generated mutation function signature.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-3\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withMutationFn: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withrefetchfn\",\n children: _jsx(_components.code, {\n children: \"withRefetchFn\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Enable generating a function to be used with refetchQueries\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-4\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withRefetchFn: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"apolloreactcommonimportfrom\",\n children: _jsx(_components.code, {\n children: \"apolloReactCommonImportFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"@apollo/react-common\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customize the package where apollo-react common lib is loaded from.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"apolloreactcomponentsimportfrom\",\n children: _jsx(_components.code, {\n children: \"apolloReactComponentsImportFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"@apollo/react-components\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customize the package where apollo-react component lib is loaded from.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"apolloreacthocimportfrom\",\n children: _jsx(_components.code, {\n children: \"apolloReactHocImportFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"@apollo/react-hoc\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customize the package where apollo-react HOC lib is loaded from.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"apolloreacthooksimportfrom\",\n children: _jsx(_components.code, {\n children: \"apolloReactHooksImportFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"@apollo/react-hooks\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customize the package where apollo-react hooks lib is loaded from.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"componentsuffix\",\n children: _jsx(_components.code, {\n children: \"componentSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"Component\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"You can specify a suffix that gets attached to the name of the generated component.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"reactapolloversion\",\n children: _jsx(_components.code, {\n children: \"reactApolloVersion\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"number (values: 2, 3)\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"3\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Sets the version of react-apollo.\\nIf you are using the old (deprecated) package of \", _jsx(_components.code, {\n children: \"react-apollo\"\n }), \", please set this configuration to \", _jsx(_components.code, {\n children: \"2\"\n }), \".\\nIf you are using Apollo-Client v3, please set this to \", _jsx(_components.code, {\n children: \"3\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-5\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" reactApolloVersion: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"2\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withresulttype\",\n children: _jsx(_components.code, {\n children: \"withResultType\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customized the output by enabling/disabling the generated result type.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-6\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withResultType: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"withmutationoptionstype\",\n children: _jsx(_components.code, {\n children: \"withMutationOptionsType\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Customized the output by enabling/disabling the generated mutation option type.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-7\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" withMutationOptionsType: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"adddocblocks\",\n children: _jsx(_components.code, {\n children: \"addDocBlocks\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Allows you to enable/disable the generation of docblocks in generated code.\\nSome IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-8\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file.ts'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" plugins: [\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-operations'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'typescript-react-apollo'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"],\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" addDocBlocks: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"defaultbaseoptions\",\n children: _jsx(_components.code, {\n children: \"defaultBaseOptions\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"object\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"hookssuffix\",\n children: _jsx(_components.code, {\n children: \"hooksSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"nographqltag\",\n children: _jsx(_components.code, {\n children: \"noGraphQLTag\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Deprecated. Changes the documentMode to \", _jsx(_components.code, {\n children: \"documentNode\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"gqlimport\",\n children: _jsx(_components.code, {\n children: \"gqlImport\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"graphql-tag#gql\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Customize from which module will \", _jsx(_components.code, {\n children: \"gql\"\n }), \" be imported from.\\nThis is useful if you want to use modules other than \", _jsx(_components.code, {\n children: \"graphql-tag\"\n }), \", e.g. \", _jsx(_components.code, {\n children: \"graphql.macro\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-9\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.h5, {\n id: \"graphqlmacro\",\n children: \"graphql.macro\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" gqlImport: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'graphql.macro#gql'\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h5, {\n id: \"gatsby\",\n children: \"Gatsby\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" gqlImport: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'gatsby#graphql'\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"documentnodeimport\",\n children: _jsx(_components.code, {\n children: \"documentNodeImport\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"graphql#DocumentNode\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Customize from which module will \", _jsx(_components.code, {\n children: \"DocumentNode\"\n }), \" be imported from.\\nThis is useful if you want to use modules other than \", _jsx(_components.code, {\n children: \"graphql\"\n }), \", e.g. \", _jsx(_components.code, {\n children: \"@graphql-typed-document-node\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"noexport\",\n children: _jsx(_components.code, {\n children: \"noExport\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Set this configuration to \", _jsx(_components.code, {\n children: \"true\"\n }), \" if you wish to tell codegen to generate code with no \", _jsx(_components.code, {\n children: \"export\"\n }), \" identifier.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"dedupeoperationsuffix\",\n children: _jsx(_components.code, {\n children: \"dedupeOperationSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Set this configuration to \", _jsx(_components.code, {\n children: \"true\"\n }), \" if you wish to make sure to remove duplicate operation name suffix.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"omitoperationsuffix\",\n children: _jsx(_components.code, {\n children: \"omitOperationSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Set this configuration to \", _jsx(_components.code, {\n children: \"true\"\n }), \" if you wish to disable auto add suffix of operation name, like \", _jsx(_components.code, {\n children: \"Query\"\n }), \", \", _jsx(_components.code, {\n children: \"Mutation\"\n }), \", \", _jsx(_components.code, {\n children: \"Subscription\"\n }), \", \", _jsx(_components.code, {\n children: \"Fragment\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"operationresultsuffix\",\n children: _jsx(_components.code, {\n children: \"operationResultSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Adds a suffix to generated operation result type names\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"documentvariableprefix\",\n children: _jsx(_components.code, {\n children: \"documentVariablePrefix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Changes the GraphQL operations variables prefix.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"documentvariablesuffix\",\n children: _jsx(_components.code, {\n children: \"documentVariableSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"Document\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Changes the GraphQL operations variables suffix.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"fragmentvariableprefix\",\n children: _jsx(_components.code, {\n children: \"fragmentVariablePrefix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Changes the GraphQL fragments variables prefix.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"fragmentvariablesuffix\",\n children: _jsx(_components.code, {\n children: \"fragmentVariableSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"FragmentDoc\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Changes the GraphQL fragments variables suffix.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"documentmode\",\n children: _jsx(_components.code, {\n children: \"documentMode\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"DocumentMode\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"graphQLTag\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Declares how DocumentNode are created:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.code, {\n children: \"graphQLTag\"\n }), \": \", _jsx(_components.code, {\n children: \"graphql-tag\"\n }), \" or other modules (check \", _jsx(_components.code, {\n children: \"gqlImport\"\n }), \") will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.code, {\n children: \"documentNode\"\n }), \": document nodes will be generated as objects when we generate the templates.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.code, {\n children: \"documentNodeImportFragments\"\n }), \": Similar to documentNode except it imports external fragments instead of embedding them.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.code, {\n children: \"external\"\n }), \": document nodes are imported from an external file. To be used with \", _jsx(_components.code, {\n children: \"importDocumentNodeExternallyFrom\"\n })]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Note that some plugins (like \", _jsx(_components.code, {\n children: \"typescript-graphql-request\"\n }), \") also supports \", _jsx(_components.code, {\n children: \"string\"\n }), \" for this parameter.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"optimizedocumentnode\",\n children: _jsx(_components.code, {\n children: \"optimizeDocumentNode\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If you are using \", _jsx(_components.code, {\n children: \"documentNode: documentMode | documentNodeImportFragments\"\n }), \", you can set this to \", _jsx(_components.code, {\n children: \"true\"\n }), \" to apply document optimizations for your GraphQL document.\\nThis will remove all “loc” and “description” fields from the compiled document, and will remove all empty arrays (such as \", _jsx(_components.code, {\n children: \"directives\"\n }), \", \", _jsx(_components.code, {\n children: \"arguments\"\n }), \" and \", _jsx(_components.code, {\n children: \"variableDefinitions\"\n }), \").\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"importoperationtypesfrom\",\n children: _jsx(_components.code, {\n children: \"importOperationTypesFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This config is used internally by presets, but you can use it manually to tell codegen to prefix all base types that it’s using.\\nThis is useful if you wish to generate base types from \", _jsx(_components.code, {\n children: \"typescript-operations\"\n }), \" plugin into a different file, and import it from there.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"importdocumentnodeexternallyfrom\",\n children: _jsx(_components.code, {\n children: \"importDocumentNodeExternallyFrom\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"This config should be used if \", _jsx(_components.code, {\n children: \"documentMode\"\n }), \" is \", _jsx(_components.code, {\n children: \"external\"\n }), \". This has 2 usage:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use \", _jsx(_components.code, {\n children: \"graphql-tag\"\n }), \" in a separate file and export the generated document\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"\\n\", _jsxs(_components.p, {\n children: [\"‘near-operation-file’: This is a special mode that is intended to be used with \", _jsx(_components.code, {\n children: \"near-operation-file\"\n }), \" preset to import document nodes from those files. If these files are \", _jsx(_components.code, {\n children: \".graphql\"\n }), \" files, we make use of webpack loader.\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-10\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" documentMode: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'external'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" importDocumentNodeExternallyFrom: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'path/to/document-node-file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" documentMode: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'external'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" importDocumentNodeExternallyFrom: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'near-operation-file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"puremagiccomment\",\n children: _jsx(_components.code, {\n children: \"pureMagicComment\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"experimentalfragmentvariables\",\n children: _jsx(_components.code, {\n children: \"experimentalFragmentVariables\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"If set to true, it will enable support for parsing variables on fragments.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"strictscalars\",\n children: _jsx(_components.code, {\n children: \"strictScalars\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Makes scalars strict.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If scalars are found in the schema that are not defined in \", _jsx(_components.code, {\n children: \"scalars\"\n }), \"\\nan error will be thrown during codegen.\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-11\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" strictScalars: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"defaultscalartype\",\n children: _jsx(_components.code, {\n children: \"defaultScalarType\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"any\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Allows you to override the type that unknown scalars will have.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-12\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" defaultScalarType: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'unknown'\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"scalars\",\n children: _jsx(_components.code, {\n children: \"scalars\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"ScalarsMap\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-13\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" scalars: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" DateTime: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'Date'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" JSON: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'{ [key: string]: any }'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"namingconvention\",\n children: _jsx(_components.code, {\n children: \"namingConvention\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"NamingConvention\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"change-case-all#pascalCase\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Allow you to override the naming convention of the output.\\nYou can either override all namings, or specify an object with specific custom naming convention per output.\\nThe format of the converter must be a valid \", _jsx(_components.code, {\n children: \"module#method\"\n }), \".\\nAllowed values for specific output are: \", _jsx(_components.code, {\n children: \"typeNames\"\n }), \", \", _jsx(_components.code, {\n children: \"enumValues\"\n }), \".\\nYou can also use “keep” to keep all GraphQL names as-is.\\nAdditionally, you can set \", _jsx(_components.code, {\n children: \"transformUnderscore\"\n }), \" to \", _jsx(_components.code, {\n children: \"true\"\n }), \" if you want to override the default behavior,\\nwhich is to preserve underscores.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Available case functions in \", _jsx(_components.code, {\n children: \"change-case-all\"\n }), \" are \", _jsx(_components.code, {\n children: \"camelCase\"\n }), \", \", _jsx(_components.code, {\n children: \"capitalCase\"\n }), \", \", _jsx(_components.code, {\n children: \"constantCase\"\n }), \", \", _jsx(_components.code, {\n children: \"dotCase\"\n }), \", \", _jsx(_components.code, {\n children: \"headerCase\"\n }), \", \", _jsx(_components.code, {\n children: \"noCase\"\n }), \", \", _jsx(_components.code, {\n children: \"paramCase\"\n }), \", \", _jsx(_components.code, {\n children: \"pascalCase\"\n }), \", \", _jsx(_components.code, {\n children: \"pathCase\"\n }), \", \", _jsx(_components.code, {\n children: \"sentenceCase\"\n }), \", \", _jsx(_components.code, {\n children: \"snakeCase\"\n }), \", \", _jsx(_components.code, {\n children: \"lowerCase\"\n }), \", \", _jsx(_components.code, {\n children: \"localeLowerCase\"\n }), \", \", _jsx(_components.code, {\n children: \"lowerCaseFirst\"\n }), \", \", _jsx(_components.code, {\n children: \"spongeCase\"\n }), \", \", _jsx(_components.code, {\n children: \"titleCase\"\n }), \", \", _jsx(_components.code, {\n children: \"upperCase\"\n }), \", \", _jsx(_components.code, {\n children: \"localeUpperCase\"\n }), \" and \", _jsx(_components.code, {\n children: \"upperCaseFirst\"\n }), \"\\n\", _jsx(_components.a, {\n href: \"https://github.com/btxtiger/change-case-all\",\n children: \"See more\"\n })]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-14\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.h5, {\n id: \"override-all-names\",\n children: \"Override All Names\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" namingConvention: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'change-case-all#lowerCase'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h5, {\n id: \"upper-case-enum-values\",\n children: \"Upper-case enum values\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" namingConvention: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" typeNames: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'change-case-all#pascalCase'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" enumValues: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'change-case-all#upperCase'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h5, {\n id: \"keep-names-as-is\",\n children: \"Keep names as is\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" namingConvention: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'keep'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h5, {\n id: \"remove-underscores\",\n children: \"Remove Underscores\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" namingConvention: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" typeNames: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'change-case-all#pascalCase'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" transformUnderscore: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"typesprefix\",\n children: _jsx(_components.code, {\n children: \"typesPrefix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Prefixes all the generated types.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-15\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" typesPrefix: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'I'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"typessuffix\",\n children: _jsx(_components.code, {\n children: \"typesSuffix\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"(empty)\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Suffixes all the generated types.\"\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-16\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" typesSuffix: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \"'I'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"skiptypename\",\n children: _jsx(_components.code, {\n children: \"skipTypename\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Does not add \", _jsx(_components.code, {\n children: \"__typename\"\n }), \" to the generated types, unless it was specified in the selection set.\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-17\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" skipTypename: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"nonoptionaltypename\",\n children: _jsx(_components.code, {\n children: \"nonOptionalTypename\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Automatically adds \", _jsx(_components.code, {\n children: \"__typename\"\n }), \" field to the generated types, even when they are not specified\\nin the selection set, and makes it non-optional\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-18\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" nonOptionalTypename: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"usetypeimports\",\n children: _jsx(_components.code, {\n children: \"useTypeImports\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Will use \", _jsx(_components.code, {\n children: \"import type {}\"\n }), \" rather than \", _jsx(_components.code, {\n children: \"import {}\"\n }), \" when importing only types. This gives\\ncompatibility with TypeScript’s “importsNotUsedAsValues”: “error” option\"]\n }), \"\\n\", _jsx(_components.h4, {\n id: \"usage-examples-19\",\n children: \"Usage Examples\"\n }), \"\\n\", _jsx(_components.pre, {\n tabIndex: \"0\",\n \"data-language\": \"ts\",\n \"data-word-wrap\": \"\",\n \"data-filename\": \"codegen.ts\",\n \"data-copy\": \"\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" import\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { CodegenConfig } \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" '@graphql-codegen/cli'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: \" \"\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \" config\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6F42C1\",\n \"--shiki-dark\": \"#B392F0\"\n },\n children: \" CodegenConfig\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // ...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" generates: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" 'path/to/file'\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \": {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#6A737D\",\n \"--shiki-dark\": \"#6A737D\"\n },\n children: \" // plugins...\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config: {\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" useTypeImports: \"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"true\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n children: _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" };\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n children: [_jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" export\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \" default\"\n }), _jsx(_components.span, {\n style: {\n \"--shiki-light\": \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" config;\"\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"dedupefragments\",\n children: _jsx(_components.code, {\n children: \"dedupeFragments\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"false\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Removes fragment duplicates for reducing data transfer.\\nIt is done by removing sub-fragments imports from fragment definition\\nInstead - all of them are imported to the Operation node.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"inlinefragmenttypes\",\n children: _jsx(_components.code, {\n children: \"inlineFragmentTypes\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"string\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"inline\"\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Whether fragment types should be inlined into other operations.\\n“inline” is the default behavior and will perform deep inlining fragment types within operation type definitions.\\n“combine” is the previous behavior that uses fragment type references without inlining the types (and might cause issues with deeply nested fragment that uses list types).\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"emitlegacycommonjsimports\",\n children: _jsx(_components.code, {\n children: \"emitLegacyCommonJSImports\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"type: \", _jsx(_components.code, {\n children: \"boolean\"\n }), \"\\ndefault: \", _jsx(_components.code, {\n children: \"true\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Emit legacy common js imports.\\nDefault it will be \", _jsx(_components.code, {\n children: \"true\"\n }), \" this way it ensure that generated code works with \", _jsx(_components.a, {\n href: \"https://github.com/dotansimha/graphql-code-generator/issues/8065\",\n children: \"non-compliant bundlers\"\n }), \".\"]\n })]\n });\n}\nreturn {\n title,\n frontMatter,\n useTOC,\n default: _createMdxContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","__nextra_dynamic_opts":{"frontMatter":{},"title":"TypeScript React Apollo"}},"__N_SSG":true},"page":"/plugins/typescript/typescript-react-apollo","query":{},"buildId":"K2P7GsBAmgQYRl4Gjn_8Y","assetPrefix":"/graphql/codegen","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>

CINXE.COM

Cloud Security Alliance Star Level One Badge