[{"data":1,"prerenderedAt":984},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Finfinite-queries":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":983,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Finfinite-queries.md",{},"Infinite queries with useInfiniteQuery",{"type":8,"value":9,"toc":975},"minimark",[10,19,24,43,768,802,806,812,885,913,917,920,931,951,960],[11,12,13,14,18],"p",{},"Generate ",[15,16,17],"code",{},"useInfiniteQuery"," hooks 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-hooks","Generate infinite hooks",[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-react-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 hook, and the hook sends each page param as that parameter:",[44,45,46,315,697],"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 { pluginReactQuery } from '@kubb\u002Fplugin-react-query'\n\nexport default defineConfig({\n  input: '.\u002FpetStore.yaml',\n  output: { path: '.\u002Fsrc\u002Fgen' },\n  plugins: [\n    pluginTs(),\n    pluginFetch(),\n    pluginReactQuery({\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},"pluginReactQuery ",[57,126,75],{"style":67},[57,128,78],{"style":63},[57,130,131],{"style":81},"'@kubb\u002Fplugin-react-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},"pluginReactQuery",[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 }: Omit\u003CFindPetsByTagsOptions, 'headers'> = {}) =>\n  [{ url: '\u002Fpet\u002FfindByTags', infinite: true }, ...(query ? [query] : [])] as const\n\nexport function findPetsByTagsInfiniteQueryOptions({ query }: FindPetsByTagsOptions = {}, config = {}) {\n  const queryKey = findPetsByTagsInfiniteQueryKey({ query })\n  return infiniteQueryOptions({\n    queryKey,\n    queryFn: async ({ signal, pageParam }) => {\n      return findPetsByTags({ ...config, query: { ...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,373,83,431,83,433,83,469,83,489,83,501,83,510,83,541,83,617,83,624,83,636,83,687,83,693],{"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,353,356,359,361,364,367,370],{"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":71},[57,351,352],{"style":144},"Omit",[57,354,355],{"style":63},"\u003C",[57,357,358],{"style":144},"FindPetsByTagsOptions",[57,360,270],{"style":63},[57,362,363],{"style":81},"'headers'",[57,365,366],{"style":63},"> = ",[57,368,369],{"style":67},"{}) ",[57,371,372],{"style":63},"=>",[57,374,375,377,380,383,385,388,390,392,394,397,399,401,404,407,409,412,414,417,420,422,425,428],{"class":59,"style":60},[57,376,153],{"style":63},[57,378,379],{"style":67},"[{ ",[57,381,382],{"style":67},"url",[57,384,159],{"style":63},[57,386,387],{"style":81},"'\u002Fpet\u002FfindByTags'",[57,389,270],{"style":63},[57,391,33],{"style":67},[57,393,159],{"style":63},[57,395,396],{"style":67},"true ",[57,398,187],{"style":67},[57,400,270],{"style":63},[57,402,403],{"style":63},"...",[57,405,406],{"style":67},"(",[57,408,345],{"style":71},[57,410,411],{"style":63},"? ",[57,413,201],{"style":67},[57,415,416],{"style":71},"query",[57,418,419],{"style":67},"] ",[57,421,159],{"style":63},[57,423,424],{"style":67},"[])] ",[57,426,427],{"style":63},"as ",[57,429,430],{"style":63},"const",[57,432],{"class":59,"style":60},[57,434,435,437,440,443,445,447,449,451,454,456,459,461,464,466],{"class":59,"style":60},[57,436,138],{"style":63},[57,438,439],{"style":63},"function ",[57,441,442],{"style":144},"findPetsByTagsInfiniteQueryOptions",[57,444,342],{"style":67},[57,446,345],{"style":71},[57,448,187],{"style":67},[57,450,159],{"style":71},[57,452,453],{"style":144},"FindPetsByTagsOptions ",[57,455,339],{"style":63},[57,457,458],{"style":67},"{}",[57,460,270],{"style":63},[57,462,463],{"style":71},"config ",[57,465,339],{"style":63},[57,467,468],{"style":67},"{}) {",[57,470,471,473,475,478,480,483,485,487],{"class":59,"style":60},[57,472,153],{"style":67},[57,474,333],{"style":63},[57,476,477],{"style":71},"queryKey ",[57,479,339],{"style":63},[57,481,482],{"style":144},"findPetsByTagsInfiniteQueryKey",[57,484,342],{"style":67},[57,486,345],{"style":71},[57,488,299],{"style":67},[57,490,491,493,496,499],{"class":59,"style":60},[57,492,153],{"style":67},[57,494,495],{"style":63},"return ",[57,497,498],{"style":144},"infiniteQueryOptions",[57,500,148],{"style":67},[57,502,503,505,508],{"class":59,"style":60},[57,504,206],{"style":67},[57,506,507],{"style":71},"queryKey",[57,509,165],{"style":63},[57,511,512,514,517,519,522,524,527,529,532,535,538],{"class":59,"style":60},[57,513,206],{"style":63},[57,515,516],{"style":67},"queryFn",[57,518,159],{"style":63},[57,520,521],{"style":63},"async ",[57,523,342],{"style":67},[57,525,526],{"style":71},"signal",[57,528,270],{"style":63},[57,530,531],{"style":71},"pageParam ",[57,533,534],{"style":67},"}) ",[57,536,537],{"style":63},"=> ",[57,539,540],{"style":67},"{",[57,542,543,545,547,550,552,554,557,559,561,563,565,567,569,571,574,576,578,580,582,584,586,588,591,594,597,599,601,604,606,608,610,612,615],{"class":59,"style":60},[57,544,239],{"style":67},[57,546,495],{"style":63},[57,548,549],{"style":144},"findPetsByTags",[57,551,342],{"style":67},[57,553,403],{"style":63},[57,555,556],{"style":71},"config",[57,558,270],{"style":63},[57,560,416],{"style":67},[57,562,159],{"style":63},[57,564,68],{"style":67},[57,566,403],{"style":63},[57,568,416],{"style":71},[57,570,270],{"style":63},[57,572,573],{"style":67},"page",[57,575,159],{"style":63},[57,577,531],{"style":71},[57,579,187],{"style":67},[57,581,270],{"style":63},[57,583,526],{"style":67},[57,585,159],{"style":63},[57,587,556],{"style":71},[57,589,590],{"style":63},".",[57,592,593],{"style":67},"signal ",[57,595,596],{"style":63},"?? ",[57,598,526],{"style":71},[57,600,270],{"style":63},[57,602,603],{"style":67},"throwOnError",[57,605,159],{"style":63},[57,607,396],{"style":67},[57,609,299],{"style":67},[57,611,590],{"style":63},[57,613,614],{"style":144},"unwrap",[57,616,212],{"style":67},[57,618,619,622],{"class":59,"style":60},[57,620,621],{"style":67},"    }",[57,623,165],{"style":63},[57,625,626,628,630,632,634],{"class":59,"style":60},[57,627,206],{"style":63},[57,629,273],{"style":67},[57,631,159],{"style":63},[57,633,278],{"style":67},[57,635,165],{"style":63},[57,637,638,640,643,645,647,650,653,655,657,660,662,665,667,669,671,674,676,678,680,683,685],{"class":59,"style":60},[57,639,206],{"style":63},[57,641,642],{"style":67},"getNextPageParam",[57,644,159],{"style":63},[57,646,406],{"style":67},[57,648,649],{"style":71},"lastPage",[57,651,652],{"style":67},") ",[57,654,537],{"style":63},[57,656,649],{"style":71},[57,658,659],{"style":63},"?.",[57,661,201],{"style":67},[57,663,664],{"style":81},"'pagination'",[57,666,308],{"style":67},[57,668,659],{"style":63},[57,670,201],{"style":67},[57,672,673],{"style":81},"'next'",[57,675,308],{"style":67},[57,677,659],{"style":63},[57,679,201],{"style":67},[57,681,682],{"style":81},"'cursor'",[57,684,308],{"style":67},[57,686,165],{"style":63},[57,688,689,691],{"class":59,"style":60},[57,690,153],{"style":63},[57,692,299],{"style":67},[57,694,695],{"class":59,"style":60},[57,696,187],{"style":67},[47,698,701],{"language":49,"filename":699,"code":700,"class":52},"Usage","import { useFindPetsByTagsInfinite } from '.\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite'\n\nconst { data, fetchNextPage, hasNextPage } = useFindPetsByTagsInfinite({ query: { tags: ['dog'] } })",[15,702,703,83,719,83,721],{"class":55},[57,704,705,707,709,712,714,716],{"class":59,"style":60},[57,706,64],{"style":63},[57,708,68],{"style":67},[57,710,711],{"style":71},"useFindPetsByTagsInfinite ",[57,713,75],{"style":67},[57,715,78],{"style":63},[57,717,718],{"style":81},"'.\u002Fgen\u002Fhooks\u002FuseFindPetsByTagsInfinite'",[57,720],{"class":59,"style":60},[57,722,723,725,727,730,732,735,737,740,742,744,747,749,751,753,755,758,760,762,765],{"class":59,"style":60},[57,724,333],{"style":63},[57,726,68],{"style":67},[57,728,729],{"style":71},"data",[57,731,270],{"style":63},[57,733,734],{"style":71},"fetchNextPage",[57,736,270],{"style":63},[57,738,739],{"style":71},"hasNextPage ",[57,741,75],{"style":67},[57,743,339],{"style":63},[57,745,746],{"style":144},"useFindPetsByTagsInfinite",[57,748,342],{"style":67},[57,750,416],{"style":67},[57,752,159],{"style":63},[57,754,68],{"style":67},[57,756,757],{"style":67},"tags",[57,759,159],{"style":63},[57,761,201],{"style":67},[57,763,764],{"style":81},"'dog'",[57,766,767],{"style":67},"] } })",[769,770,771,778,789],"ul",{},[772,773,774,775,777],"li",{},"Give ",[15,776,273],{}," the type of the query parameter.",[772,779,780,781,784,785,590],{},"The infinite key adds ",[15,782,783],{},"infinite: true",", so it never shares a cache entry with the plain query. See ",[28,786,788],{"href":787},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Fquery-keys","TanStack Query keys",[772,790,791,792,798,799,590],{},"Set ",[28,793,795],{"href":794},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#suspense",[15,796,797],{},"suspense: {}"," as well to get ",[15,800,801],{},"useFindPetsByTagsSuspenseInfinite",[20,803,805],{"id":804},"read-the-next-page-from-the-response","Read the next page from the response",[11,807,808,809,811],{},"The generated ",[15,810,642],{}," comes from the first of these options you set:",[813,814,815,830],"table",{},[816,817,818],"thead",{},[819,820,821,825],"tr",{},[822,823,824],"th",{},"Option",[822,826,827,828],{},"Generated ",[15,829,642],{},[831,832,833,846,861,874],"tbody",{},[819,834,835,843],{},[836,837,838],"td",{},[28,839,841],{"href":840},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#infinitegetnextpageparam",[15,842,642],{},[836,844,845],{},"Your function's source, copied as written. It cannot use variables from the config file.",[819,847,848,855],{},[836,849,850],{},[28,851,853],{"href":852},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#infinitenextparam",[15,854,283],{},[836,856,857,858,590],{},"Reads that path on the last page, such as ",[15,859,860],{},"lastPage?.['pagination']?.['next']?.['cursor']",[819,862,863,871],{},[836,864,865],{},[28,866,868],{"href":867},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#infinitecursorparam",[15,869,870],{},"cursorParam",[836,872,873],{},"Deprecated. Reads that top-level field.",[819,875,876,879],{},[836,877,878],{},"None",[836,880,881,882,884],{},"Counts pages up from ",[15,883,273],{}," until a page is an empty array.",[11,886,887,270,890,893,894,896,897,903,904,906,907,909,910,590],{},[15,888,889],{},"getPreviousPageParam",[15,891,892],{},"previousParam",", and ",[15,895,870],{}," set the previous page in the same order. With ",[28,898,900],{"href":899},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#returntype",[15,901,902],{},"returnType: 'full'",", the ",[15,905,283],{}," and ",[15,908,870],{}," accessors read from ",[15,911,912],{},"lastPage.data",[20,914,916],{"id":915},"hasnextpage-never-turns-false","hasNextPage never turns false",[11,918,919],{},"Generation prints this warning for the operation:",[47,921,924],{"language":922,"code":923,"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,925,927],{"class":926},"language-text",[57,928,929],{"class":59,"style":60},[57,930,923],{"style":71},[11,932,933,934,270,936,938,939,941,942,944,945,947,948,950],{},"Without ",[15,935,642],{},[15,937,283],{},", or ",[15,940,870],{},", the hook counts pages up from ",[15,943,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,946,892],{}," or ",[15,949,889],{}," is set, though the count still never ends.",[11,952,953,954,956,957,959],{},"To fix it, set ",[15,955,283],{}," to the cursor path, or ",[15,958,642],{}," when you must compute the next page.",[11,961,962,963,968,969,972,973,590],{},"Next, see every ",[28,964,965,967],{"href":30},[15,966,33],{}," option",", including ",[15,970,971],{},"definePageParam"," for a typed ",[15,974,642],{},{"title":976,"searchDepth":977,"depth":977,"links":978},"",5,[979,981,982],{"id":22,"depth":980,"text":23},2,{"id":804,"depth":980,"text":805},{"id":915,"depth":980,"text":916},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Finfinite-queries",1794776438624]