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