[{"data":1,"prerenderedAt":786},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-swr\u002Fguides\u002Fcalling-operations":3},{"id":4,"frontmatter":5,"title":6,"heading":6,"body":7,"path":785,"source":4},"extensions\u002Fkubb-labs\u002Fplugin-swr\u002Fguides\u002Fcalling-operations.md",{},"Call operations",{"type":8,"value":9,"toc":775},"minimark",[10,61,66,79,167,203,320,331,335,341,486,493,497,522,525,542,664,667,686,769],[11,12,13,17,18,21,22,25,26,29,30,33,34,33,37,29,40,21,43,25,46,49,50,33,53,56,57,60],"p",{},[14,15,16],"code",{},"@kubb\u002Fplugin-swr"," generates a typed SWR hook for each operation. ",[14,19,20],{},"GET"," operations get ",[14,23,24],{},"useSWR"," hooks such as ",[14,27,28],{},"useGetPetById",", and ",[14,31,32],{},"POST",", ",[14,35,36],{},"PUT",[14,38,39],{},"PATCH",[14,41,42],{},"DELETE",[14,44,45],{},"useSWRMutation",[14,47,48],{},"useCreatePet",". Each hook calls the client function from ",[14,51,52],{},"@kubb\u002Fplugin-fetch",[14,54,55],{},"@kubb\u002Fplugin-axios",", or ",[14,58,59],{},"@kubb\u002Fplugin-client",".",[62,63,65],"h2",{"id":64},"queries","Queries",[11,67,68,69,33,72,33,75,78],{},"A query hook takes the operation's grouped request config (",[14,70,71],{},"path",[14,73,74],{},"query",[14,76,77],{},"headers",", whichever the operation declares) as its first argument:",[80,81,85],"pre",{"language":82,"code":83,"class":84},"typescript","import { useGetPetById } from '.\u002Fgen\u002Fhooks\u002FuseGetPetById'\n\nconst { data, error, isLoading } = useGetPetById({ path: { petId: 1n } })","highlights",[14,86,88,115,116,115,118],{"class":87},"language-typescript",[89,90,93,97,101,105,108,111],"span",{"class":91,"style":92},"line","display: inline",[89,94,96],{"style":95},"color:#d73a49;--hls-dark:#f97583","import ",[89,98,100],{"style":99},"color:#005cc5;--hls-dark:#79b8ff","{ ",[89,102,104],{"style":103},"color:#24292e;--hls-dark:#e1e4e8","useGetPetById ",[89,106,107],{"style":99},"} ",[89,109,110],{"style":95},"from ",[89,112,114],{"style":113},"color:#032f62;--hls-dark:#9ecbff","'.\u002Fgen\u002Fhooks\u002FuseGetPetById'","\n",[89,117],{"class":91,"style":92},[89,119,120,123,125,128,130,133,135,138,140,143,146,149,151,154,156,159,161,164],{"class":91,"style":92},[89,121,122],{"style":95},"const ",[89,124,100],{"style":99},[89,126,127],{"style":103},"data",[89,129,33],{"style":95},[89,131,132],{"style":103},"error",[89,134,33],{"style":95},[89,136,137],{"style":103},"isLoading ",[89,139,107],{"style":99},[89,141,142],{"style":95},"= ",[89,144,28],{"style":145},"color:#6f42c1;--hls-dark:#b392f0",[89,147,148],{"style":99},"({ ",[89,150,71],{"style":99},[89,152,153],{"style":95},": ",[89,155,100],{"style":99},[89,157,158],{"style":99},"petId",[89,160,153],{"style":95},[89,162,163],{"style":99},"1n ",[89,165,166],{"style":99},"} })",[11,168,169,170,172,173,176,177,180,181,184,185,188,189,192,193,188,198,202],{},"The second argument takes ",[14,171,74],{}," (any ",[14,174,175],{},"SWRConfiguration","), ",[14,178,179],{},"client"," (request config for this call, such as ",[14,182,183],{},"baseURL","), and the Kubb options ",[14,186,187],{},"shouldFetch"," and ",[14,190,191],{},"immutable",", covered in ",[194,195,197],"a",{"href":196},"#skip-requests-until-ready","Skip requests until ready",[194,199,201],{"href":200},"#fetch-immutable-data","Fetch immutable data",":",[80,204,206],{"language":82,"code":205,"class":84},"import { useGetPetById } from '.\u002Fgen\u002Fhooks\u002FuseGetPetById'\n\nuseGetPetById(\n  { path: { petId: 1n } },\n  {\n    query: { refreshInterval: 30_000 },\n    client: { baseURL: 'https:\u002F\u002Fapi.example.com\u002Fv1' },\n  },\n)",[14,207,208,115,222,115,224,115,231,115,254,115,262,115,286,115,307,115,315],{"class":87},[89,209,210,212,214,216,218,220],{"class":91,"style":92},[89,211,96],{"style":95},[89,213,100],{"style":99},[89,215,104],{"style":103},[89,217,107],{"style":99},[89,219,110],{"style":95},[89,221,114],{"style":113},[89,223],{"class":91,"style":92},[89,225,226,228],{"class":91,"style":92},[89,227,28],{"style":145},[89,229,230],{"style":99},"(",[89,232,233,236,238,240,242,244,246,248,251],{"class":91,"style":92},[89,234,235],{"style":99},"  { ",[89,237,71],{"style":99},[89,239,153],{"style":95},[89,241,100],{"style":99},[89,243,158],{"style":99},[89,245,153],{"style":95},[89,247,163],{"style":99},[89,249,250],{"style":99},"} }",[89,252,253],{"style":95},",",[89,255,256,259],{"class":91,"style":92},[89,257,258],{"style":95},"  ",[89,260,261],{"style":99},"{",[89,263,264,267,269,271,273,276,278,281,284],{"class":91,"style":92},[89,265,266],{"style":99},"    ",[89,268,74],{"style":99},[89,270,153],{"style":95},[89,272,100],{"style":99},[89,274,275],{"style":99},"refreshInterval",[89,277,153],{"style":95},[89,279,280],{"style":99},"30_000 ",[89,282,283],{"style":99},"}",[89,285,253],{"style":95},[89,287,288,290,292,294,296,298,300,303,305],{"class":91,"style":92},[89,289,266],{"style":95},[89,291,179],{"style":99},[89,293,153],{"style":95},[89,295,100],{"style":99},[89,297,183],{"style":99},[89,299,153],{"style":95},[89,301,302],{"style":113},"'https:\u002F\u002Fapi.example.com\u002Fv1' ",[89,304,283],{"style":99},[89,306,253],{"style":95},[89,308,309,311,313],{"class":91,"style":92},[89,310,258],{"style":95},[89,312,283],{"style":99},[89,314,253],{"style":95},[89,316,317],{"class":91,"style":92},[89,318,319],{"style":99},")",[11,321,322,323,326,327,330],{},"The exported ",[14,324,325],{},"queryKey"," helper includes the operation URL and request parameters. Pass it to SWR's ",[14,328,329],{},"mutate"," to update or revalidate that entry.",[62,332,334],{"id":333},"mutations","Mutations",[11,336,337,338,202],{},"A mutation hook takes only an options object. Pass the grouped request config to ",[14,339,340],{},"trigger(...)",[80,342,344],{"language":82,"code":343,"class":84},"import { mutate } from 'swr'\nimport { useCreatePet } from '.\u002Fgen\u002Fhooks\u002FuseCreatePet'\nimport { getPetsQueryKey } from '.\u002Fgen\u002Fhooks\u002FuseGetPets'\n\nconst { trigger, isMutating } = useCreatePet({\n  mutation: { onSuccess: () => mutate(getPetsQueryKey()) },\n})\n\nawait trigger({ body: { name: 'Fluffy' } })",[14,345,346,115,362,115,378,115,394,115,396,115,419,115,453,115,458,115,460],{"class":87},[89,347,348,350,352,355,357,359],{"class":91,"style":92},[89,349,96],{"style":95},[89,351,100],{"style":99},[89,353,354],{"style":103},"mutate ",[89,356,107],{"style":99},[89,358,110],{"style":95},[89,360,361],{"style":113},"'swr'",[89,363,364,366,368,371,373,375],{"class":91,"style":92},[89,365,96],{"style":95},[89,367,100],{"style":99},[89,369,370],{"style":103},"useCreatePet ",[89,372,107],{"style":99},[89,374,110],{"style":95},[89,376,377],{"style":113},"'.\u002Fgen\u002Fhooks\u002FuseCreatePet'",[89,379,380,382,384,387,389,391],{"class":91,"style":92},[89,381,96],{"style":95},[89,383,100],{"style":99},[89,385,386],{"style":103},"getPetsQueryKey ",[89,388,107],{"style":99},[89,390,110],{"style":95},[89,392,393],{"style":113},"'.\u002Fgen\u002Fhooks\u002FuseGetPets'",[89,395],{"class":91,"style":92},[89,397,398,400,402,405,407,410,412,414,416],{"class":91,"style":92},[89,399,122],{"style":95},[89,401,100],{"style":99},[89,403,404],{"style":103},"trigger",[89,406,33],{"style":95},[89,408,409],{"style":103},"isMutating ",[89,411,107],{"style":99},[89,413,142],{"style":95},[89,415,48],{"style":145},[89,417,418],{"style":99},"({",[89,420,421,423,426,428,430,433,435,438,441,443,445,448,451],{"class":91,"style":92},[89,422,258],{"style":99},[89,424,425],{"style":99},"mutation",[89,427,153],{"style":95},[89,429,100],{"style":99},[89,431,432],{"style":99},"onSuccess",[89,434,153],{"style":95},[89,436,437],{"style":99},"() ",[89,439,440],{"style":95},"=> ",[89,442,329],{"style":145},[89,444,230],{"style":99},[89,446,447],{"style":145},"getPetsQueryKey",[89,449,450],{"style":99},"()) }",[89,452,253],{"style":95},[89,454,455],{"class":91,"style":92},[89,456,457],{"style":99},"})",[89,459],{"class":91,"style":92},[89,461,462,465,467,469,472,474,476,479,481,484],{"class":91,"style":92},[89,463,464],{"style":95},"await ",[89,466,404],{"style":145},[89,468,148],{"style":99},[89,470,471],{"style":99},"body",[89,473,153],{"style":95},[89,475,100],{"style":99},[89,477,478],{"style":99},"name",[89,480,153],{"style":95},[89,482,483],{"style":113},"'Fluffy' ",[89,485,166],{"style":99},[11,487,488,489,492],{},"A ",[14,490,491],{},"mutationKey"," helper is exported next to the hook.",[62,494,496],{"id":495},"errors-and-transport","Errors and transport",[11,498,499,500,503,504,506,507,511,512,516,517,521],{},"Each generated hook calls the client function with ",[14,501,502],{},"throwOnError: true",". A failed request sets SWR's ",[14,505,132],{},", typed from the error responses in the spec. Set the base URL, authentication, interceptors, serialization, and validation on the client plugin. See the ",[194,508,510],{"href":509},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-fetch","plugin-fetch"," or ",[194,513,515],{"href":514},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-axios","plugin-axios"," guide. With ",[194,518,520],{"href":519},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-client","plugin-client",", set these in your own client module.",[62,523,197],{"id":524},"skip-requests-until-ready",[11,526,527,528,531,532,535,536,538,539,541],{},"Set ",[14,529,530],{},"shouldFetch: false"," to give SWR a ",[14,533,534],{},"null"," key and skip the request. Enable it once the required parameters are available. Mutation hooks accept the same switch, and a ",[14,537,534],{}," key stops ",[14,540,404],{}," from firing.",[80,543,546],{"language":82,"filename":544,"code":545,"class":84},"usage.ts","import { useGetPetById } from '.\u002Fgen\u002Fhooks\u002FuseGetPetById'\n\nexport function useSelectedPet(petId: bigint | undefined) {\n  return useGetPetById(\n    { path: { petId: petId ?? 0n } },\n    { shouldFetch: petId != null },\n  )\n}",[14,547,548,115,562,115,564,115,593,115,604,115,632,115,654,115,660],{"class":87},[89,549,550,552,554,556,558,560],{"class":91,"style":92},[89,551,96],{"style":95},[89,553,100],{"style":99},[89,555,104],{"style":103},[89,557,107],{"style":99},[89,559,110],{"style":95},[89,561,114],{"style":113},[89,563],{"class":91,"style":92},[89,565,566,569,572,575,577,579,581,584,587,590],{"class":91,"style":92},[89,567,568],{"style":95},"export ",[89,570,571],{"style":95},"function ",[89,573,574],{"style":145},"useSelectedPet",[89,576,230],{"style":99},[89,578,158],{"style":103},[89,580,153],{"style":95},[89,582,583],{"style":103},"bigint ",[89,585,586],{"style":95},"| ",[89,588,589],{"style":99},"undefined",[89,591,592],{"style":99},") {",[89,594,595,597,600,602],{"class":91,"style":92},[89,596,258],{"style":99},[89,598,599],{"style":95},"return ",[89,601,28],{"style":145},[89,603,230],{"style":99},[89,605,606,609,611,613,615,617,619,622,625,628,630],{"class":91,"style":92},[89,607,608],{"style":99},"    { ",[89,610,71],{"style":99},[89,612,153],{"style":95},[89,614,100],{"style":99},[89,616,158],{"style":99},[89,618,153],{"style":95},[89,620,621],{"style":103},"petId ",[89,623,624],{"style":95},"?? ",[89,626,627],{"style":99},"0n ",[89,629,250],{"style":99},[89,631,253],{"style":95},[89,633,634,636,638,640,642,644,647,650,652],{"class":91,"style":92},[89,635,266],{"style":95},[89,637,100],{"style":99},[89,639,187],{"style":99},[89,641,153],{"style":95},[89,643,621],{"style":103},[89,645,646],{"style":95},"!= ",[89,648,649],{"style":99},"null ",[89,651,283],{"style":99},[89,653,253],{"style":95},[89,655,656,658],{"class":91,"style":92},[89,657,258],{"style":95},[89,659,319],{"style":99},[89,661,662],{"class":91,"style":92},[89,663,283],{"style":99},[62,665,201],{"id":666},"fetch-immutable-data",[11,668,527,669,672,673,33,676,29,679,682,683,60],{},[14,670,671],{},"immutable: true"," on a query hook for data that stays unchanged. It sets ",[14,674,675],{},"revalidateIfStale",[14,677,678],{},"revalidateOnFocus",[14,680,681],{},"revalidateOnReconnect"," to ",[14,684,685],{},"false",[80,687,689],{"language":82,"filename":544,"code":688,"class":84},"import { useGetPetById } from '.\u002Fgen\u002Fhooks\u002FuseGetPetById'\n\nconst { data, error } = useGetPetById(\n  { path: { petId: 1n } },\n  { immutable: true },\n)",[14,690,691,115,705,115,707,115,728,115,748,115,765],{"class":87},[89,692,693,695,697,699,701,703],{"class":91,"style":92},[89,694,96],{"style":95},[89,696,100],{"style":99},[89,698,104],{"style":103},[89,700,107],{"style":99},[89,702,110],{"style":95},[89,704,114],{"style":113},[89,706],{"class":91,"style":92},[89,708,709,711,713,715,717,720,722,724,726],{"class":91,"style":92},[89,710,122],{"style":95},[89,712,100],{"style":99},[89,714,127],{"style":103},[89,716,33],{"style":95},[89,718,719],{"style":103},"error ",[89,721,107],{"style":99},[89,723,142],{"style":95},[89,725,28],{"style":145},[89,727,230],{"style":99},[89,729,730,732,734,736,738,740,742,744,746],{"class":91,"style":92},[89,731,235],{"style":99},[89,733,71],{"style":99},[89,735,153],{"style":95},[89,737,100],{"style":99},[89,739,158],{"style":99},[89,741,153],{"style":95},[89,743,163],{"style":99},[89,745,250],{"style":99},[89,747,253],{"style":95},[89,749,750,752,754,756,758,761,763],{"class":91,"style":92},[89,751,258],{"style":95},[89,753,100],{"style":99},[89,755,191],{"style":99},[89,757,153],{"style":95},[89,759,760],{"style":99},"true ",[89,762,283],{"style":99},[89,764,253],{"style":95},[89,766,767],{"class":91,"style":92},[89,768,319],{"style":99},[11,770,771,772,774],{},"Options in ",[14,773,74],{}," override these revalidation defaults.",{"title":776,"searchDepth":777,"depth":777,"links":778},"",5,[779,781,782,783,784],{"id":64,"depth":780,"text":65},2,{"id":333,"depth":780,"text":334},{"id":495,"depth":780,"text":496},{"id":524,"depth":780,"text":197},{"id":666,"depth":780,"text":201},"\u002Fextensions\u002Fkubb-labs\u002Fplugin-swr\u002Fguides\u002Fcalling-operations",1793639048432]