[{"data":1,"prerenderedAt":475},["ShallowReactive",2],{"navigation_docs":3,"-recipes-typescript-support":43,"-recipes-typescript-support-surround":472},[4,26],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Getting Started","/getting-started","1.getting-started",[9,13,17,21],{"title":10,"path":11,"stem":12},"Quick Start","/getting-started/quick-start","1.getting-started/1.quick-start",{"title":14,"path":15,"stem":16},"Configuration","/getting-started/configuration","1.getting-started/2.configuration",{"title":18,"path":19,"stem":20},"Composables","/getting-started/composables","1.getting-started/3.composables",{"title":22,"path":23,"stem":24},"Auth Helpers","/getting-started/auth-helpers","1.getting-started/4.auth-helpers",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Recipes","/recipes","2.recipes",[31,35,39],{"title":32,"path":33,"stem":34},"Authentication","/recipes/authentication","2.recipes/1.authentication",{"title":36,"path":37,"stem":38},"Error Policy","/recipes/error-handling","2.recipes/2.error-handling",{"title":40,"path":41,"stem":42},"TypesScript support","/recipes/typescript-support","2.recipes/3.typescript-support",{"id":44,"title":40,"body":45,"description":55,"extension":467,"links":468,"meta":469,"navigation":149,"path":41,"seo":470,"stem":42,"__hash__":471},"docs/2.recipes/3.typescript-support.md",{"type":46,"value":47,"toc":463},"minimark",[48,52,56,59,64,67,304,308,323,459],[49,50,40],"h1",{"id":51},"typesscript-support",[53,54,55],"p",{},"Nuxt Apollo gracefully support TypeScript.",[57,58],"hr",{},[60,61,63],"h2",{"id":62},"type-casting","Type Casting",[53,65,66],{},"When using TypeScript, It's greatly beneficial to utilize the correct types of your data. This can be done by casting a custom type as demonstrated below.",[68,69,75],"pre",{"className":70,"code":71,"filename":72,"language":73,"meta":74,"style":74},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n      name\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\ntype ShipsResult = {\n  ships: {\n    id?: string;\n    name: string;\n  }[]\n}\n\nuseQuery\u003CShipsResult>(query, variables)\nuseAsyncQuery\u003CShipsResult>(query, variables)\n","app.vue","ts","",[76,77,78,102,109,115,121,127,133,139,144,151,178,183,199,209,224,236,245,251,256,284],"code",{"__ignoreMap":74},[79,80,83,87,91,95,99],"span",{"class":81,"line":82},"line",1,[79,84,86],{"class":85},"spNyl","const",[79,88,90],{"class":89},"sTEyZ"," query ",[79,92,94],{"class":93},"sMK4o","=",[79,96,98],{"class":97},"s2Zo4"," gql",[79,100,101],{"class":93},"`\n",[79,103,105],{"class":81,"line":104},2,[79,106,108],{"class":107},"sfazB","  query getShips($limit: Int!) {\n",[79,110,112],{"class":81,"line":111},3,[79,113,114],{"class":107},"    ships(limit: $limit) {\n",[79,116,118],{"class":81,"line":117},4,[79,119,120],{"class":107},"      id\n",[79,122,124],{"class":81,"line":123},5,[79,125,126],{"class":107},"      name\n",[79,128,130],{"class":81,"line":129},6,[79,131,132],{"class":107},"    }\n",[79,134,136],{"class":81,"line":135},7,[79,137,138],{"class":107},"  }\n",[79,140,142],{"class":81,"line":141},8,[79,143,101],{"class":93},[79,145,147],{"class":81,"line":146},9,[79,148,150],{"emptyLinePlaceholder":149},true,"\n",[79,152,154,156,159,161,164,168,171,175],{"class":81,"line":153},10,[79,155,86],{"class":85},[79,157,158],{"class":89}," variables ",[79,160,94],{"class":93},[79,162,163],{"class":93}," {",[79,165,167],{"class":166},"swJcz"," limit",[79,169,170],{"class":93},":",[79,172,174],{"class":173},"sbssI"," 5",[79,176,177],{"class":93}," }\n",[79,179,181],{"class":81,"line":180},11,[79,182,150],{"emptyLinePlaceholder":149},[79,184,186,189,193,196],{"class":81,"line":185},12,[79,187,188],{"class":85},"type",[79,190,192],{"class":191},"sBMFI"," ShipsResult",[79,194,195],{"class":93}," =",[79,197,198],{"class":93}," {\n",[79,200,202,205,207],{"class":81,"line":201},13,[79,203,204],{"class":166},"  ships",[79,206,170],{"class":93},[79,208,198],{"class":93},[79,210,212,215,218,221],{"class":81,"line":211},14,[79,213,214],{"class":166},"    id",[79,216,217],{"class":93},"?:",[79,219,220],{"class":191}," string",[79,222,223],{"class":93},";\n",[79,225,227,230,232,234],{"class":81,"line":226},15,[79,228,229],{"class":166},"    name",[79,231,170],{"class":93},[79,233,220],{"class":191},[79,235,223],{"class":93},[79,237,239,242],{"class":81,"line":238},16,[79,240,241],{"class":93},"  }",[79,243,244],{"class":89},"[]\n",[79,246,248],{"class":81,"line":247},17,[79,249,250],{"class":93},"}\n",[79,252,254],{"class":81,"line":253},18,[79,255,150],{"emptyLinePlaceholder":149},[79,257,259,262,265,268,271,275,278,281],{"class":81,"line":258},19,[79,260,261],{"class":191},"useQuery",[79,263,264],{"class":93},"\u003C",[79,266,267],{"class":191},"ShipsResult",[79,269,270],{"class":93},">(",[79,272,274],{"class":273},"sHdIc","query",[79,276,277],{"class":93},",",[79,279,280],{"class":273}," variables",[79,282,283],{"class":93},")\n",[79,285,287,290,292,294,296,298,300,302],{"class":81,"line":286},20,[79,288,289],{"class":191},"useAsyncQuery",[79,291,264],{"class":93},[79,293,267],{"class":191},[79,295,270],{"class":93},[79,297,274],{"class":273},[79,299,277],{"class":93},[79,301,280],{"class":273},[79,303,283],{"class":93},[60,305,307],{"id":306},"graphql-documents","GraphQL documents",[53,309,310,311,314,315,318,319,322],{},"When importing ",[76,312,313],{},".gql"," or ",[76,316,317],{},".graphql"," files in TypeScript, A common error you may encounter is ",[76,320,321],{},"\"Cannot find module '*.gql' or its corresponding type declarations\"",". This can be resolved by creating a type declaration file as seen below.",[68,324,327],{"className":70,"code":325,"filename":326,"language":73,"meta":74,"style":74},"declare module '*.gql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n\ndeclare module '*.graphql' {\n  import { DocumentNode } from 'graphql'\n  const Schema: DocumentNode\n  export = Schema\n}\n","globals.d.ts",[76,328,329,348,373,386,396,400,404,419,437,447,455],{"__ignoreMap":74},[79,330,331,334,337,340,343,346],{"class":81,"line":82},[79,332,333],{"class":85},"declare",[79,335,336],{"class":85}," module",[79,338,339],{"class":93}," '",[79,341,342],{"class":107},"*.gql",[79,344,345],{"class":93},"'",[79,347,198],{"class":93},[79,349,350,354,356,359,362,365,367,370],{"class":81,"line":104},[79,351,353],{"class":352},"s7zQu","  import",[79,355,163],{"class":93},[79,357,358],{"class":89}," DocumentNode",[79,360,361],{"class":93}," }",[79,363,364],{"class":352}," from",[79,366,339],{"class":93},[79,368,369],{"class":107},"graphql",[79,371,372],{"class":93},"'\n",[79,374,375,378,381,383],{"class":81,"line":111},[79,376,377],{"class":85},"  const",[79,379,380],{"class":89}," Schema",[79,382,170],{"class":93},[79,384,385],{"class":191}," DocumentNode\n",[79,387,388,391,393],{"class":81,"line":117},[79,389,390],{"class":352},"  export",[79,392,195],{"class":93},[79,394,395],{"class":89}," Schema\n",[79,397,398],{"class":81,"line":123},[79,399,250],{"class":93},[79,401,402],{"class":81,"line":129},[79,403,150],{"emptyLinePlaceholder":149},[79,405,406,408,410,412,415,417],{"class":81,"line":135},[79,407,333],{"class":85},[79,409,336],{"class":85},[79,411,339],{"class":93},[79,413,414],{"class":107},"*.graphql",[79,416,345],{"class":93},[79,418,198],{"class":93},[79,420,421,423,425,427,429,431,433,435],{"class":81,"line":141},[79,422,353],{"class":352},[79,424,163],{"class":93},[79,426,358],{"class":89},[79,428,361],{"class":93},[79,430,364],{"class":352},[79,432,339],{"class":93},[79,434,369],{"class":107},[79,436,372],{"class":93},[79,438,439,441,443,445],{"class":81,"line":146},[79,440,377],{"class":85},[79,442,380],{"class":89},[79,444,170],{"class":93},[79,446,385],{"class":191},[79,448,449,451,453],{"class":81,"line":153},[79,450,390],{"class":352},[79,452,195],{"class":93},[79,454,395],{"class":89},[79,456,457],{"class":81,"line":180},[79,458,250],{"class":93},[460,461,462],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":74,"searchDepth":104,"depth":104,"links":464},[465,466],{"id":62,"depth":104,"text":63},{"id":306,"depth":104,"text":307},"md",null,{},{"title":40,"description":55},"93h5ulbJ11l0HhO2buvz2rSo4kmPo6OHx8Jy6wWM9pw",[473,468],{"title":36,"path":37,"stem":38,"description":474,"children":-1},"Capture GraphQL errors and handle them accordingly.",1785308701006]