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