[{"data":1,"prerenderedAt":1686},["ShallowReactive",2],{"docs:\u002Fdocs\u002Ftanstack-query":3,"i-lucide:moon":1678,"i-lucide:github":1682,"i-lucide:menu":1684},{"id":4,"title":5,"body":6,"description":1671,"extension":1672,"meta":1673,"navigation":356,"path":1674,"seo":1675,"stem":1676,"__hash__":1677},"docs\u002Fdocs\u002Ftanstack-query.md","Vue Query",{"type":7,"value":8,"toc":1660},"minimark",[9,13,27,32,35,60,67,150,174,185,253,256,295,311,315,321,416,419,488,495,499,502,694,697,712,716,719,733,808,819,822,826,842,848,854,885,891,895,902,979,993,999,1002,1119,1123,1136,1404,1411,1414,1418,1431,1556,1576,1583,1594,1598,1601,1646,1656],[10,11,12],"p",{},"Nuxt Endpoints can generate ordinary Vue Query options from named endpoint contracts. Endpoint input and output types stay in Nuxt Endpoints; Vue Query owns caching, retries, invalidation, optimistic updates, polling, and infinite-query state.",[10,14,15,16,21,22,26],{},"Use ",[17,18,20],"a",{"href":19},"\u002Fdocs\u002Fclient","Generated Client"," or ",[23,24,25],"code",{},"useEndpoint"," when a request does not need Vue Query's server-state features.",[28,29,31],"h2",{"id":30},"install-and-enable","Install and enable",[10,33,34],{},"Install Vue Query as an optional peer dependency:",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-bash shiki shiki-themes github-light-default github-dark-default","vp add @tanstack\u002Fvue-query\n","bash","",[23,43,44],{"__ignoreMap":41},[45,46,49,53,57],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sVS1I","vp",[45,54,56],{"class":55},"sZItA"," add",[45,58,59],{"class":55}," @tanstack\u002Fvue-query\n",[10,61,62,63,66],{},"Enable generation in ",[23,64,65],{},"nuxt.config.ts",":",[36,68,72],{"className":69,"code":70,"language":71,"meta":41,"style":41},"language-ts shiki shiki-themes github-light-default github-dark-default","export default defineNuxtConfig({\n  modules: ['nuxt-endpoints'],\n  endpoints: {\n    client: {\n      query: true,\n    },\n  },\n})\n","ts",[23,73,74,90,106,112,118,130,136,144],{"__ignoreMap":41},[45,75,76,80,83,87],{"class":47,"line":48},[45,77,79],{"class":78},"swxxe","export",[45,81,82],{"class":78}," default",[45,84,86],{"class":85},"s9HWX"," defineNuxtConfig",[45,88,89],{"class":51},"({\n",[45,91,93,97,100,103],{"class":47,"line":92},2,[45,94,96],{"class":95},"saQ_J","  modules: [",[45,98,99],{"class":55},"'nuxt-endpoints'",[45,101,102],{"class":95},"]",[45,104,105],{"class":51},",\n",[45,107,109],{"class":47,"line":108},3,[45,110,111],{"class":95},"  endpoints: {\n",[45,113,115],{"class":47,"line":114},4,[45,116,117],{"class":95},"    client: {\n",[45,119,121,124,128],{"class":47,"line":120},5,[45,122,123],{"class":95},"      query: ",[45,125,127],{"class":126},"sOOdx","true",[45,129,105],{"class":95},[45,131,133],{"class":47,"line":132},6,[45,134,135],{"class":95},"    },\n",[45,137,139,142],{"class":47,"line":138},7,[45,140,141],{"class":95},"  }",[45,143,105],{"class":51},[45,145,147],{"class":47,"line":146},8,[45,148,149],{"class":51},"})\n",[10,151,152,153,156,157,160,161,164,165,168,169,173],{},"This generates ",[23,154,155],{},"#endpoints\u002Fquery",". ",[23,158,159],{},"query: true"," uses the conservative ",[23,162,163],{},"external"," setup mode: the application owns its ",[23,166,167],{},"QueryClient"," and Vue plugin. Use ",[17,170,172],{"href":171},"#automatic-ssr-setup","automatic SSR setup"," when the module should own that wiring.",[10,175,176,177,180,181,184],{},"All generated factories require a supported HTTP method and a non-reserved operation name because operation names become stable query and mutation keys. Names such as ",[23,178,179],{},"then"," and ",[23,182,183],{},"constructor"," are skipped because they conflict with callable client properties:",[36,186,188],{"className":69,"code":187,"language":71,"meta":41,"style":41},"export const endpoint = defineEndpoint({\n  operation: 'getUser',\n  params: UserParams,\n  responses: {\n    200: User,\n    404: NotFound,\n  },\n})\n",[23,189,190,208,218,223,228,236,244,249],{"__ignoreMap":41},[45,191,192,194,197,200,203,206],{"class":47,"line":48},[45,193,79],{"class":78},[45,195,196],{"class":78}," const",[45,198,199],{"class":126}," endpoint",[45,201,202],{"class":78}," =",[45,204,205],{"class":85}," defineEndpoint",[45,207,89],{"class":95},[45,209,210,213,216],{"class":47,"line":92},[45,211,212],{"class":95},"  operation: ",[45,214,215],{"class":55},"'getUser'",[45,217,105],{"class":95},[45,219,220],{"class":47,"line":108},[45,221,222],{"class":95},"  params: UserParams,\n",[45,224,225],{"class":47,"line":114},[45,226,227],{"class":95},"  responses: {\n",[45,229,230,233],{"class":47,"line":120},[45,231,232],{"class":126},"    200",[45,234,235],{"class":95},": User,\n",[45,237,238,241],{"class":47,"line":132},[45,239,240],{"class":126},"    404",[45,242,243],{"class":95},": NotFound,\n",[45,245,246],{"class":47,"line":138},[45,247,248],{"class":95},"  },\n",[45,250,251],{"class":47,"line":146},[45,252,149],{"class":95},[10,254,255],{},"Factories are generated by HTTP method:",[257,258,259,276],"ul",{},[260,261,262,180,265,268,269,180,272,275],"li",{},[23,263,264],{},"GET",[23,266,267],{},"HEAD",": ",[23,270,271],{},"endpointQueryOptions",[23,273,274],{},"endpointInfiniteQueryOptions",".",[260,277,278,281,282,281,285,288,289,268,292,275],{},[23,279,280],{},"POST",", ",[23,283,284],{},"PUT",[23,286,287],{},"PATCH",", and ",[23,290,291],{},"DELETE",[23,293,294],{},"endpointMutationOptions",[10,296,297,298,281,301,281,304,307,308,275],{},"Other methods (",[23,299,300],{},"OPTIONS",[23,302,303],{},"CONNECT",[23,305,306],{},"TRACE",") map to neither queries nor mutations, so no factory is generated for them — the build logs a warning when such an operation exists while the query adapter is enabled. They remain callable through ",[23,309,310],{},"$endpoint",[28,312,314],{"id":313},"queries","Queries",[10,316,317,318,66],{},"Pass the generated options directly to ",[23,319,320],{},"useQuery",[36,322,324],{"className":69,"code":323,"language":71,"meta":41,"style":41},"import { useQuery } from '@tanstack\u002Fvue-query'\nimport { endpointQueryOptions } from '#endpoints\u002Fquery'\n\nconst user = useQuery(\n  endpointQueryOptions.getUser({\n    params: { id: '123' },\n  }),\n)\n\nuser.data.value?.name\n",[23,325,326,340,352,358,374,384,395,400,405,410],{"__ignoreMap":41},[45,327,328,331,334,337],{"class":47,"line":48},[45,329,330],{"class":78},"import",[45,332,333],{"class":95}," { useQuery } ",[45,335,336],{"class":78},"from",[45,338,339],{"class":55}," '@tanstack\u002Fvue-query'\n",[45,341,342,344,347,349],{"class":47,"line":92},[45,343,330],{"class":78},[45,345,346],{"class":95}," { endpointQueryOptions } ",[45,348,336],{"class":78},[45,350,351],{"class":55}," '#endpoints\u002Fquery'\n",[45,353,354],{"class":47,"line":108},[45,355,357],{"emptyLinePlaceholder":356},true,"\n",[45,359,360,363,366,368,371],{"class":47,"line":114},[45,361,362],{"class":78},"const",[45,364,365],{"class":126}," user",[45,367,202],{"class":78},[45,369,370],{"class":85}," useQuery",[45,372,373],{"class":95},"(\n",[45,375,376,379,382],{"class":47,"line":120},[45,377,378],{"class":95},"  endpointQueryOptions.",[45,380,381],{"class":85},"getUser",[45,383,89],{"class":95},[45,385,386,389,392],{"class":47,"line":132},[45,387,388],{"class":95},"    params: { id: ",[45,390,391],{"class":55},"'123'",[45,393,394],{"class":95}," },\n",[45,396,397],{"class":47,"line":138},[45,398,399],{"class":95},"  }),\n",[45,401,402],{"class":47,"line":146},[45,403,404],{"class":95},")\n",[45,406,408],{"class":47,"line":407},9,[45,409,357],{"emptyLinePlaceholder":356},[45,411,413],{"class":47,"line":412},10,[45,414,415],{"class":95},"user.data.value?.name\n",[10,417,418],{},"The request can be a getter when route params or filters are reactive. The key and request update together:",[36,420,422],{"className":69,"code":421,"language":71,"meta":41,"style":41},"const userId = ref('123')\n\nconst user = useQuery(\n  endpointQueryOptions.getUser(() => ({\n    params: { id: userId.value },\n  })),\n)\n",[23,423,424,443,447,459,474,479,484],{"__ignoreMap":41},[45,425,426,428,431,433,436,439,441],{"class":47,"line":48},[45,427,362],{"class":78},[45,429,430],{"class":126}," userId",[45,432,202],{"class":78},[45,434,435],{"class":85}," ref",[45,437,438],{"class":95},"(",[45,440,391],{"class":55},[45,442,404],{"class":95},[45,444,445],{"class":47,"line":92},[45,446,357],{"emptyLinePlaceholder":356},[45,448,449,451,453,455,457],{"class":47,"line":108},[45,450,362],{"class":78},[45,452,365],{"class":126},[45,454,202],{"class":78},[45,456,370],{"class":85},[45,458,373],{"class":95},[45,460,461,463,465,468,471],{"class":47,"line":114},[45,462,378],{"class":95},[45,464,381],{"class":85},[45,466,467],{"class":95},"(() ",[45,469,470],{"class":78},"=>",[45,472,473],{"class":95}," ({\n",[45,475,476],{"class":47,"line":120},[45,477,478],{"class":95},"    params: { id: userId.value },\n",[45,480,481],{"class":47,"line":132},[45,482,483],{"class":95},"  })),\n",[45,485,486],{"class":47,"line":138},[45,487,404],{"class":95},[10,489,490,491,494],{},"Vue Query's ",[23,492,493],{},"AbortSignal"," is forwarded to the endpoint request, so cancellation still reaches the underlying HTTP call.",[28,496,498],{"id":497},"mutations-and-invalidation","Mutations and invalidation",[10,500,501],{},"Mutation variables are inferred from the endpoint request contract:",[36,503,505],{"className":69,"code":504,"language":71,"meta":41,"style":41},"import { useMutation, useQueryClient } from '@tanstack\u002Fvue-query'\nimport { endpointMutationOptions, endpointQueryOptions } from '#endpoints\u002Fquery'\n\nconst queryClient = useQueryClient()\n\nconst updateUser = useMutation({\n  ...endpointMutationOptions.updateUser(),\n  onSuccess: (_data, variables) => {\n    queryClient.invalidateQueries({\n      queryKey: endpointQueryOptions.getUser.key({\n        params: { id: variables.params.id },\n      }),\n    })\n  },\n})\n\nupdateUser.mutate({\n  params: { id: '123' },\n  body: { name: 'Ada' },\n})\n",[23,506,507,518,529,533,548,552,566,580,604,614,624,630,636,642,647,652,657,668,678,689],{"__ignoreMap":41},[45,508,509,511,514,516],{"class":47,"line":48},[45,510,330],{"class":78},[45,512,513],{"class":95}," { useMutation, useQueryClient } ",[45,515,336],{"class":78},[45,517,339],{"class":55},[45,519,520,522,525,527],{"class":47,"line":92},[45,521,330],{"class":78},[45,523,524],{"class":95}," { endpointMutationOptions, endpointQueryOptions } ",[45,526,336],{"class":78},[45,528,351],{"class":55},[45,530,531],{"class":47,"line":108},[45,532,357],{"emptyLinePlaceholder":356},[45,534,535,537,540,542,545],{"class":47,"line":114},[45,536,362],{"class":78},[45,538,539],{"class":126}," queryClient",[45,541,202],{"class":78},[45,543,544],{"class":85}," useQueryClient",[45,546,547],{"class":95},"()\n",[45,549,550],{"class":47,"line":120},[45,551,357],{"emptyLinePlaceholder":356},[45,553,554,556,559,561,564],{"class":47,"line":132},[45,555,362],{"class":78},[45,557,558],{"class":126}," updateUser",[45,560,202],{"class":78},[45,562,563],{"class":85}," useMutation",[45,565,89],{"class":95},[45,567,568,571,574,577],{"class":47,"line":138},[45,569,570],{"class":78},"  ...",[45,572,573],{"class":95},"endpointMutationOptions.",[45,575,576],{"class":85},"updateUser",[45,578,579],{"class":95},"(),\n",[45,581,582,585,588,591,593,596,599,601],{"class":47,"line":146},[45,583,584],{"class":85},"  onSuccess",[45,586,587],{"class":95},": (",[45,589,590],{"class":51},"_data",[45,592,281],{"class":95},[45,594,595],{"class":51},"variables",[45,597,598],{"class":95},") ",[45,600,470],{"class":78},[45,602,603],{"class":95}," {\n",[45,605,606,609,612],{"class":47,"line":407},[45,607,608],{"class":95},"    queryClient.",[45,610,611],{"class":85},"invalidateQueries",[45,613,89],{"class":95},[45,615,616,619,622],{"class":47,"line":412},[45,617,618],{"class":95},"      queryKey: endpointQueryOptions.getUser.",[45,620,621],{"class":85},"key",[45,623,89],{"class":95},[45,625,627],{"class":47,"line":626},11,[45,628,629],{"class":95},"        params: { id: variables.params.id },\n",[45,631,633],{"class":47,"line":632},12,[45,634,635],{"class":95},"      }),\n",[45,637,639],{"class":47,"line":638},13,[45,640,641],{"class":95},"    })\n",[45,643,645],{"class":47,"line":644},14,[45,646,248],{"class":95},[45,648,650],{"class":47,"line":649},15,[45,651,149],{"class":95},[45,653,655],{"class":47,"line":654},16,[45,656,357],{"emptyLinePlaceholder":356},[45,658,660,663,666],{"class":47,"line":659},17,[45,661,662],{"class":95},"updateUser.",[45,664,665],{"class":85},"mutate",[45,667,89],{"class":95},[45,669,671,674,676],{"class":47,"line":670},18,[45,672,673],{"class":95},"  params: { id: ",[45,675,391],{"class":55},[45,677,394],{"class":95},[45,679,681,684,687],{"class":47,"line":680},19,[45,682,683],{"class":95},"  body: { name: ",[45,685,686],{"class":55},"'Ada'",[45,688,394],{"class":95},[45,690,692],{"class":47,"line":691},20,[45,693,149],{"class":95},[10,695,696],{},"Nuxt Endpoints does not guess which queries a mutation affects. Use Vue Query lifecycle callbacks and the generated keys for invalidation or optimistic updates.",[10,698,699,700,703,704,707,708,711],{},"Calling ",[23,701,702],{},"factory.key()"," with no request returns the operation prefix and matches every cached request variant for that operation. Passing the required request returns the exact typed key for that cache entry. For an operation without input, ",[23,705,706],{},"key({})"," creates the exact key while ",[23,709,710],{},"key()"," remains the prefix.",[28,713,715],{"id":714},"declared-non-2xx-responses","Declared non-2xx responses",[10,717,718],{},"The default factory follows normal Vue Query behavior: a declared non-2xx response rejects and enters Query error state.",[10,720,721,722,725,726,21,729,732],{},"Use the explicit ",[23,723,724],{},".result()"," factory when statuses such as ",[23,727,728],{},"404",[23,730,731],{},"422"," should be successful cached data:",[36,734,736],{"className":69,"code":735,"language":71,"meta":41,"style":41},"const user = useQuery(\n  endpointQueryOptions.getUser.result({\n    params: { id: 'missing' },\n  }),\n)\n\nif (user.data.value?.status === 404) {\n  user.data.value.body.message\n}\n",[23,737,738,750,760,769,773,777,781,798,803],{"__ignoreMap":41},[45,739,740,742,744,746,748],{"class":47,"line":48},[45,741,362],{"class":78},[45,743,365],{"class":126},[45,745,202],{"class":78},[45,747,370],{"class":85},[45,749,373],{"class":95},[45,751,752,755,758],{"class":47,"line":92},[45,753,754],{"class":95},"  endpointQueryOptions.getUser.",[45,756,757],{"class":85},"result",[45,759,89],{"class":95},[45,761,762,764,767],{"class":47,"line":108},[45,763,388],{"class":95},[45,765,766],{"class":55},"'missing'",[45,768,394],{"class":95},[45,770,771],{"class":47,"line":114},[45,772,399],{"class":95},[45,774,775],{"class":47,"line":120},[45,776,404],{"class":95},[45,778,779],{"class":47,"line":132},[45,780,357],{"emptyLinePlaceholder":356},[45,782,783,786,789,792,795],{"class":47,"line":138},[45,784,785],{"class":78},"if",[45,787,788],{"class":95}," (user.data.value?.status ",[45,790,791],{"class":78},"===",[45,793,794],{"class":126}," 404",[45,796,797],{"class":95},") {\n",[45,799,800],{"class":47,"line":146},[45,801,802],{"class":95},"  user.data.value.body.message\n",[45,804,805],{"class":47,"line":407},[45,806,807],{"class":95},"}\n",[10,809,810,811,814,815,818],{},"Result-mode cache data is serializable and contains only ",[23,812,813],{},"{ status, ok, body }",". Native response headers are deliberately excluded from the Query cache and SSR payload. Use the low-level ",[23,816,817],{},"$endpoint(...).result()"," API when response headers are required.",[10,820,821],{},"Transport failures reject in both data and result modes.",[28,823,825],{"id":824},"query-keys-and-request-identity","Query keys and request identity",[10,827,828,829,281,832,281,835,288,838,841],{},"Query and Infinite Query keys include the operation plus normalized ",[23,830,831],{},"params",[23,833,834],{},"query",[23,836,837],{},"body",[23,839,840],{},"idempotencyKey"," when present. Object key insertion order does not change cache identity.",[10,843,844,845,847],{},"Ordinary request headers and credentials are never included in a key. ",[23,846,840],{}," is a special typed request input that becomes a header on the wire, but it remains part of cache identity and is visible in Query Devtools. Use an opaque request identifier, never a secret.",[10,849,850,851,66],{},"If the same request shape can produce different data by user, tenant, locale, or feature flag, add a non-sensitive logical ",[23,852,853],{},"keyScope",[36,855,857],{"className":69,"code":856,"language":71,"meta":41,"style":41},"endpointQueryOptions.getUser({\n  params: { id: '123' },\n  keyScope: { tenant: tenantId },\n})\n",[23,858,859,868,876,881],{"__ignoreMap":41},[45,860,861,864,866],{"class":47,"line":48},[45,862,863],{"class":95},"endpointQueryOptions.",[45,865,381],{"class":85},[45,867,89],{"class":95},[45,869,870,872,874],{"class":47,"line":92},[45,871,673],{"class":95},[45,873,391],{"class":55},[45,875,394],{"class":95},[45,877,878],{"class":47,"line":108},[45,879,880],{"class":95},"  keyScope: { tenant: tenantId },\n",[45,882,883],{"class":47,"line":114},[45,884,149],{"class":95},[10,886,887,888,890],{},"Clear or scope the browser cache when signed-in identity changes. Auto mode and the external recipe below create a request-scoped ",[23,889,167],{}," and isolate SSR requests.",[28,892,894],{"id":893},"automatic-ssr-setup","Automatic SSR setup",[10,896,897,898,901],{},"Choose ",[23,899,900],{},"auto"," when the application does not already install Vue Query:",[36,903,905],{"className":69,"code":904,"language":71,"meta":41,"style":41},"export default defineNuxtConfig({\n  modules: ['nuxt-endpoints'],\n  endpoints: {\n    client: {\n      query: {\n        setup: 'auto',\n        staleTime: 60_000,\n      },\n    },\n  },\n})\n",[23,906,907,917,927,931,935,940,950,960,965,969,975],{"__ignoreMap":41},[45,908,909,911,913,915],{"class":47,"line":48},[45,910,79],{"class":78},[45,912,82],{"class":78},[45,914,86],{"class":85},[45,916,89],{"class":51},[45,918,919,921,923,925],{"class":47,"line":92},[45,920,96],{"class":95},[45,922,99],{"class":55},[45,924,102],{"class":95},[45,926,105],{"class":51},[45,928,929],{"class":47,"line":108},[45,930,111],{"class":95},[45,932,933],{"class":47,"line":114},[45,934,117],{"class":95},[45,936,937],{"class":47,"line":120},[45,938,939],{"class":95},"      query: {\n",[45,941,942,945,948],{"class":47,"line":132},[45,943,944],{"class":95},"        setup: ",[45,946,947],{"class":55},"'auto'",[45,949,105],{"class":95},[45,951,952,955,958],{"class":47,"line":138},[45,953,954],{"class":95},"        staleTime: ",[45,956,957],{"class":126},"60_000",[45,959,105],{"class":95},[45,961,962],{"class":47,"line":146},[45,963,964],{"class":95},"      },\n",[45,966,967],{"class":47,"line":407},[45,968,135],{"class":95},[45,970,971,973],{"class":47,"line":412},[45,972,141],{"class":95},[45,974,105],{"class":51},[45,976,977],{"class":47,"line":626},[45,978,149],{"class":51},[10,980,981,982,984,985,988,989,992],{},"Auto mode creates a request-scoped ",[23,983,167],{},", installs ",[23,986,987],{},"VueQueryPlugin",", transfers dehydrated state through Nuxt, forwards the incoming request context for SSR endpoint calls, hydrates on the client, and clears the server cache after dehydration. ",[23,990,991],{},"staleTime"," defaults to 60 seconds in auto mode to avoid an immediate duplicate browser request after hydration.",[10,994,995,996,998],{},"Do not combine auto mode with another application-installed ",[23,997,987],{},"; choose exactly one QueryClient owner.",[10,1000,1001],{},"Pages that require query data in the server-rendered HTML must await the query during SSR:",[36,1003,1007],{"className":1004,"code":1005,"language":1006,"meta":41,"style":41},"language-vue shiki shiki-themes github-light-default github-dark-default","\u003Cscript setup lang=\"ts\">\nimport { useQuery } from '@tanstack\u002Fvue-query'\nimport { onServerPrefetch } from 'vue'\nimport { endpointQueryOptions } from '#endpoints\u002Fquery'\n\nconst user = useQuery(endpointQueryOptions.getUser({ params: { id: '123' } }))\nonServerPrefetch(() => user.suspense())\n\u003C\u002Fscript>\n","vue",[23,1008,1009,1033,1043,1055,1065,1069,1092,1110],{"__ignoreMap":41},[45,1010,1011,1014,1018,1021,1024,1027,1030],{"class":47,"line":48},[45,1012,1013],{"class":95},"\u003C",[45,1015,1017],{"class":1016},"snZHK","script",[45,1019,1020],{"class":126}," setup",[45,1022,1023],{"class":126}," lang",[45,1025,1026],{"class":95},"=",[45,1028,1029],{"class":55},"\"ts\"",[45,1031,1032],{"class":95},">\n",[45,1034,1035,1037,1039,1041],{"class":47,"line":92},[45,1036,330],{"class":78},[45,1038,333],{"class":95},[45,1040,336],{"class":78},[45,1042,339],{"class":55},[45,1044,1045,1047,1050,1052],{"class":47,"line":108},[45,1046,330],{"class":78},[45,1048,1049],{"class":95}," { onServerPrefetch } ",[45,1051,336],{"class":78},[45,1053,1054],{"class":55}," 'vue'\n",[45,1056,1057,1059,1061,1063],{"class":47,"line":114},[45,1058,330],{"class":78},[45,1060,346],{"class":95},[45,1062,336],{"class":78},[45,1064,351],{"class":55},[45,1066,1067],{"class":47,"line":120},[45,1068,357],{"emptyLinePlaceholder":356},[45,1070,1071,1073,1075,1077,1079,1082,1084,1087,1089],{"class":47,"line":132},[45,1072,362],{"class":78},[45,1074,365],{"class":126},[45,1076,202],{"class":78},[45,1078,370],{"class":85},[45,1080,1081],{"class":95},"(endpointQueryOptions.",[45,1083,381],{"class":85},[45,1085,1086],{"class":95},"({ params: { id: ",[45,1088,391],{"class":55},[45,1090,1091],{"class":95}," } }))\n",[45,1093,1094,1097,1099,1101,1104,1107],{"class":47,"line":138},[45,1095,1096],{"class":85},"onServerPrefetch",[45,1098,467],{"class":95},[45,1100,470],{"class":78},[45,1102,1103],{"class":95}," user.",[45,1105,1106],{"class":85},"suspense",[45,1108,1109],{"class":95},"())\n",[45,1111,1112,1115,1117],{"class":47,"line":146},[45,1113,1114],{"class":95},"\u003C\u002F",[45,1116,1017],{"class":1016},[45,1118,1032],{"class":95},[28,1120,1122],{"id":1121},"external-ssr-setup","External SSR setup",[10,1124,1125,1126,1128,1129,1132,1133,1135],{},"Keep ",[23,1127,159],{}," or set ",[23,1130,1131],{},"setup: 'external'"," when the application already owns Vue Query configuration. A Nuxt plugin must create the ",[23,1134,167],{}," inside the plugin body so it is request-scoped during SSR:",[36,1137,1139],{"className":69,"code":1138,"language":71,"meta":41,"style":41},"\u002F\u002F app\u002Fplugins\u002Fvue-query.ts\nimport type { DehydratedState } from '@tanstack\u002Fvue-query'\nimport { QueryClient, VueQueryPlugin, dehydrate, hydrate } from '@tanstack\u002Fvue-query'\nimport { defineNuxtPlugin, useState } from 'nuxt\u002Fapp'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  const state = useState\u003CDehydratedState | null>('vue-query', () => null)\n  const queryClient = new QueryClient({\n    defaultOptions: { queries: { staleTime: 60_000 } },\n  })\n\n  nuxtApp.vueApp.use(VueQueryPlugin, { queryClient })\n\n  if (import.meta.server) {\n    nuxtApp.hooks.hook('app:rendered', () => {\n      state.value = dehydrate(queryClient)\n      queryClient.clear()\n    })\n  }\n\n  if (import.meta.client) {\n    hydrate(queryClient, state.value)\n  }\n})\n",[23,1140,1141,1147,1161,1172,1184,1188,1204,1243,1259,1269,1274,1278,1289,1293,1311,1330,1343,1353,1357,1362,1366,1382,1391,1396],{"__ignoreMap":41},[45,1142,1143],{"class":47,"line":48},[45,1144,1146],{"class":1145},"sA0OV","\u002F\u002F app\u002Fplugins\u002Fvue-query.ts\n",[45,1148,1149,1151,1154,1157,1159],{"class":47,"line":92},[45,1150,330],{"class":78},[45,1152,1153],{"class":78}," type",[45,1155,1156],{"class":95}," { DehydratedState } ",[45,1158,336],{"class":78},[45,1160,339],{"class":55},[45,1162,1163,1165,1168,1170],{"class":47,"line":108},[45,1164,330],{"class":78},[45,1166,1167],{"class":95}," { QueryClient, VueQueryPlugin, dehydrate, hydrate } ",[45,1169,336],{"class":78},[45,1171,339],{"class":55},[45,1173,1174,1176,1179,1181],{"class":47,"line":114},[45,1175,330],{"class":78},[45,1177,1178],{"class":95}," { defineNuxtPlugin, useState } ",[45,1180,336],{"class":78},[45,1182,1183],{"class":55}," 'nuxt\u002Fapp'\n",[45,1185,1186],{"class":47,"line":120},[45,1187,357],{"emptyLinePlaceholder":356},[45,1189,1190,1192,1194,1197,1200,1202],{"class":47,"line":132},[45,1191,79],{"class":78},[45,1193,82],{"class":78},[45,1195,1196],{"class":85}," defineNuxtPlugin",[45,1198,1199],{"class":51},"((nuxtApp) ",[45,1201,470],{"class":78},[45,1203,603],{"class":95},[45,1205,1206,1209,1212,1214,1217,1219,1222,1225,1228,1231,1234,1237,1239,1241],{"class":47,"line":138},[45,1207,1208],{"class":78},"  const",[45,1210,1211],{"class":126}," state",[45,1213,202],{"class":78},[45,1215,1216],{"class":85}," useState",[45,1218,1013],{"class":95},[45,1220,1221],{"class":51},"DehydratedState",[45,1223,1224],{"class":78}," |",[45,1226,1227],{"class":126}," null",[45,1229,1230],{"class":95},">(",[45,1232,1233],{"class":55},"'vue-query'",[45,1235,1236],{"class":95},", () ",[45,1238,470],{"class":78},[45,1240,1227],{"class":126},[45,1242,404],{"class":95},[45,1244,1245,1247,1249,1251,1254,1257],{"class":47,"line":146},[45,1246,1208],{"class":78},[45,1248,539],{"class":126},[45,1250,202],{"class":78},[45,1252,1253],{"class":78}," new",[45,1255,1256],{"class":85}," QueryClient",[45,1258,89],{"class":95},[45,1260,1261,1264,1266],{"class":47,"line":407},[45,1262,1263],{"class":95},"    defaultOptions: { queries: { staleTime: ",[45,1265,957],{"class":126},[45,1267,1268],{"class":95}," } },\n",[45,1270,1271],{"class":47,"line":412},[45,1272,1273],{"class":95},"  })\n",[45,1275,1276],{"class":47,"line":626},[45,1277,357],{"emptyLinePlaceholder":356},[45,1279,1280,1283,1286],{"class":47,"line":632},[45,1281,1282],{"class":95},"  nuxtApp.vueApp.",[45,1284,1285],{"class":85},"use",[45,1287,1288],{"class":95},"(VueQueryPlugin, { queryClient })\n",[45,1290,1291],{"class":47,"line":638},[45,1292,357],{"emptyLinePlaceholder":356},[45,1294,1295,1298,1301,1303,1305,1308],{"class":47,"line":644},[45,1296,1297],{"class":78},"  if",[45,1299,1300],{"class":95}," (",[45,1302,330],{"class":78},[45,1304,275],{"class":95},[45,1306,1307],{"class":126},"meta",[45,1309,1310],{"class":95},".server) {\n",[45,1312,1313,1316,1319,1321,1324,1326,1328],{"class":47,"line":649},[45,1314,1315],{"class":95},"    nuxtApp.hooks.",[45,1317,1318],{"class":85},"hook",[45,1320,438],{"class":95},[45,1322,1323],{"class":55},"'app:rendered'",[45,1325,1236],{"class":95},[45,1327,470],{"class":78},[45,1329,603],{"class":95},[45,1331,1332,1335,1337,1340],{"class":47,"line":654},[45,1333,1334],{"class":95},"      state.value ",[45,1336,1026],{"class":78},[45,1338,1339],{"class":85}," dehydrate",[45,1341,1342],{"class":95},"(queryClient)\n",[45,1344,1345,1348,1351],{"class":47,"line":659},[45,1346,1347],{"class":95},"      queryClient.",[45,1349,1350],{"class":85},"clear",[45,1352,547],{"class":95},[45,1354,1355],{"class":47,"line":670},[45,1356,641],{"class":95},[45,1358,1359],{"class":47,"line":680},[45,1360,1361],{"class":95},"  }\n",[45,1363,1364],{"class":47,"line":691},[45,1365,357],{"emptyLinePlaceholder":356},[45,1367,1369,1371,1373,1375,1377,1379],{"class":47,"line":1368},21,[45,1370,1297],{"class":78},[45,1372,1300],{"class":95},[45,1374,330],{"class":78},[45,1376,275],{"class":95},[45,1378,1307],{"class":126},[45,1380,1381],{"class":95},".client) {\n",[45,1383,1385,1388],{"class":47,"line":1384},22,[45,1386,1387],{"class":85},"    hydrate",[45,1389,1390],{"class":95},"(queryClient, state.value)\n",[45,1392,1394],{"class":47,"line":1393},23,[45,1395,1361],{"class":95},[45,1397,1399,1402],{"class":47,"line":1398},24,[45,1400,1401],{"class":95},"}",[45,1403,404],{"class":51},[10,1405,1406,1407,1410],{},"Do not hoist ",[23,1408,1409],{},"new QueryClient()"," to module scope; that would share cached data across SSR requests.",[10,1412,1413],{},"During SSR, call generated factories while Nuxt context is active—for example, inside component setup, a Nuxt plugin, or route middleware. Do not construct their options at module scope or after losing Nuxt context: the adapter captures the request-aware fetcher when the factory is called.",[28,1415,1417],{"id":1416},"infinite-queries","Infinite queries",[10,1419,1420,1421,281,1424,1427,1428,66],{},"Infinite queries require an explicit page-param-to-request mapping. The adapter does not assume a field name such as ",[23,1422,1423],{},"cursor",[23,1425,1426],{},"page",", or ",[23,1429,1430],{},"offset",[36,1432,1434],{"className":69,"code":1433,"language":71,"meta":41,"style":41},"import { useInfiniteQuery } from '@tanstack\u002Fvue-query'\nimport { endpointInfiniteQueryOptions } from '#endpoints\u002Fquery'\n\nconst users = useInfiniteQuery(\n  endpointInfiniteQueryOptions.searchUsers({\n    initialPageParam: undefined,\n    keyScope: { tenant: tenantId },\n    request: (pageParam) => ({\n      query: { cursor: pageParam, term: 'ada' },\n    }),\n    getNextPageParam: (page) => page.nextCursor,\n  }),\n)\n",[23,1435,1436,1447,1458,1462,1476,1486,1496,1501,1517,1527,1532,1548,1552],{"__ignoreMap":41},[45,1437,1438,1440,1443,1445],{"class":47,"line":48},[45,1439,330],{"class":78},[45,1441,1442],{"class":95}," { useInfiniteQuery } ",[45,1444,336],{"class":78},[45,1446,339],{"class":55},[45,1448,1449,1451,1454,1456],{"class":47,"line":92},[45,1450,330],{"class":78},[45,1452,1453],{"class":95}," { endpointInfiniteQueryOptions } ",[45,1455,336],{"class":78},[45,1457,351],{"class":55},[45,1459,1460],{"class":47,"line":108},[45,1461,357],{"emptyLinePlaceholder":356},[45,1463,1464,1466,1469,1471,1474],{"class":47,"line":114},[45,1465,362],{"class":78},[45,1467,1468],{"class":126}," users",[45,1470,202],{"class":78},[45,1472,1473],{"class":85}," useInfiniteQuery",[45,1475,373],{"class":95},[45,1477,1478,1481,1484],{"class":47,"line":120},[45,1479,1480],{"class":95},"  endpointInfiniteQueryOptions.",[45,1482,1483],{"class":85},"searchUsers",[45,1485,89],{"class":95},[45,1487,1488,1491,1494],{"class":47,"line":132},[45,1489,1490],{"class":95},"    initialPageParam: ",[45,1492,1493],{"class":126},"undefined",[45,1495,105],{"class":95},[45,1497,1498],{"class":47,"line":138},[45,1499,1500],{"class":95},"    keyScope: { tenant: tenantId },\n",[45,1502,1503,1506,1508,1511,1513,1515],{"class":47,"line":146},[45,1504,1505],{"class":85},"    request",[45,1507,587],{"class":95},[45,1509,1510],{"class":51},"pageParam",[45,1512,598],{"class":95},[45,1514,470],{"class":78},[45,1516,473],{"class":95},[45,1518,1519,1522,1525],{"class":47,"line":407},[45,1520,1521],{"class":95},"      query: { cursor: pageParam, term: ",[45,1523,1524],{"class":55},"'ada'",[45,1526,394],{"class":95},[45,1528,1529],{"class":47,"line":412},[45,1530,1531],{"class":95},"    }),\n",[45,1533,1534,1537,1539,1541,1543,1545],{"class":47,"line":626},[45,1535,1536],{"class":85},"    getNextPageParam",[45,1538,587],{"class":95},[45,1540,1426],{"class":51},[45,1542,598],{"class":95},[45,1544,470],{"class":78},[45,1546,1547],{"class":95}," page.nextCursor,\n",[45,1549,1550],{"class":47,"line":632},[45,1551,399],{"class":95},[45,1553,1554],{"class":47,"line":638},[45,1555,404],{"class":95},[10,1557,1558,1559,1561,1562,1565,1566,1569,1570,1573,1574,275],{},"Set ",[23,1560,853],{}," beside ",[23,1563,1564],{},"initialPageParam",", not inside ",[23,1567,1568],{},"request",". Infinite-query identity is derived from ",[23,1571,1572],{},"request(initialPageParam)"," plus the top-level ",[23,1575,853],{},[10,1577,1578,1579,1582],{},"Wrap the whole factory call in ",[23,1580,1581],{},"computed"," when filters are reactive, so a filter change creates a new key and request function together.",[10,1584,1585,1586,1589,1590,1593],{},"The page body remains fully typed. With current Vue Query types, ",[23,1587,1588],{},"data.value.pageParams"," may widen to ",[23,1591,1592],{},"unknown[]","; this does not affect runtime pagination.",[28,1595,1597],{"id":1596},"prefetching-and-devtools","Prefetching and Devtools",[10,1599,1600],{},"The factories return standard Vue Query options, so normal APIs work unchanged:",[36,1602,1604],{"className":69,"code":1603,"language":71,"meta":41,"style":41},"await queryClient.prefetchQuery(endpointQueryOptions.getUser({ params: { id } }))\nconst user = await queryClient.ensureQueryData(endpointQueryOptions.getUser({ params: { id } }))\n",[23,1605,1606,1624],{"__ignoreMap":41},[45,1607,1608,1611,1614,1617,1619,1621],{"class":47,"line":48},[45,1609,1610],{"class":78},"await",[45,1612,1613],{"class":95}," queryClient.",[45,1615,1616],{"class":85},"prefetchQuery",[45,1618,1081],{"class":95},[45,1620,381],{"class":85},[45,1622,1623],{"class":95},"({ params: { id } }))\n",[45,1625,1626,1628,1630,1632,1635,1637,1640,1642,1644],{"class":47,"line":92},[45,1627,362],{"class":78},[45,1629,365],{"class":126},[45,1631,202],{"class":78},[45,1633,1634],{"class":78}," await",[45,1636,1613],{"class":95},[45,1638,1639],{"class":85},"ensureQueryData",[45,1641,1081],{"class":95},[45,1643,381],{"class":85},[45,1645,1623],{"class":95},[10,1647,1648,1651,1652,1655],{},[23,1649,1650],{},"@tanstack\u002Fvue-query-devtools"," also works without adapter-specific setup. Generated keys use the visible ",[23,1653,1654],{},"nuxt-endpoints"," namespace and operation name.",[1657,1658,1659],"style",{},"html pre.shiki code .sVS1I, html code.shiki .sVS1I{--shiki-light:#953800;--shiki-dark:#FFA657}html pre.shiki code .sZItA, html code.shiki .sZItA{--shiki-light:#0A3069;--shiki-dark:#A5D6FF}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 .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 .swxxe, html code.shiki .swxxe{--shiki-light:#CF222E;--shiki-dark:#FF7B72}html pre.shiki code .s9HWX, html code.shiki .s9HWX{--shiki-light:#8250DF;--shiki-dark:#D2A8FF}html pre.shiki code .saQ_J, html code.shiki .saQ_J{--shiki-light:#1F2328;--shiki-dark:#E6EDF3}html pre.shiki code .sOOdx, html code.shiki .sOOdx{--shiki-light:#0550AE;--shiki-dark:#79C0FF}html pre.shiki code .snZHK, html code.shiki .snZHK{--shiki-light:#116329;--shiki-dark:#7EE787}html pre.shiki code .sA0OV, html code.shiki .sA0OV{--shiki-light:#6E7781;--shiki-dark:#8B949E}",{"title":41,"searchDepth":92,"depth":92,"links":1661},[1662,1663,1664,1665,1666,1667,1668,1669,1670],{"id":30,"depth":92,"text":31},{"id":313,"depth":92,"text":314},{"id":497,"depth":92,"text":498},{"id":714,"depth":92,"text":715},{"id":824,"depth":92,"text":825},{"id":893,"depth":92,"text":894},{"id":1121,"depth":92,"text":1122},{"id":1416,"depth":92,"text":1417},{"id":1596,"depth":92,"text":1597},"Generate typed query, mutation, and infinite-query options for Vue Query from named endpoints, with optional Nuxt SSR setup.","md",{},"\u002Fdocs\u002Ftanstack-query",{"title":5,"description":1671},"docs\u002Ftanstack-query","YVEsW4iX6TC5XLXh76jlYsicIcvxtL9_t8BVaUKElGw",{"left":1679,"top":1679,"width":1398,"height":1398,"rotate":1679,"vFlip":1680,"hFlip":1680,"body":1681},0,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":1679,"top":1679,"width":1398,"height":1398,"rotate":1679,"vFlip":1680,"hFlip":1680,"body":1683,"hidden":356},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5c.08-1.25-.27-2.48-1-3.5c.28-1.15.28-2.35 0-3.5c0 0-1 0-3 1.5c-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5c-.39.49-.68 1.05-.85 1.65S8.93 17.38 9 18v4\"\u002F>\u003Cpath d=\"M9 18c-4.51 2-5-2-7-2\"\u002F>\u003C\u002Fg>",{"left":1679,"top":1679,"width":1398,"height":1398,"rotate":1679,"vFlip":1680,"hFlip":1680,"body":1685},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",1787723882303]