[{"data":1,"prerenderedAt":857},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-composables":43,"-getting-started-composables-surround":852},[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":18,"body":45,"description":846,"extension":847,"links":848,"meta":849,"navigation":220,"path":19,"seo":850,"stem":20,"__hash__":851},"docs/1.getting-started/3.composables.md",{"type":46,"value":47,"toc":838},"minimark",[48,52,64,67,72,82,137,141,150,162,337,341,353,368,437,440,451,547,560,564,569,698,708,712,717,723,824,834],[49,50,18],"h1",{"id":51},"composables",[53,54,55,56,63],"p",{},"Nuxt Apollo provides and ",[57,58,62],"a",{"href":59,"rel":60},"https://v3.nuxtjs.org/guide/concepts/auto-imports",[61],"nofollow","Auto Imports"," key composables for seamless usage throughout your application.",[65,66],"hr",{},[68,69,71],"h2",{"id":70},"useapollo","useApollo",[53,73,74,77,78,81],{},[75,76,71],"code",{}," allows you to utilize ",[57,79,80],{"href":23},"Nuxt Apollo's authentication helpers"," as well as easily access the configured Apollo clients.",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { clients, getToken, onLogin, onLogout } = useApollo()\n","ts","",[75,90,91],{"__ignoreMap":88},[92,93,96,100,104,108,111,114,116,119,121,124,127,130,134],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"spNyl","const",[92,101,103],{"class":102},"sMK4o"," {",[92,105,107],{"class":106},"sTEyZ"," clients",[92,109,110],{"class":102},",",[92,112,113],{"class":106}," getToken",[92,115,110],{"class":102},[92,117,118],{"class":106}," onLogin",[92,120,110],{"class":102},[92,122,123],{"class":106}," onLogout ",[92,125,126],{"class":102},"}",[92,128,129],{"class":102}," =",[92,131,133],{"class":132},"s2Zo4"," useApollo",[92,135,136],{"class":106},"()\n",[68,138,140],{"id":139},"useasyncquery","useAsyncQuery",[53,142,143,144,149],{},"This is a convenience wrapper around Nuxt's ",[57,145,148],{"href":146,"rel":147},"https://v3.nuxtjs.org/api/composables/use-async-data/",[61],"useAsyncData"," that allows you to easily query the Apollo client. The returned result is the extracted data property from the GraphQL query.",[53,151,152,154,155,161],{},[75,153,140],{}," is primarily used for querying data when a page or component is initially loaded. Have a look at ",[57,156,158],{"href":157},"#usequery",[75,159,160],{},"useQuery"," for fetching data upon user interaction.",[83,163,165],{"className":85,"code":164,"language":87,"meta":88,"style":88},"const query = gql`\nquery getShips($limit: Int!) {\n  ships(limit: $limit) {\n    id\n  }\n}`\n\nconst { data } = await useAsyncQuery(query, { limit: 2 })\n\nif (data.value?.ships) {\n  // log response\n  console.log(data.value.ships)\n}\n",[75,166,167,183,190,196,202,208,215,222,267,272,296,303,331],{"__ignoreMap":88},[92,168,169,171,174,177,180],{"class":94,"line":95},[92,170,99],{"class":98},[92,172,173],{"class":106}," query ",[92,175,176],{"class":102},"=",[92,178,179],{"class":132}," gql",[92,181,182],{"class":102},"`\n",[92,184,186],{"class":94,"line":185},2,[92,187,189],{"class":188},"sfazB","query getShips($limit: Int!) {\n",[92,191,193],{"class":94,"line":192},3,[92,194,195],{"class":188},"  ships(limit: $limit) {\n",[92,197,199],{"class":94,"line":198},4,[92,200,201],{"class":188},"    id\n",[92,203,205],{"class":94,"line":204},5,[92,206,207],{"class":188},"  }\n",[92,209,211,213],{"class":94,"line":210},6,[92,212,126],{"class":188},[92,214,182],{"class":102},[92,216,218],{"class":94,"line":217},7,[92,219,221],{"emptyLinePlaceholder":220},true,"\n",[92,223,225,227,229,232,234,236,240,243,246,248,250,254,257,261,264],{"class":94,"line":224},8,[92,226,99],{"class":98},[92,228,103],{"class":102},[92,230,231],{"class":106}," data ",[92,233,126],{"class":102},[92,235,129],{"class":102},[92,237,239],{"class":238},"s7zQu"," await",[92,241,242],{"class":132}," useAsyncQuery",[92,244,245],{"class":106},"(query",[92,247,110],{"class":102},[92,249,103],{"class":102},[92,251,253],{"class":252},"swJcz"," limit",[92,255,256],{"class":102},":",[92,258,260],{"class":259},"sbssI"," 2",[92,262,263],{"class":102}," }",[92,265,266],{"class":106},")\n",[92,268,270],{"class":94,"line":269},9,[92,271,221],{"emptyLinePlaceholder":220},[92,273,275,278,281,284,287,290,293],{"class":94,"line":274},10,[92,276,277],{"class":238},"if",[92,279,280],{"class":106}," (data",[92,282,283],{"class":102},".",[92,285,286],{"class":106},"value",[92,288,289],{"class":102},"?.",[92,291,292],{"class":106},"ships) ",[92,294,295],{"class":102},"{\n",[92,297,299],{"class":94,"line":298},11,[92,300,302],{"class":301},"sHwdD","  // log response\n",[92,304,306,309,311,314,317,320,322,324,326,329],{"class":94,"line":305},12,[92,307,308],{"class":106},"  console",[92,310,283],{"class":102},[92,312,313],{"class":132},"log",[92,315,316],{"class":252},"(",[92,318,319],{"class":106},"data",[92,321,283],{"class":102},[92,323,286],{"class":106},[92,325,283],{"class":102},[92,327,328],{"class":106},"ships",[92,330,266],{"class":252},[92,332,334],{"class":94,"line":333},13,[92,335,336],{"class":102},"}\n",[68,338,340],{"id":339},"uselazyasyncquery","useLazyAsyncQuery",[53,342,343,344,346,347,352],{},"The ",[75,345,340],{}," composable provides a wrapper around ",[57,348,350],{"href":349},"#useasyncquery",[75,351,140],{}," that lazily loads the specified query.",[53,354,355,356,360,361,363,364,367],{},"Unlike it's counterpart ",[57,357,358],{"href":349},[75,359,140],{},", ",[75,362,340],{}," is non-blocking, hence the ",[75,365,366],{},"null"," state of your result must be manually handled.",[83,369,371],{"className":85,"code":370,"language":87,"meta":88,"style":88},"const query = gql`\n  query currentUser { \n    whoAmI { \n      id \n    }\n  }\n`\n\nconst { data } = await useLazyAsyncQuery(query)\n",[75,372,373,385,390,395,400,405,409,413,417],{"__ignoreMap":88},[92,374,375,377,379,381,383],{"class":94,"line":95},[92,376,99],{"class":98},[92,378,173],{"class":106},[92,380,176],{"class":102},[92,382,179],{"class":132},[92,384,182],{"class":102},[92,386,387],{"class":94,"line":185},[92,388,389],{"class":188},"  query currentUser { \n",[92,391,392],{"class":94,"line":192},[92,393,394],{"class":188},"    whoAmI { \n",[92,396,397],{"class":94,"line":198},[92,398,399],{"class":188},"      id \n",[92,401,402],{"class":94,"line":204},[92,403,404],{"class":188},"    }\n",[92,406,407],{"class":94,"line":210},[92,408,207],{"class":188},[92,410,411],{"class":94,"line":217},[92,412,182],{"class":102},[92,414,415],{"class":94,"line":224},[92,416,221],{"emptyLinePlaceholder":220},[92,418,419,421,423,425,427,429,431,434],{"class":94,"line":269},[92,420,99],{"class":98},[92,422,103],{"class":102},[92,424,231],{"class":106},[92,426,126],{"class":102},[92,428,129],{"class":102},[92,430,239],{"class":238},[92,432,433],{"class":132}," useLazyAsyncQuery",[92,435,436],{"class":106},"(query)\n",[68,438,160],{"id":439},"usequery",[53,441,442,443,447,448,450],{},"This is the primary method of querying your GraphQL server, unlike ",[57,444,445],{"href":349},[75,446,140],{}," which is best used for initially fetching data in SSR applications, ",[75,449,160],{}," can comfortably be used in any scenario.",[83,452,454],{"className":85,"code":453,"language":87,"meta":88,"style":88},"const query = gql`\n  query getShips($limit: Int!) {\n    ships(limit: $limit) {\n      id\n    }\n  }\n`\n\nconst variables = { limit: 5 }\n\nconst { result } = useQuery(query, variables)\n",[75,455,456,468,473,478,483,487,491,495,499,520,524],{"__ignoreMap":88},[92,457,458,460,462,464,466],{"class":94,"line":95},[92,459,99],{"class":98},[92,461,173],{"class":106},[92,463,176],{"class":102},[92,465,179],{"class":132},[92,467,182],{"class":102},[92,469,470],{"class":94,"line":185},[92,471,472],{"class":188},"  query getShips($limit: Int!) {\n",[92,474,475],{"class":94,"line":192},[92,476,477],{"class":188},"    ships(limit: $limit) {\n",[92,479,480],{"class":94,"line":198},[92,481,482],{"class":188},"      id\n",[92,484,485],{"class":94,"line":204},[92,486,404],{"class":188},[92,488,489],{"class":94,"line":210},[92,490,207],{"class":188},[92,492,493],{"class":94,"line":217},[92,494,182],{"class":102},[92,496,497],{"class":94,"line":224},[92,498,221],{"emptyLinePlaceholder":220},[92,500,501,503,506,508,510,512,514,517],{"class":94,"line":269},[92,502,99],{"class":98},[92,504,505],{"class":106}," variables ",[92,507,176],{"class":102},[92,509,103],{"class":102},[92,511,253],{"class":252},[92,513,256],{"class":102},[92,515,516],{"class":259}," 5",[92,518,519],{"class":102}," }\n",[92,521,522],{"class":94,"line":274},[92,523,221],{"emptyLinePlaceholder":220},[92,525,526,528,530,533,535,537,540,542,544],{"class":94,"line":298},[92,527,99],{"class":98},[92,529,103],{"class":102},[92,531,532],{"class":106}," result ",[92,534,126],{"class":102},[92,536,129],{"class":102},[92,538,539],{"class":132}," useQuery",[92,541,245],{"class":106},[92,543,110],{"class":102},[92,545,546],{"class":106}," variables)\n",[548,549,550],"blockquote",{},[53,551,552,553],{},"More Information on ",[57,554,557,558],{"href":555,"rel":556},"https://v4.apollo.vuejs.org/api/use-query.html#usequery",[61],"Vue Apollo's ",[75,559,160],{},[68,561,563],{"id":562},"usemutation","useMutation",[53,565,343,566,568],{},[75,567,563],{}," composable allows you to modify server-side data",[83,570,572],{"className":85,"code":571,"language":87,"meta":88,"style":88},"const query = gql`\n  mutation addUser ($input: UserInput!) {\n    addUser (input: $input) {\n      id\n    }\n  }\n`\n\nconst variables = {\n  name: 'John Doe',\n  email: 'jd@example.com'\n}\n\nconst { mutate } = useMutation(query, { variables })\n",[75,573,574,586,591,596,600,604,608,612,616,627,646,661,665,669],{"__ignoreMap":88},[92,575,576,578,580,582,584],{"class":94,"line":95},[92,577,99],{"class":98},[92,579,173],{"class":106},[92,581,176],{"class":102},[92,583,179],{"class":132},[92,585,182],{"class":102},[92,587,588],{"class":94,"line":185},[92,589,590],{"class":188},"  mutation addUser ($input: UserInput!) {\n",[92,592,593],{"class":94,"line":192},[92,594,595],{"class":188},"    addUser (input: $input) {\n",[92,597,598],{"class":94,"line":198},[92,599,482],{"class":188},[92,601,602],{"class":94,"line":204},[92,603,404],{"class":188},[92,605,606],{"class":94,"line":210},[92,607,207],{"class":188},[92,609,610],{"class":94,"line":217},[92,611,182],{"class":102},[92,613,614],{"class":94,"line":224},[92,615,221],{"emptyLinePlaceholder":220},[92,617,618,620,622,624],{"class":94,"line":269},[92,619,99],{"class":98},[92,621,505],{"class":106},[92,623,176],{"class":102},[92,625,626],{"class":102}," {\n",[92,628,629,632,634,637,640,643],{"class":94,"line":274},[92,630,631],{"class":252},"  name",[92,633,256],{"class":102},[92,635,636],{"class":102}," '",[92,638,639],{"class":188},"John Doe",[92,641,642],{"class":102},"'",[92,644,645],{"class":102},",\n",[92,647,648,651,653,655,658],{"class":94,"line":298},[92,649,650],{"class":252},"  email",[92,652,256],{"class":102},[92,654,636],{"class":102},[92,656,657],{"class":188},"jd@example.com",[92,659,660],{"class":102},"'\n",[92,662,663],{"class":94,"line":305},[92,664,336],{"class":102},[92,666,667],{"class":94,"line":333},[92,668,221],{"emptyLinePlaceholder":220},[92,670,672,674,676,679,681,683,686,688,690,692,694,696],{"class":94,"line":671},14,[92,673,99],{"class":98},[92,675,103],{"class":102},[92,677,678],{"class":106}," mutate ",[92,680,126],{"class":102},[92,682,129],{"class":102},[92,684,685],{"class":132}," useMutation",[92,687,245],{"class":106},[92,689,110],{"class":102},[92,691,103],{"class":102},[92,693,505],{"class":106},[92,695,126],{"class":102},[92,697,266],{"class":106},[548,699,700],{},[53,701,552,702],{},[57,703,557,706],{"href":704,"rel":705},"https://v4.apollo.vuejs.org/api/use-mutation.html#usemutation",[61],[75,707,563],{},[68,709,711],{"id":710},"usesubscription","useSubscription",[53,713,343,714,716],{},[75,715,711],{}," composable allows you to interface with WebSocket compliant GraphQL servers to listen for realtime updates.",[718,719,720],"alert",{},[53,721,722],{},"Nuxt Apollo currently only supports subscriptions over WebSockets.",[83,724,726],{"className":85,"code":725,"language":87,"meta":88,"style":88},"const query = gql`\n  subscription onMessageAdded($channelId: ID!) {\n    messageAdded(channelId: $channelId) {\n      id\n      text\n    }\n  }\n`\n\nconst variables = { channelId: 'abc' }\n\nconst { result } = useSubscription(query, variables)\n",[75,727,728,740,745,750,754,759,763,767,771,775,799,803],{"__ignoreMap":88},[92,729,730,732,734,736,738],{"class":94,"line":95},[92,731,99],{"class":98},[92,733,173],{"class":106},[92,735,176],{"class":102},[92,737,179],{"class":132},[92,739,182],{"class":102},[92,741,742],{"class":94,"line":185},[92,743,744],{"class":188},"  subscription onMessageAdded($channelId: ID!) {\n",[92,746,747],{"class":94,"line":192},[92,748,749],{"class":188},"    messageAdded(channelId: $channelId) {\n",[92,751,752],{"class":94,"line":198},[92,753,482],{"class":188},[92,755,756],{"class":94,"line":204},[92,757,758],{"class":188},"      text\n",[92,760,761],{"class":94,"line":210},[92,762,404],{"class":188},[92,764,765],{"class":94,"line":217},[92,766,207],{"class":188},[92,768,769],{"class":94,"line":224},[92,770,182],{"class":102},[92,772,773],{"class":94,"line":269},[92,774,221],{"emptyLinePlaceholder":220},[92,776,777,779,781,783,785,788,790,792,795,797],{"class":94,"line":274},[92,778,99],{"class":98},[92,780,505],{"class":106},[92,782,176],{"class":102},[92,784,103],{"class":102},[92,786,787],{"class":252}," channelId",[92,789,256],{"class":102},[92,791,636],{"class":102},[92,793,794],{"class":188},"abc",[92,796,642],{"class":102},[92,798,519],{"class":102},[92,800,801],{"class":94,"line":298},[92,802,221],{"emptyLinePlaceholder":220},[92,804,805,807,809,811,813,815,818,820,822],{"class":94,"line":305},[92,806,99],{"class":98},[92,808,103],{"class":102},[92,810,532],{"class":106},[92,812,126],{"class":102},[92,814,129],{"class":102},[92,816,817],{"class":132}," useSubscription",[92,819,245],{"class":106},[92,821,110],{"class":102},[92,823,546],{"class":106},[548,825,826],{},[53,827,552,828],{},[57,829,557,832],{"href":830,"rel":831},"https://v4.apollo.vuejs.org/api/use-subscription.html#usesubscription",[61],[75,833,711],{},[835,836,837],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":88,"searchDepth":185,"depth":185,"links":839},[840,841,842,843,844,845],{"id":70,"depth":185,"text":71},{"id":139,"depth":185,"text":140},{"id":339,"depth":185,"text":340},{"id":439,"depth":185,"text":160},{"id":562,"depth":185,"text":563},{"id":710,"depth":185,"text":711},"Nuxt Apollo provides and Auto Imports key composables for seamless usage throughout your application.","md",null,{},{"title":18,"description":846},"GfhbOC3WdtgaXioL40G27M379rtV_i-kMF9508ZwnMk",[853,855],{"title":14,"path":15,"stem":16,"description":854,"children":-1},"Configure Nuxt Apollo via the apollo property.",{"title":22,"path":23,"stem":24,"description":856,"children":-1},"Helper functions for working with authentication in Apollo.",1785308701006]