[{"data":1,"prerenderedAt":1074},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Fguides\u002Finfinite-queries":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":1073,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Fguides\u002Finfinite-queries.md",{},"Infinite queries with useInfiniteQuery",{"type":8,"value":9,"toc":1065},"minimark",[10,19,24,43,865,892,896,902,975,1003,1007,1010,1021,1041,1050],[11,12,13,14,18],"p",{},"Generate ",[15,16,17],"code",{},"useInfiniteQuery"," composables for paginated endpoints, read the next cursor from the response, and stop once the last page arrives.",[20,21,23],"h2",{"id":22},"generate-infinite-composables","Generate infinite composables",[11,25,26,27,34,35,38,39,42],{},"When an endpoint pages through results with a query parameter, set ",[28,29,31],"a",{"href":30},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions#infinite",[15,32,33],{},"infinite"," next to ",[15,36,37],{},"hooks: true",". Only operations that declare ",[15,40,41],{},"infinite.queryParam"," get an infinite composable, and the composable sends each page param as that parameter:",[44,45,46,315,750],"code-group",{},[47,48,53],"pre",{"language":49,"filename":50,"code":51,"class":52},"typescript","kubb.config.ts","import { defineConfig } from 'kubb\u002Fconfig'\nimport { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginFetch } from '@kubb\u002Fplugin-fetch'\nimport { pluginVueQuery } from '@kubb\u002Fplugin-vue-query'\n\nexport default defineConfig({\n  input: '.\u002FpetStore.yaml',\n  output: { path: '.\u002Fsrc\u002Fgen' },\n  plugins: [\n    pluginTs(),\n    pluginFetch(),\n    pluginVueQuery({\n      hooks: true,\n      infinite: { queryParam: 'page', initialPageParam: 0, nextParam: 'pagination.next.cursor' },\n    }),\n  ],\n})","highlights",[15,54,56,83,84,83,100,83,116,83,132,83,134,83,149,83,166,83,190,83,202,83,215,83,226,83,235,83,250,83,293,83,302,83,311],{"class":55},"language-typescript",[57,58,61,65,69,73,76,79],"span",{"class":59,"style":60},"line","display: inline",[57,62,64],{"style":63},"color:#d73a49;--hls-dark:#f97583","import ",[57,66,68],{"style":67},"color:#005cc5;--hls-dark:#79b8ff","{ ",[57,70,72],{"style":71},"color:#24292e;--hls-dark:#e1e4e8","defineConfig ",[57,74,75],{"style":67},"} ",[57,77,78],{"style":63},"from ",[57,80,82],{"style":81},"color:#032f62;--hls-dark:#9ecbff","'kubb\u002Fconfig'","\n",[57,85,86,88,90,93,95,97],{"class":59,"style":60},[57,87,64],{"style":63},[57,89,68],{"style":67},[57,91,92],{"style":71},"pluginTs ",[57,94,75],{"style":67},[57,96,78],{"style":63},[57,98,99],{"style":81},"'@kubb\u002Fplugin-ts'",[57,101,102,104,106,109,111,113],{"class":59,"style":60},[57,103,64],{"style":63},[57,105,68],{"style":67},[57,107,108],{"style":71},"pluginFetch ",[57,110,75],{"style":67},[57,112,78],{"style":63},[57,114,115],{"style":81},"'@kubb\u002Fplugin-fetch'",[57,117,118,120,122,125,127,129],{"class":59,"style":60},[57,119,64],{"style":63},[57,121,68],{"style":67},[57,123,124],{"style":71},"pluginVueQuery ",[57,126,75],{"style":67},[57,128,78],{"style":63},[57,130,131],{"style":81},"'@kubb\u002Fplugin-vue-query'",[57,133],{"class":59,"style":60},[57,135,136,139,142,146],{"class":59,"style":60},[57,137,138],{"style":63},"export ",[57,140,141],{"style":63},"default ",[57,143,145],{"style":144},"color:#6f42c1;--hls-dark:#b392f0","defineConfig",[57,147,148],{"style":67},"({",[57,150,151,154,157,160,163],{"class":59,"style":60},[57,152,153],{"style":67},"  ",[57,155,156],{"style":67},"input",[57,158,159],{"style":63},": ",[57,161,162],{"style":81},"'.\u002FpetStore.yaml'",[57,164,165],{"style":63},",",[57,167,168,170,173,175,177,180,182,185,188],{"class":59,"style":60},[57,169,153],{"style":63},[57,171,172],{"style":67},"output",[57,174,159],{"style":63},[57,176,68],{"style":67},[57,178,179],{"style":67},"path",[57,181,159],{"style":63},[57,183,184],{"style":81},"'.\u002Fsrc\u002Fgen' ",[57,186,187],{"style":67},"}",[57,189,165],{"style":63},[57,191,192,194,197,199],{"class":59,"style":60},[57,193,153],{"style":63},[57,195,196],{"style":67},"plugins",[57,198,159],{"style":63},[57,200,201],{"style":67},"[",[57,203,204,207,210,213],{"class":59,"style":60},[57,205,206],{"style":67},"    ",[57,208,209],{"style":144},"pluginTs",[57,211,212],{"style":67},"()",[57,214,165],{"style":63},[57,216,217,219,222,224],{"class":59,"style":60},[57,218,206],{"style":63},[57,220,221],{"style":144},"pluginFetch",[57,223,212],{"style":67},[57,225,165],{"style":63},[57,227,228,230,233],{"class":59,"style":60},[57,229,206],{"style":63},[57,231,232],{"style":144},"pluginVueQuery",[57,234,148],{"style":67},[57,236,237,240,243,245,248],{"class":59,"style":60},[57,238,239],{"style":67},"      ",[57,241,242],{"style":67},"hooks",[57,244,159],{"style":63},[57,246,247],{"style":67},"true",[57,249,165],{"style":63},[57,251,252,254,256,258,260,263,265,268,271,274,276,279,281,284,286,289,291],{"class":59,"style":60},[57,253,239],{"style":63},[57,255,33],{"style":67},[57,257,159],{"style":63},[57,259,68],{"style":67},[57,261,262],{"style":67},"queryParam",[57,264,159],{"style":63},[57,266,267],{"style":81},"'page'",[57,269,270],{"style":63},", ",[57,272,273],{"style":67},"initialPageParam",[57,275,159],{"style":63},[57,277,278],{"style":67},"0",[57,280,270],{"style":63},[57,282,283],{"style":67},"nextParam",[57,285,159],{"style":63},[57,287,288],{"style":81},"'pagination.next.cursor' ",[57,290,187],{"style":67},[57,292,165],{"style":63},[57,294,295,297,300],{"class":59,"style":60},[57,296,206],{"style":63},[57,298,299],{"style":67},"})",[57,301,165],{"style":63},[57,303,304,306,309],{"class":59,"style":60},[57,305,153],{"style":63},[57,307,308],{"style":67},"]",[57,310,165],{"style":63},[57,312,313],{"class":59,"style":60},[57,314,299],{"style":67},[47,316,319],{"language":49,"filename":317,"code":318,"class":52},"Generated","\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite.ts, types left out\nexport const findPetsByTagsInfiniteQueryKey = ({ query }: { query?: MaybeRefOrGetter\u003COmit\u003CFindPetsByTagsOptions, 'headers'>['query']> } = {}) =>\n  [{ url: '\u002Fpet\u002FfindByTags', infinite: true }, ...(query ? [query] : [])] as const\n\nexport function findPetsByTagsInfiniteQueryOptions({ query }: { query?: MaybeRefOrGetter\u003CFindPetsByTagsOptions['query']> } = {}, config = {}) {\n  const queryKey = findPetsByTagsInfiniteQueryKey({ query })\n  return infiniteQueryOptions({\n    queryKey,\n    queryFn: async ({ signal, pageParam }) => {\n      return findPetsByTags({ ...config, query: { ...toValue(query), page: pageParam }, signal: config.signal ?? signal, throwOnError: true }).unwrap()\n    },\n    initialPageParam: 0,\n    getNextPageParam: (lastPage) => lastPage?.['pagination']?.['next']?.['cursor'],\n  })\n}",[15,320,321,83,327,83,400,83,457,83,459,83,514,83,534,83,546,83,555,83,586,83,670,83,677,83,689,83,740,83,746],{"class":55},[57,322,323],{"class":59,"style":60},[57,324,326],{"style":325},"color:#6a737d;--hls-dark:#6a737d","\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite.ts, types left out",[57,328,329,331,334,337,340,343,346,348,350,352,355,358,361,364,367,369,372,374,377,380,382,385,387,390,392,394,397],{"class":59,"style":60},[57,330,138],{"style":63},[57,332,333],{"style":63},"const ",[57,335,336],{"style":71},"findPetsByTagsInfiniteQueryKey ",[57,338,339],{"style":63},"= ",[57,341,342],{"style":67},"({ ",[57,344,345],{"style":71},"query ",[57,347,187],{"style":67},[57,349,159],{"style":63},[57,351,68],{"style":67},[57,353,354],{"style":67},"query",[57,356,357],{"style":71},"?: ",[57,359,360],{"style":144},"MaybeRefOrGetter",[57,362,363],{"style":63},"\u003C",[57,365,366],{"style":144},"Omit",[57,368,363],{"style":63},[57,370,371],{"style":144},"FindPetsByTagsOptions",[57,373,270],{"style":63},[57,375,376],{"style":81},"'headers'",[57,378,379],{"style":63},">",[57,381,201],{"style":67},[57,383,384],{"style":81},"'query'",[57,386,308],{"style":67},[57,388,389],{"style":63},"> ",[57,391,75],{"style":67},[57,393,339],{"style":63},[57,395,396],{"style":67},"{}) ",[57,398,399],{"style":63},"=>",[57,401,402,404,407,410,412,415,417,419,421,424,426,428,431,434,436,439,441,443,446,448,451,454],{"class":59,"style":60},[57,403,153],{"style":63},[57,405,406],{"style":67},"[{ ",[57,408,409],{"style":67},"url",[57,411,159],{"style":63},[57,413,414],{"style":81},"'\u002Fpet\u002FfindByTags'",[57,416,270],{"style":63},[57,418,33],{"style":67},[57,420,159],{"style":63},[57,422,423],{"style":67},"true ",[57,425,187],{"style":67},[57,427,270],{"style":63},[57,429,430],{"style":63},"...",[57,432,433],{"style":67},"(",[57,435,345],{"style":71},[57,437,438],{"style":63},"? ",[57,440,201],{"style":67},[57,442,354],{"style":71},[57,444,445],{"style":67},"] ",[57,447,159],{"style":63},[57,449,450],{"style":67},"[])] ",[57,452,453],{"style":63},"as ",[57,455,456],{"style":63},"const",[57,458],{"class":59,"style":60},[57,460,461,463,466,469,471,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501,504,506,509,511],{"class":59,"style":60},[57,462,138],{"style":63},[57,464,465],{"style":63},"function ",[57,467,468],{"style":144},"findPetsByTagsInfiniteQueryOptions",[57,470,342],{"style":67},[57,472,345],{"style":71},[57,474,187],{"style":67},[57,476,159],{"style":63},[57,478,68],{"style":67},[57,480,354],{"style":67},[57,482,357],{"style":71},[57,484,360],{"style":144},[57,486,363],{"style":63},[57,488,371],{"style":144},[57,490,201],{"style":67},[57,492,384],{"style":81},[57,494,308],{"style":67},[57,496,389],{"style":63},[57,498,75],{"style":67},[57,500,339],{"style":63},[57,502,503],{"style":67},"{}",[57,505,270],{"style":63},[57,507,508],{"style":71},"config ",[57,510,339],{"style":63},[57,512,513],{"style":67},"{}) {",[57,515,516,518,520,523,525,528,530,532],{"class":59,"style":60},[57,517,153],{"style":67},[57,519,333],{"style":63},[57,521,522],{"style":71},"queryKey ",[57,524,339],{"style":63},[57,526,527],{"style":144},"findPetsByTagsInfiniteQueryKey",[57,529,342],{"style":67},[57,531,345],{"style":71},[57,533,299],{"style":67},[57,535,536,538,541,544],{"class":59,"style":60},[57,537,153],{"style":67},[57,539,540],{"style":63},"return ",[57,542,543],{"style":144},"infiniteQueryOptions",[57,545,148],{"style":67},[57,547,548,550,553],{"class":59,"style":60},[57,549,206],{"style":67},[57,551,552],{"style":71},"queryKey",[57,554,165],{"style":63},[57,556,557,559,562,564,567,569,572,574,577,580,583],{"class":59,"style":60},[57,558,206],{"style":63},[57,560,561],{"style":67},"queryFn",[57,563,159],{"style":63},[57,565,566],{"style":63},"async ",[57,568,342],{"style":67},[57,570,571],{"style":71},"signal",[57,573,270],{"style":63},[57,575,576],{"style":71},"pageParam ",[57,578,579],{"style":67},"}) ",[57,581,582],{"style":63},"=> ",[57,584,585],{"style":67},"{",[57,587,588,590,592,595,597,599,602,604,606,608,610,612,615,617,619,622,624,627,629,631,633,635,637,639,641,644,647,650,652,654,657,659,661,663,665,668],{"class":59,"style":60},[57,589,239],{"style":67},[57,591,540],{"style":63},[57,593,594],{"style":144},"findPetsByTags",[57,596,342],{"style":67},[57,598,430],{"style":63},[57,600,601],{"style":71},"config",[57,603,270],{"style":63},[57,605,354],{"style":67},[57,607,159],{"style":63},[57,609,68],{"style":67},[57,611,430],{"style":63},[57,613,614],{"style":144},"toValue",[57,616,433],{"style":67},[57,618,354],{"style":71},[57,620,621],{"style":67},")",[57,623,270],{"style":63},[57,625,626],{"style":67},"page",[57,628,159],{"style":63},[57,630,576],{"style":71},[57,632,187],{"style":67},[57,634,270],{"style":63},[57,636,571],{"style":67},[57,638,159],{"style":63},[57,640,601],{"style":71},[57,642,643],{"style":63},".",[57,645,646],{"style":67},"signal ",[57,648,649],{"style":63},"?? ",[57,651,571],{"style":71},[57,653,270],{"style":63},[57,655,656],{"style":67},"throwOnError",[57,658,159],{"style":63},[57,660,423],{"style":67},[57,662,299],{"style":67},[57,664,643],{"style":63},[57,666,667],{"style":144},"unwrap",[57,669,212],{"style":67},[57,671,672,675],{"class":59,"style":60},[57,673,674],{"style":67},"    }",[57,676,165],{"style":63},[57,678,679,681,683,685,687],{"class":59,"style":60},[57,680,206],{"style":63},[57,682,273],{"style":67},[57,684,159],{"style":63},[57,686,278],{"style":67},[57,688,165],{"style":63},[57,690,691,693,696,698,700,703,706,708,710,713,715,718,720,722,724,727,729,731,733,736,738],{"class":59,"style":60},[57,692,206],{"style":63},[57,694,695],{"style":67},"getNextPageParam",[57,697,159],{"style":63},[57,699,433],{"style":67},[57,701,702],{"style":71},"lastPage",[57,704,705],{"style":67},") ",[57,707,582],{"style":63},[57,709,702],{"style":71},[57,711,712],{"style":63},"?.",[57,714,201],{"style":67},[57,716,717],{"style":81},"'pagination'",[57,719,308],{"style":67},[57,721,712],{"style":63},[57,723,201],{"style":67},[57,725,726],{"style":81},"'next'",[57,728,308],{"style":67},[57,730,712],{"style":63},[57,732,201],{"style":67},[57,734,735],{"style":81},"'cursor'",[57,737,308],{"style":67},[57,739,165],{"style":63},[57,741,742,744],{"class":59,"style":60},[57,743,153],{"style":63},[57,745,299],{"style":67},[57,747,748],{"class":59,"style":60},[57,749,187],{"style":67},[47,751,754],{"language":49,"filename":752,"code":753,"class":52},"Usage","import { ref } from 'vue'\nimport { useFindPetsByTagsInfinite } from '.\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite'\n\nconst tags = ref(['dog'])\nconst { data, fetchNextPage, hasNextPage } = useFindPetsByTagsInfinite({ query: () => ({ tags: tags.value }) })",[15,755,756,83,772,83,788,83,790,83,811],{"class":55},[57,757,758,760,762,765,767,769],{"class":59,"style":60},[57,759,64],{"style":63},[57,761,68],{"style":67},[57,763,764],{"style":71},"ref ",[57,766,75],{"style":67},[57,768,78],{"style":63},[57,770,771],{"style":81},"'vue'",[57,773,774,776,778,781,783,785],{"class":59,"style":60},[57,775,64],{"style":63},[57,777,68],{"style":67},[57,779,780],{"style":71},"useFindPetsByTagsInfinite ",[57,782,75],{"style":67},[57,784,78],{"style":63},[57,786,787],{"style":81},"'.\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite'",[57,789],{"class":59,"style":60},[57,791,792,794,797,799,802,805,808],{"class":59,"style":60},[57,793,333],{"style":63},[57,795,796],{"style":71},"tags ",[57,798,339],{"style":63},[57,800,801],{"style":144},"ref",[57,803,804],{"style":67},"([",[57,806,807],{"style":81},"'dog'",[57,809,810],{"style":67},"])",[57,812,813,815,817,820,822,825,827,830,832,834,837,839,841,843,846,848,850,853,855,857,859,862],{"class":59,"style":60},[57,814,333],{"style":63},[57,816,68],{"style":67},[57,818,819],{"style":71},"data",[57,821,270],{"style":63},[57,823,824],{"style":71},"fetchNextPage",[57,826,270],{"style":63},[57,828,829],{"style":71},"hasNextPage ",[57,831,75],{"style":67},[57,833,339],{"style":63},[57,835,836],{"style":144},"useFindPetsByTagsInfinite",[57,838,342],{"style":67},[57,840,354],{"style":67},[57,842,159],{"style":63},[57,844,845],{"style":67},"() ",[57,847,582],{"style":63},[57,849,342],{"style":67},[57,851,852],{"style":67},"tags",[57,854,159],{"style":63},[57,856,852],{"style":71},[57,858,643],{"style":63},[57,860,861],{"style":67},"value ",[57,863,864],{"style":67},"}) })",[866,867,868,875,886],"ul",{},[869,870,871,872,874],"li",{},"Give ",[15,873,273],{}," the type of the query parameter.",[869,876,877,878,881,882,643],{},"The infinite key adds ",[15,879,880],{},"infinite: true",", so it never shares a cache entry with the plain query. See ",[28,883,885],{"href":884},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Fguides\u002Fquery-keys","TanStack Query keys",[869,887,888,889,891],{},"A ref or getter in ",[15,890,354],{}," updates the key, so a change starts again from the first page.",[20,893,895],{"id":894},"read-the-next-page-from-the-response","Read the next page from the response",[11,897,898,899,901],{},"The generated ",[15,900,695],{}," comes from the first of these options you set:",[903,904,905,920],"table",{},[906,907,908],"thead",{},[909,910,911,915],"tr",{},[912,913,914],"th",{},"Option",[912,916,917,918],{},"Generated ",[15,919,695],{},[921,922,923,936,951,964],"tbody",{},[909,924,925,933],{},[926,927,928],"td",{},[28,929,931],{"href":930},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions#infinitegetnextpageparam",[15,932,695],{},[926,934,935],{},"Your function's source, copied as written. It cannot use variables from the config file.",[909,937,938,945],{},[926,939,940],{},[28,941,943],{"href":942},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions#infinitenextparam",[15,944,283],{},[926,946,947,948,643],{},"Reads that path on the last page, such as ",[15,949,950],{},"lastPage?.['pagination']?.['next']?.['cursor']",[909,952,953,961],{},[926,954,955],{},[28,956,958],{"href":957},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions#infinitecursorparam",[15,959,960],{},"cursorParam",[926,962,963],{},"Deprecated. Reads that top-level field.",[909,965,966,969],{},[926,967,968],{},"None",[926,970,971,972,974],{},"Counts pages up from ",[15,973,273],{}," until a page is an empty array.",[11,976,977,270,980,983,984,986,987,993,994,996,997,999,1000,643],{},[15,978,979],{},"getPreviousPageParam",[15,981,982],{},"previousParam",", and ",[15,985,960],{}," set the previous page in the same order. With ",[28,988,990],{"href":989},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions#returntype",[15,991,992],{},"returnType: 'full'",", the ",[15,995,283],{}," and ",[15,998,960],{}," accessors read from ",[15,1001,1002],{},"lastPage.data",[20,1004,1006],{"id":1005},"hasnextpage-never-turns-false","hasNextPage never turns false",[11,1008,1009],{},"Generation prints this warning for the operation:",[47,1011,1014],{"language":1012,"code":1013,"class":52},"text","findPetsByTags: the default infinite page params expect an array response and never end for this one. Set `infinite.getNextPageParam` (or `nextParam`) to read the next page from the response.",[15,1015,1017],{"class":1016},"language-text",[57,1018,1019],{"class":59,"style":60},[57,1020,1013],{"style":71},[11,1022,1023,1024,270,1026,1028,1029,1031,1032,1034,1035,1037,1038,1040],{},"Without ",[15,1025,695],{},[15,1027,283],{},", or ",[15,1030,960],{},", the composable counts pages up from ",[15,1033,273],{}," until a page is an empty array. That works only for array responses, so generation warns for any other response. It skips the warning when ",[15,1036,982],{}," or ",[15,1039,979],{}," is set, though the count still never ends.",[11,1042,1043,1044,1046,1047,1049],{},"To fix it, set ",[15,1045,283],{}," to the cursor path, or ",[15,1048,695],{}," when you must compute the next page.",[11,1051,1052,1053,1058,1059,1062,1063,643],{},"Next, see every ",[28,1054,1055,1057],{"href":30},[15,1056,33],{}," option",", including ",[15,1060,1061],{},"definePageParam"," for a typed ",[15,1064,695],{},{"title":1066,"searchDepth":1067,"depth":1067,"links":1068},"",5,[1069,1071,1072],{"id":22,"depth":1070,"text":23},2,{"id":894,"depth":1070,"text":895},{"id":1005,"depth":1070,"text":1006},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Fguides\u002Finfinite-queries",1794776439198]