[{"data":1,"prerenderedAt":473},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query":3},{"id":4,"title":5,"body":6,"description":454,"extension":462,"frontmatter":463,"heading":5,"meta":464,"navigation":465,"order":466,"path":467,"seo":468,"sitemap":469,"source":4,"stem":470,"__hash__":471,"hasPopups":472},"extensions\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Findex.md","React Query",{"type":7,"value":8,"toc":453},"minimark",[9,33,36,41,125,146,150,187,191,291,299,303,311],[10,11,12,13,17,18,21,22,25,26,17,29,32],"p",{},"The React Query plugin generates TanStack Query helpers for React from your OpenAPI spec. By default you get ",[14,15,16],"code",{},"queryOptions"," and ",[14,19,20],{},"mutationOptions"," factories with their query and mutation keys. Set ",[14,23,24],{},"hooks: true"," to also get ",[14,27,28],{},"useQuery",[14,30,31],{},"useMutation"," hooks.",[10,34,35],{},"The plugin ships no HTTP client. Each helper calls a function generated by a client plugin.",[37,38,40],"h2",{"id":39},"installation","Installation",[42,43,45,74,91,109],"code-group",{"sync":44},"package-manager",[46,47,52],"pre",{"language":48,"filename":49,"code":50,"class":51},"shell","bun","bun add -d @kubb\u002Fplugin-react-query","shiki shiki-themes github-light github-dark dark:github-dark",[14,53,55],{"class":54},"language-shell",[56,57,60,63,67,71],"span",{"class":58,"style":59},"line","display: inline",[56,61,49],{"style":62},"color:#6F42C1;--shiki-dark:#B392F0",[56,64,66],{"style":65},"color:#032F62;--shiki-dark:#9ECBFF"," add",[56,68,70],{"style":69},"color:#005CC5;--shiki-dark:#79B8FF"," -d",[56,72,73],{"style":65}," @kubb\u002Fplugin-react-query",[46,75,78],{"language":48,"filename":76,"code":77,"class":51},"pnpm","pnpm add -D @kubb\u002Fplugin-react-query",[14,79,80],{"class":54},[56,81,82,84,86,89],{"class":58,"style":59},[56,83,76],{"style":62},[56,85,66],{"style":65},[56,87,88],{"style":69}," -D",[56,90,73],{"style":65},[46,92,95],{"language":48,"filename":93,"code":94,"class":51},"npm","npm install --save-dev @kubb\u002Fplugin-react-query",[14,96,97],{"class":54},[56,98,99,101,104,107],{"class":58,"style":59},[56,100,93],{"style":62},[56,102,103],{"style":65}," install",[56,105,106],{"style":69}," --save-dev",[56,108,73],{"style":65},[46,110,113],{"language":48,"filename":111,"code":112,"class":51},"yarn","yarn add -D @kubb\u002Fplugin-react-query",[14,114,115],{"class":54},[56,116,117,119,121,123],{"class":58,"style":59},[56,118,111],{"style":62},[56,120,66],{"style":65},[56,122,88],{"style":69},[56,124,73],{"style":65},[10,126,127,128,131,132,137,138,141,142,145],{},"Or run ",[14,129,130],{},"kubb add plugin-react-query"," to install the version the ",[133,134,136],"a",{"href":135},"\u002Fregistry","Kubb registry"," pins and add ",[14,139,140],{},"pluginReactQuery()"," to ",[14,143,144],{},"kubb.config.ts",".",[37,147,149],{"id":148},"setup","Setup",[151,152,153,177,184],"ul",{},[154,155,156,157,160,161,164,165,168,169,172,173,176],"li",{},"Add ",[14,158,159],{},"@kubb\u002Fplugin-ts"," and a client plugin: ",[14,162,163],{},"@kubb\u002Fplugin-fetch",", ",[14,166,167],{},"@kubb\u002Fplugin-axios",", or ",[14,170,171],{},"@kubb\u002Fplugin-client",". Leave ",[14,174,175],{},"sdk"," unset on the client plugin.",[154,178,179,180,183],{},"Install ",[14,181,182],{},"@tanstack\u002Freact-query"," 5.82 or a later v5 release in the app that uses the generated code.",[154,185,186],{},"Configure validation on the client plugin, not here.",[37,188,190],{"id":189},"options-worth-knowing","Options worth knowing",[151,192,193,207,217,229,248,278],{},[154,194,195,198,199,202,203,206],{},[14,196,197],{},"client"," picks ",[14,200,201],{},"fetch"," or ",[14,204,205],{},"axios"," when both client plugins are registered. A single client is detected automatically.",[154,208,209,212,213,216],{},[14,210,211],{},"hooks"," adds the ",[14,214,215],{},"use*"," hooks on top of the option factories.",[154,218,219,222,223,226,227,145],{},[14,220,221],{},"suspense: {}"," adds ",[14,224,225],{},"useSuspenseQuery"," hooks. It needs ",[14,228,24],{},[154,230,231,222,234,237,238,240,241,244,245,145],{},[14,232,233],{},"infinite",[14,235,236],{},"useInfiniteQuery"," hooks for pagination. It needs ",[14,239,24],{}," and covers the operations that take the query parameter named in ",[14,242,243],{},"infinite.queryParam",", which defaults to ",[14,246,247],{},"'id'",[154,249,250,17,253,256,257,260,261,164,264,164,267,164,270,273,274,277],{},[14,251,252],{},"query",[14,254,255],{},"mutation"," set which HTTP methods become queries (",[14,258,259],{},"GET",") and mutations (",[14,262,263],{},"POST",[14,265,266],{},"PUT",[14,268,269],{},"PATCH",[14,271,272],{},"DELETE","). They also set where the TanStack Query runtime is imported from. Set either to ",[14,275,276],{},"false"," to skip those helpers.",[154,279,280,283,284,286,287,290],{},[14,281,282],{},"customOptions: { importPath }"," routes every hook through your own function that returns extra options. It needs ",[14,285,24],{},". Kubb creates a starter file at ",[14,288,289],{},"importPath",", resolved from the generated hooks folder, when none exists and the path stays inside the plugin's output folder.",[10,292,293,294,298],{},"See ",[133,295,297],{"href":296},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions","Options"," for every option and its default.",[37,300,302],{"id":301},"example","Example",[10,304,305,306,17,308,310],{},"The config below generates ",[14,307,28],{},[14,309,31],{}," hooks that call the Fetch client.",[46,312,315],{"language":313,"filename":144,"code":314,"class":51},"typescript","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({ hooks: true }),\n  ],\n})",[14,316,318,334,335,334,347,334,359,334,371,334,373,334,387,334,398,334,409,334,414,334,422,334,429,334,443,334,448],{"class":317},"language-typescript",[56,319,320,324,328,331],{"class":58,"style":59},[56,321,323],{"style":322},"color:#D73A49;--shiki-dark:#F97583","import",[56,325,327],{"style":326},"color:#24292E;--shiki-dark:#E1E4E8"," { defineConfig } ",[56,329,330],{"style":322},"from",[56,332,333],{"style":65}," 'kubb\u002Fconfig'","\n",[56,336,337,339,342,344],{"class":58,"style":59},[56,338,323],{"style":322},[56,340,341],{"style":326}," { pluginTs } ",[56,343,330],{"style":322},[56,345,346],{"style":65}," '@kubb\u002Fplugin-ts'",[56,348,349,351,354,356],{"class":58,"style":59},[56,350,323],{"style":322},[56,352,353],{"style":326}," { pluginFetch } ",[56,355,330],{"style":322},[56,357,358],{"style":65}," '@kubb\u002Fplugin-fetch'",[56,360,361,363,366,368],{"class":58,"style":59},[56,362,323],{"style":322},[56,364,365],{"style":326}," { pluginReactQuery } ",[56,367,330],{"style":322},[56,369,370],{"style":65}," '@kubb\u002Fplugin-react-query'",[56,372],{"class":58,"style":59},[56,374,375,378,381,384],{"class":58,"style":59},[56,376,377],{"style":322},"export",[56,379,380],{"style":322}," default",[56,382,383],{"style":62}," defineConfig",[56,385,386],{"style":326},"({",[56,388,389,392,395],{"class":58,"style":59},[56,390,391],{"style":326},"  input: ",[56,393,394],{"style":65},"'.\u002FpetStore.yaml'",[56,396,397],{"style":326},",",[56,399,400,403,406],{"class":58,"style":59},[56,401,402],{"style":326},"  output: { path: ",[56,404,405],{"style":65},"'.\u002Fsrc\u002Fgen'",[56,407,408],{"style":326}," },",[56,410,411],{"class":58,"style":59},[56,412,413],{"style":326},"  plugins: [",[56,415,416,419],{"class":58,"style":59},[56,417,418],{"style":62},"    pluginTs",[56,420,421],{"style":326},"(),",[56,423,424,427],{"class":58,"style":59},[56,425,426],{"style":62},"    pluginFetch",[56,428,421],{"style":326},[56,430,431,434,437,440],{"class":58,"style":59},[56,432,433],{"style":62},"    pluginReactQuery",[56,435,436],{"style":326},"({ hooks: ",[56,438,439],{"style":69},"true",[56,441,442],{"style":326}," }),",[56,444,445],{"class":58,"style":59},[56,446,447],{"style":326},"  ],",[56,449,450],{"class":58,"style":59},[56,451,452],{"style":326},"})",{"title":454,"searchDepth":455,"depth":455,"links":456},"",5,[457,459,460,461],{"id":39,"depth":458,"text":40},2,{"id":148,"depth":458,"text":149},{"id":189,"depth":458,"text":190},{"id":301,"depth":458,"text":302},"md",{},{},true,null,"\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query",{"title":5},{"loc":467},"extensions\u002Fkubb-labs\u002Fplugin-react-query\u002Findex","oCUXPn1AGGki_x9ADB4UF9BeOHGIbO2LQ-iu_q31gGY",false,1792529016210]