[{"data":1,"prerenderedAt":977},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Fquery-keys":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":976,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Fquery-keys.md",{},"TanStack Query keys",{"type":8,"value":9,"toc":967},"minimark",[10,14,19,43,398,444,448,454,478,482,500,604,608,622,630,943,959],[11,12,13],"p",{},"See the query key each generated React Query hook uses, invalidate or read the cache with it, and add your own prefix to the default key.",[15,16,18],"h2",{"id":17},"the-default-query-key","The default query key",[11,20,21,22,26,27,30,31,34,35,38,39,42],{},"When you call ",[23,24,25],"code",{},"invalidateQueries",", ",[23,28,29],{},"getQueryData",", or ",[23,32,33],{},"setQueryData",", take the key from the ",[23,36,37],{},"\u003Coperation>QueryKey"," helper in each hook file. It builds ",[23,40,41],{},"[{ url, params }, query, body]",":",[44,45,46,243],"code-group",{},[47,48,53],"pre",{"language":49,"filename":50,"code":51,"class":52},"typescript","Generated","\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseGetPetById.ts\nexport const getPetByIdQueryKey = ({ path }: Omit\u003CGetPetByIdOptions, 'headers'>) => [{ url: '\u002Fpet\u002F:petId', params: path }] as const\n\n\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseFindPetsByTags.ts\nexport const findPetsByTagsQueryKey = ({ query }: Omit\u003CFindPetsByTagsOptions, 'headers'> = {}) =>\n  [{ url: '\u002Fpet\u002FfindByTags' }, ...(query ? [query] : [])] as const","highlights",[23,54,56,65,66,65,149,65,151,65,156,65,196],{"class":55},"language-typescript",[57,58,61],"span",{"class":59,"style":60},"line","display: inline",[57,62,64],{"style":63},"color:#6a737d;--hls-dark:#6a737d","\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseGetPetById.ts","\n",[57,67,68,72,75,79,82,86,89,92,95,99,102,105,107,111,114,117,120,123,126,128,131,133,136,138,140,143,146],{"class":59,"style":60},[57,69,71],{"style":70},"color:#d73a49;--hls-dark:#f97583","export ",[57,73,74],{"style":70},"const ",[57,76,78],{"style":77},"color:#24292e;--hls-dark:#e1e4e8","getPetByIdQueryKey ",[57,80,81],{"style":70},"= ",[57,83,85],{"style":84},"color:#005cc5;--hls-dark:#79b8ff","({ ",[57,87,88],{"style":77},"path ",[57,90,91],{"style":84},"}",[57,93,94],{"style":77},": ",[57,96,98],{"style":97},"color:#6f42c1;--hls-dark:#b392f0","Omit",[57,100,101],{"style":70},"\u003C",[57,103,104],{"style":97},"GetPetByIdOptions",[57,106,26],{"style":70},[57,108,110],{"style":109},"color:#032f62;--hls-dark:#9ecbff","'headers'",[57,112,113],{"style":70},">",[57,115,116],{"style":84},") ",[57,118,119],{"style":70},"=> ",[57,121,122],{"style":84},"[{ ",[57,124,125],{"style":84},"url",[57,127,94],{"style":70},[57,129,130],{"style":109},"'\u002Fpet\u002F:petId'",[57,132,26],{"style":70},[57,134,135],{"style":84},"params",[57,137,94],{"style":70},[57,139,88],{"style":77},[57,141,142],{"style":84},"}] ",[57,144,145],{"style":70},"as ",[57,147,148],{"style":70},"const",[57,150],{"class":59,"style":60},[57,152,153],{"class":59,"style":60},[57,154,155],{"style":63},"\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseFindPetsByTags.ts",[57,157,158,160,162,165,167,169,172,174,176,178,180,183,185,187,190,193],{"class":59,"style":60},[57,159,71],{"style":70},[57,161,74],{"style":70},[57,163,164],{"style":77},"findPetsByTagsQueryKey ",[57,166,81],{"style":70},[57,168,85],{"style":84},[57,170,171],{"style":77},"query ",[57,173,91],{"style":84},[57,175,94],{"style":77},[57,177,98],{"style":97},[57,179,101],{"style":70},[57,181,182],{"style":97},"FindPetsByTagsOptions",[57,184,26],{"style":70},[57,186,110],{"style":109},[57,188,189],{"style":70},"> = ",[57,191,192],{"style":84},"{}) ",[57,194,195],{"style":70},"=>",[57,197,198,201,203,205,207,210,212,214,217,220,222,225,228,231,234,236,239,241],{"class":59,"style":60},[57,199,200],{"style":70},"  ",[57,202,122],{"style":84},[57,204,125],{"style":84},[57,206,94],{"style":70},[57,208,209],{"style":109},"'\u002Fpet\u002FfindByTags' ",[57,211,91],{"style":84},[57,213,26],{"style":70},[57,215,216],{"style":70},"...",[57,218,219],{"style":84},"(",[57,221,171],{"style":77},[57,223,224],{"style":70},"? ",[57,226,227],{"style":84},"[",[57,229,230],{"style":77},"query",[57,232,233],{"style":84},"] ",[57,235,94],{"style":70},[57,237,238],{"style":84},"[])] ",[57,240,145],{"style":70},[57,242,148],{"style":70},[47,244,247],{"language":49,"filename":245,"code":246,"class":52},"Usage","import { getPetByIdQueryKey } from '.\u002Fgen\u002Fhooks\u002FuseGetPetById'\nimport { findPetsByTagsQueryKey } from '.\u002Fgen\u002Fhooks\u002FuseFindPetsByTags'\nimport { queryClient } from '.\u002FqueryClient'\n\ngetPetByIdQueryKey({ path: { petId: 1 } }) \u002F\u002F [{ url: '\u002Fpet\u002F:petId', params: { petId: 1 } }]\nfindPetsByTagsQueryKey({ query: { tags: ['dog'] } }) \u002F\u002F [{ url: '\u002Fpet\u002FfindByTags' }, { tags: ['dog'] }]\n\nconst pet = queryClient.getQueryData(getPetByIdQueryKey({ path: { petId: 1 } }))",[23,248,249,65,268,65,283,65,299,65,301,65,329,65,358,65,360],{"class":55},[57,250,251,254,257,259,262,265],{"class":59,"style":60},[57,252,253],{"style":70},"import ",[57,255,256],{"style":84},"{ ",[57,258,78],{"style":77},[57,260,261],{"style":84},"} ",[57,263,264],{"style":70},"from ",[57,266,267],{"style":109},"'.\u002Fgen\u002Fhooks\u002FuseGetPetById'",[57,269,270,272,274,276,278,280],{"class":59,"style":60},[57,271,253],{"style":70},[57,273,256],{"style":84},[57,275,164],{"style":77},[57,277,261],{"style":84},[57,279,264],{"style":70},[57,281,282],{"style":109},"'.\u002Fgen\u002Fhooks\u002FuseFindPetsByTags'",[57,284,285,287,289,292,294,296],{"class":59,"style":60},[57,286,253],{"style":70},[57,288,256],{"style":84},[57,290,291],{"style":77},"queryClient ",[57,293,261],{"style":84},[57,295,264],{"style":70},[57,297,298],{"style":109},"'.\u002FqueryClient'",[57,300],{"class":59,"style":60},[57,302,303,306,308,311,313,315,318,320,323,326],{"class":59,"style":60},[57,304,305],{"style":97},"getPetByIdQueryKey",[57,307,85],{"style":84},[57,309,310],{"style":84},"path",[57,312,94],{"style":70},[57,314,256],{"style":84},[57,316,317],{"style":84},"petId",[57,319,94],{"style":70},[57,321,322],{"style":84},"1 ",[57,324,325],{"style":84},"} }) ",[57,327,328],{"style":63},"\u002F\u002F [{ url: '\u002Fpet\u002F:petId', params: { petId: 1 } }]",[57,330,331,334,336,338,340,342,345,347,349,352,355],{"class":59,"style":60},[57,332,333],{"style":97},"findPetsByTagsQueryKey",[57,335,85],{"style":84},[57,337,230],{"style":84},[57,339,94],{"style":70},[57,341,256],{"style":84},[57,343,344],{"style":84},"tags",[57,346,94],{"style":70},[57,348,227],{"style":84},[57,350,351],{"style":109},"'dog'",[57,353,354],{"style":84},"] } }) ",[57,356,357],{"style":63},"\u002F\u002F [{ url: '\u002Fpet\u002FfindByTags' }, { tags: ['dog'] }]",[57,359],{"class":59,"style":60},[57,361,362,364,367,369,372,375,377,379,381,383,385,387,389,391,393,395],{"class":59,"style":60},[57,363,74],{"style":70},[57,365,366],{"style":77},"pet ",[57,368,81],{"style":70},[57,370,371],{"style":77},"queryClient",[57,373,374],{"style":70},".",[57,376,29],{"style":97},[57,378,219],{"style":84},[57,380,305],{"style":97},[57,382,85],{"style":84},[57,384,310],{"style":84},[57,386,94],{"style":70},[57,388,256],{"style":84},[57,390,317],{"style":84},[57,392,94],{"style":70},[57,394,322],{"style":84},[57,396,397],{"style":84},"} }))",[399,400,401,413,418,427,430,437],"ul",{},[402,403,404,406,407,410,411,374],"li",{},[23,405,125],{}," is the spec path with ",[23,408,409],{},":name"," placeholders, such as ",[23,412,130],{},[402,414,415,417],{},[23,416,135],{}," holds the path parameters, when the path has any.",[402,419,420,422,423,426],{},[23,421,230],{}," and ",[23,424,425],{},"body"," follow when the operation has them and the call passes them.",[402,428,429],{},"Headers and cookies stay out of the key.",[402,431,432,433,436],{},"Infinite variants add ",[23,434,435],{},"infinite: true"," to the first entry, so they never share a cache entry with the plain query.",[402,438,439,440,443],{},"Each hook returns the key it used as ",[23,441,442],{},"queryKey"," on its result.",[15,445,447],{"id":446},"invalidate-every-call-of-an-operation","Invalidate every call of an operation",[11,449,450,451,453],{},"TanStack Query matches a key by its prefix, and an object entry by the fields you pass. A key built without ",[23,452,230],{}," matches every cached call of that operation with the same path parameters, infinite ones included:",[47,455,457],{"language":49,"code":456,"class":52},"queryClient.invalidateQueries({ queryKey: findPetsByTagsQueryKey() })",[23,458,459],{"class":55},[57,460,461,463,465,467,469,471,473,475],{"class":59,"style":60},[57,462,371],{"style":77},[57,464,374],{"style":70},[57,466,25],{"style":97},[57,468,85],{"style":84},[57,470,442],{"style":84},[57,472,94],{"style":70},[57,474,333],{"style":97},[57,476,477],{"style":84},"() })",[15,479,481],{"id":480},"mutation-keys","Mutation keys",[11,483,484,485,488,489,492,493,496,497,42],{},"Each mutation gets a ",[23,486,487],{},"\u003Coperation>MutationKey"," helper that returns ",[23,490,491],{},"[{ url }]",", for filters such as ",[23,494,495],{},"useIsMutating"," or ",[23,498,499],{},"useMutationState",[44,501,502,543],{},[47,503,505],{"language":49,"filename":50,"code":504,"class":52},"\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseUpdatePet.ts\nexport const updatePetMutationKey = () => [{ url: '\u002Fpet' }] as const",[23,506,507,65,512],{"class":55},[57,508,509],{"class":59,"style":60},[57,510,511],{"style":63},"\u002F\u002F src\u002Fgen\u002Fhooks\u002FuseUpdatePet.ts",[57,513,514,516,518,521,523,526,528,530,532,534,537,539,541],{"class":59,"style":60},[57,515,71],{"style":70},[57,517,74],{"style":70},[57,519,520],{"style":77},"updatePetMutationKey ",[57,522,81],{"style":70},[57,524,525],{"style":84},"() ",[57,527,119],{"style":70},[57,529,122],{"style":84},[57,531,125],{"style":84},[57,533,94],{"style":70},[57,535,536],{"style":109},"'\u002Fpet' ",[57,538,142],{"style":84},[57,540,145],{"style":70},[57,542,148],{"style":70},[47,544,546],{"language":49,"filename":245,"code":545,"class":52},"import { useIsMutating } from '@tanstack\u002Freact-query'\nimport { updatePetMutationKey } from '.\u002Fgen\u002Fhooks\u002FuseUpdatePet'\n\nconst saving = useIsMutating({ mutationKey: updatePetMutationKey() })",[23,547,548,65,564,65,579,65,581],{"class":55},[57,549,550,552,554,557,559,561],{"class":59,"style":60},[57,551,253],{"style":70},[57,553,256],{"style":84},[57,555,556],{"style":77},"useIsMutating ",[57,558,261],{"style":84},[57,560,264],{"style":70},[57,562,563],{"style":109},"'@tanstack\u002Freact-query'",[57,565,566,568,570,572,574,576],{"class":59,"style":60},[57,567,253],{"style":70},[57,569,256],{"style":84},[57,571,520],{"style":77},[57,573,261],{"style":84},[57,575,264],{"style":70},[57,577,578],{"style":109},"'.\u002Fgen\u002Fhooks\u002FuseUpdatePet'",[57,580],{"class":59,"style":60},[57,582,583,585,588,590,592,594,597,599,602],{"class":59,"style":60},[57,584,74],{"style":70},[57,586,587],{"style":77},"saving ",[57,589,81],{"style":70},[57,591,495],{"style":97},[57,593,85],{"style":84},[57,595,596],{"style":84},"mutationKey",[57,598,94],{"style":70},[57,600,601],{"style":97},"updatePetMutationKey",[57,603,477],{"style":84},[15,605,607],{"id":606},"extend-the-default-key","Extend the default key",[11,609,610,611,617,618,621],{},"When you need your own entry, such as an API version, set ",[612,613,615],"a",{"href":614},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#querykey",[23,616,442],{}," and spread ",[23,619,620],{},"queryKeyTransformer",". Do not read single entries of its result: they can change between releases.",[623,624,626,627,374],"blockquote",{"as":625},"warning","Returned strings are copied into the generated code as written. Wrap a string literal in ",[23,628,629],{},"JSON.stringify(...)",[44,631,632,875],{},[47,633,636],{"language":49,"filename":634,"code":635,"class":52},"kubb.config.ts","import { defineConfig } from 'kubb\u002Fconfig'\nimport { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginFetch } from '@kubb\u002Fplugin-fetch'\nimport { pluginReactQuery, queryKeyTransformer } 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      queryKey: (props) => [JSON.stringify('v2'), ...queryKeyTransformer(props)],\n    }),\n  ],\n})",[23,637,638,65,654,65,670,65,686,65,707,65,709,65,722,65,737,65,759,65,770,65,783,65,794,65,802,65,853,65,862,65,871],{"class":55},[57,639,640,642,644,647,649,651],{"class":59,"style":60},[57,641,253],{"style":70},[57,643,256],{"style":84},[57,645,646],{"style":77},"defineConfig ",[57,648,261],{"style":84},[57,650,264],{"style":70},[57,652,653],{"style":109},"'kubb\u002Fconfig'",[57,655,656,658,660,663,665,667],{"class":59,"style":60},[57,657,253],{"style":70},[57,659,256],{"style":84},[57,661,662],{"style":77},"pluginTs ",[57,664,261],{"style":84},[57,666,264],{"style":70},[57,668,669],{"style":109},"'@kubb\u002Fplugin-ts'",[57,671,672,674,676,679,681,683],{"class":59,"style":60},[57,673,253],{"style":70},[57,675,256],{"style":84},[57,677,678],{"style":77},"pluginFetch ",[57,680,261],{"style":84},[57,682,264],{"style":70},[57,684,685],{"style":109},"'@kubb\u002Fplugin-fetch'",[57,687,688,690,692,695,697,700,702,704],{"class":59,"style":60},[57,689,253],{"style":70},[57,691,256],{"style":84},[57,693,694],{"style":77},"pluginReactQuery",[57,696,26],{"style":70},[57,698,699],{"style":77},"queryKeyTransformer ",[57,701,261],{"style":84},[57,703,264],{"style":70},[57,705,706],{"style":109},"'@kubb\u002Fplugin-react-query'",[57,708],{"class":59,"style":60},[57,710,711,713,716,719],{"class":59,"style":60},[57,712,71],{"style":70},[57,714,715],{"style":70},"default ",[57,717,718],{"style":97},"defineConfig",[57,720,721],{"style":84},"({",[57,723,724,726,729,731,734],{"class":59,"style":60},[57,725,200],{"style":84},[57,727,728],{"style":84},"input",[57,730,94],{"style":70},[57,732,733],{"style":109},"'.\u002FpetStore.yaml'",[57,735,736],{"style":70},",",[57,738,739,741,744,746,748,750,752,755,757],{"class":59,"style":60},[57,740,200],{"style":70},[57,742,743],{"style":84},"output",[57,745,94],{"style":70},[57,747,256],{"style":84},[57,749,310],{"style":84},[57,751,94],{"style":70},[57,753,754],{"style":109},"'.\u002Fsrc\u002Fgen' ",[57,756,91],{"style":84},[57,758,736],{"style":70},[57,760,761,763,766,768],{"class":59,"style":60},[57,762,200],{"style":70},[57,764,765],{"style":84},"plugins",[57,767,94],{"style":70},[57,769,227],{"style":84},[57,771,772,775,778,781],{"class":59,"style":60},[57,773,774],{"style":84},"    ",[57,776,777],{"style":97},"pluginTs",[57,779,780],{"style":84},"()",[57,782,736],{"style":70},[57,784,785,787,790,792],{"class":59,"style":60},[57,786,774],{"style":70},[57,788,789],{"style":97},"pluginFetch",[57,791,780],{"style":84},[57,793,736],{"style":70},[57,795,796,798,800],{"class":59,"style":60},[57,797,774],{"style":70},[57,799,694],{"style":97},[57,801,721],{"style":84},[57,803,804,807,809,811,813,816,818,820,822,825,827,830,832,835,838,840,842,844,846,848,851],{"class":59,"style":60},[57,805,806],{"style":84},"      ",[57,808,442],{"style":84},[57,810,94],{"style":70},[57,812,219],{"style":84},[57,814,815],{"style":77},"props",[57,817,116],{"style":84},[57,819,119],{"style":70},[57,821,227],{"style":84},[57,823,824],{"style":84},"JSON",[57,826,374],{"style":70},[57,828,829],{"style":97},"stringify",[57,831,219],{"style":84},[57,833,834],{"style":109},"'v2'",[57,836,837],{"style":84},")",[57,839,26],{"style":70},[57,841,216],{"style":70},[57,843,620],{"style":97},[57,845,219],{"style":84},[57,847,815],{"style":77},[57,849,850],{"style":84},")]",[57,852,736],{"style":70},[57,854,855,857,860],{"class":59,"style":60},[57,856,774],{"style":70},[57,858,859],{"style":84},"})",[57,861,736],{"style":70},[57,863,864,866,869],{"class":59,"style":60},[57,865,200],{"style":70},[57,867,868],{"style":84},"]",[57,870,736],{"style":70},[57,872,873],{"class":59,"style":60},[57,874,859],{"style":84},[47,876,878],{"language":49,"filename":50,"code":877,"class":52},"export const getPetByIdQueryKey = ({ path }: Omit\u003CGetPetByIdOptions, 'headers'>) => [\"v2\", { url: '\u002Fpet\u002F:petId', params: path }] as const",[23,879,880],{"class":55},[57,881,882,884,886,888,890,892,894,896,898,900,902,904,906,908,910,912,914,916,919,921,923,925,927,929,931,933,935,937,939,941],{"class":59,"style":60},[57,883,71],{"style":70},[57,885,74],{"style":70},[57,887,78],{"style":77},[57,889,81],{"style":70},[57,891,85],{"style":84},[57,893,88],{"style":77},[57,895,91],{"style":84},[57,897,94],{"style":77},[57,899,98],{"style":97},[57,901,101],{"style":70},[57,903,104],{"style":97},[57,905,26],{"style":70},[57,907,110],{"style":109},[57,909,113],{"style":70},[57,911,116],{"style":84},[57,913,119],{"style":70},[57,915,227],{"style":84},[57,917,918],{"style":109},"\"v2\"",[57,920,26],{"style":70},[57,922,256],{"style":84},[57,924,125],{"style":84},[57,926,94],{"style":70},[57,928,130],{"style":109},[57,930,26],{"style":70},[57,932,135],{"style":84},[57,934,94],{"style":70},[57,936,88],{"style":77},[57,938,142],{"style":84},[57,940,145],{"style":70},[57,942,148],{"style":70},[11,944,945,946,949,950,955,956,374],{},"The builder also gets the ",[23,947,948],{},"variant",", so it can return a different key for suspense or infinite hooks. ",[612,951,953],{"href":952},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Foptions#mutationkey",[23,954,596],{}," works the same way with ",[23,957,958],{},"mutationKeyTransformer",[11,960,961,962,966],{},"Next, ",[612,963,965],{"href":964},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Finfinite-queries","generate infinite queries"," for paginated endpoints.",{"title":968,"searchDepth":969,"depth":969,"links":970},"",5,[971,973,974,975],{"id":17,"depth":972,"text":18},2,{"id":446,"depth":972,"text":447},{"id":480,"depth":972,"text":481},{"id":606,"depth":972,"text":607},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-react-query\u002Fguides\u002Fquery-keys",1794776438809]