var Component=(()=>{var i=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var l=a=>o(a,"__esModule",{value:!0});var k=(a,s)=>()=>(s||a((s={exports:{}}).exports,s),s.exports),N=(a,s)=>{l(a);for(var c in s)o(a,c,{get:s[c],enumerable:!0})},u=(a,s,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of d(s))!h.call(a,n)&&n!=="default"&&o(a,n,{get:()=>s[n],enumerable:!(c=p(s,n))||c.enumerable});return a},y=a=>u(l(o(a!=null?i(m(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var r=k((x,t)=>{t.exports=_jsx_runtime});var b={};N(b,{default:()=>f,frontmatter:()=>g});var e=y(r()),g={title:"Improving API Documentation using React Query and TypeScript",publishedOn:new Date(16331328e5),banner:"https://arnavgosain.com/static/queryhook-og.png"};function w(a={}){let{wrapper:s}=a.components||{};return s?(0,e.jsx)(s,Object.assign({},a,{children:(0,e.jsx)(c,{})})):c();function c(){let n=Object.assign({p:"p",a:"a",h2:"h2",span:"span",ol:"ol",li:"li",strong:"strong",code:"code",div:"div",pre:"pre",img:"img"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:"As your codebase grows, there is only one way to increase developer productivity: Documentation. One of many reasons I prefer TypeScript to JavaScript is that overtime, as your codebase grows, developer productivity increases because TypeScript (and typed languages in general) offer something that dynamically typed languages cannot, automatic documentation in your IDE."}),` `,(0,e.jsxs)(n.p,{children:["This article assumes you're familiar with React Query. If you're not, I highly recommend you read the ",(0,e.jsx)(n.a,{href:"https://react-query.tanstack.com/docs",target:"_blank",rel:"nofollow noopener noreferrer",children:"official docs"})," and ",(0,e.jsx)(n.a,{href:"https://www.kranthicodes.com/getting-started-with-react-query/",target:"_blank",rel:"nofollow noopener noreferrer",children:"this intro guide"})," by ",(0,e.jsx)(n.a,{href:"https://www.kranthicodes.com",target:"_blank",rel:"nofollow noopener noreferrer",children:"Sai Kranthi"}),"."]}),` `,(0,e.jsxs)(n.h2,{id:"why-react-query",children:[(0,e.jsx)(n.a,{behavior:"wrap",className:"anchor",href:"#why-react-query",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Why React Query"]}),` `,(0,e.jsx)(n.p,{children:"Imagine an simple app that does two things based on the PokeAPI:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Renders a list of Pokemons that link to their own dedicated page"}),` `,(0,e.jsx)(n.li,{children:"Have dedicated pages for all pokemons"}),` `]}),` `,(0,e.jsxs)(n.p,{children:["To fetch the list of pokemons, with ",(0,e.jsx)(n.strong,{children:"Redux"})," you would have to:"]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Create a global store"}),` `,(0,e.jsx)(n.li,{children:"Create a reducer with an action to update the list in the store"}),` `,(0,e.jsx)(n.li,{children:"Write a thunk action to fetch the data."}),` `,(0,e.jsxs)(n.li,{children:["Write a useEffect hook ",(0,e.jsx)(n.strong,{children:"inside"})," to dispatch the thunk action."]}),` `,(0,e.jsx)(n.li,{children:"Render the list."}),` `]}),` `,(0,e.jsx)(n.p,{children:"And then you'd have to write invalidation logic, loading status logic and much more."}),` `,(0,e.jsxs)(n.p,{children:["But with React Query, fetching your list of pokemons is as easy as wrapping your ",(0,e.jsx)(n.code,{children:"App"})," in a ",(0,e.jsx)(n.code,{children:"QueryClientProvider"})," and then making use of the ",(0,e.jsx)(n.code,{children:"useQuery"})," and ",(0,e.jsx)(n.code,{children:"useMutation"})," hooks."]}),` `,(0,e.jsx)(n.p,{children:"Example of basic React Query usage:"}),` `,(0,e.jsx)("iframe",{src:"https://codesandbox.io/embed/runtime-thunder-uy81c?fontsize=14&hidenavigation=1&theme=dark",style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:"hidden"},title:"queryhook-vanilla-demo",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(n.p,{children:"This approach works for simple apps like a Pokemon List, but it quickly becomes unmanageable as you add more endpoints to your API. In which case, you would have to create many such custom hooks."}),` `,(0,e.jsxs)(n.p,{children:["This is the problem I ran into as I hopped on my first project after joining ",(0,e.jsx)(n.a,{href:"https://tartanhq.com",target:"_blank",rel:"nofollow noopener noreferrer",children:"TartanHQ"}),". While it's a fairly simple CRUD app, it makes use of many endpoints and making custom hooks for each endpoint simply isn't an option."]}),` `,(0,e.jsxs)(n.h2,{id:"one-hook-for-all-queries",children:[(0,e.jsx)(n.a,{behavior:"wrap",className:"anchor",href:"#one-hook-for-all-queries",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"One Hook For All Queries"]}),` `,(0,e.jsxs)(n.p,{children:["To counteract this problem, we created a layer of abstraction over React Query's ",(0,e.jsx)(n.code,{children:"useQuery"})," hook, a hook that makes use of TypeScript to improve discoverability of endpoints across the entire application."]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"src/hooks/useQuery.ts"}),(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token operator",children:"*"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" useQuery ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," useReactQuery",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryOptions"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryResult"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react-query"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"QueryKeys"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"~/lib/api/queries"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:["Await",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token constant",children:"T"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:[(0,e.jsx)(n.span,{className:"token builtin",children:"Promise"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"infer"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"U"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"U"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Key ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," QueryKeys",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Params ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Parameters",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Await",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ReturnType",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">>"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsx)(n.span,{className:"token generic class-name",children:(0,e.jsx)(n.span,{className:"token operator",children:">"})})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"key",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Key"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," options",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryOptions"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryResult"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Key ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," QueryKeys",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Params ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Parameters",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Await",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ReturnType",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">>"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsx)(n.span,{className:"token generic class-name",children:(0,e.jsx)(n.span,{className:"token operator",children:">"})})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" key",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Key"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Params"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" options",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryOptions"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryResult"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Key ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," QueryKeys",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Params ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Parameters",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" Data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Await",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ReturnType",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"Key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:">>"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsx)(n.span,{className:"token generic class-name",children:(0,e.jsx)(n.span,{className:"token operator",children:">"})})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" key",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Key"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" arg2",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Params"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryOptions"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" arg3",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryOptions"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"unknown"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Data"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," params ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"isArray"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"arg2",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," arg2 ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," options ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token operator",children:"!"}),(0,e.jsx)(n.span,{className:"token operator",children:"!"}),"arg3 ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"isArray"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"arg2",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," arg3 ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," arg2",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token function",children:"useReactQuery"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" key",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," queryFetchers",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"key",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"apply"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` options `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"src/lib/api/queries.ts"}),(0,e.jsx)(n.pre,{className:"language-ts",children:(0,e.jsxs)(n.code,{className:"language-ts code-highlight",children:[(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token comment",children:`/** `})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token comment",children:` * Legend: `})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token comment",children:` * `})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token comment",children:` * QKEY = Query Key `})}),(0,e.jsx)(n.span,{className:"code-line",children:(0,e.jsx)(n.span,{className:"token comment",children:` * QData = Query Data `})}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token comment",children:" */"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"GET_ALL_POKEMONS_QKEY"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"pokemons/all"'})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"GetAllPokemonsQData"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" count",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" next",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" previous",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" results",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," name",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"})," url",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," getAllPokemons ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"Promise"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"GetAllPokemonsQData",(0,e.jsx)(n.span,{className:"token operator",children:">"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"https://pokeapi.co/api/v2/pokemon?limit=151"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"then"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"json"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"}),` GetAllPokemonsQData `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"POKEMON_BY_ID_QKEY"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:'"pokemons/byId"'})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"GetPokemonByIdQData"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," Record",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"unknown"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"getPokemonById"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"https://pokeapi.co/api/v2/pokemon/"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"id",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"/"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"then"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"json"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"}),` GetPokemonByIdQData `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"QueryKeys"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"GET_ALL_POKEMONS_KEY"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"POKEMON_BY_ID_QKEY"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," queryFetchers ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token constant",children:"GET_ALL_POKEMONS_QKEY"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," getAllPokemons",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token constant",children:"POKEMON_BY_ID_QKEY"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," getPokemonById",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"example",children:[(0,e.jsx)(n.a,{behavior:"wrap",className:"anchor",href:"#example",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Example:"]}),` `,(0,e.jsx)(n.p,{children:"Now that you're all done, you can take full advantage of VSCode autocomplete."}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.img,{src:"/static/queryhook-autocomplete.png",alt:""})}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("iframe",{src:"https://codesandbox.io/embed/queryhook-demo-9mjy3?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fpages%2FIndexPage.tsx&theme=dark",style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:"hidden"},title:"queryhook-demo",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"})]})}}var f=w;return b;})(); ;return Component;

Recent posts

Recent projects