var Component=(()=>{var u=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var s in n)l(e,s,{get:n[s],enumerable:!0})},o=(e,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of h(n))!k.call(e,c)&&c!==s&&l(e,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return e};var f=(e,n,s)=>(s=e!=null?u(N(e)):{},o(n||!e||!e.__esModule?l(s,"default",{value:e,enumerable:!0}):s,e)),b=e=>o(l({},"__esModule",{value:!0}),e);var r=y((Q,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>d,frontmatter:()=>w});var a=f(r()),w={title:"React Query\uB85C useLazyQuery \uAD6C\uD604\uD558\uAE30",description:"\uC774 \uAE00\uC5D0\uC11C\uB294 React Query\uC5D0\uC11C useLazyQuery\uB97C \uC0AC\uC6A9\uD558\uC5EC \uB370\uC774\uD130 \uD398\uCE6D\uC744 \uD6A8\uC728\uC801\uC73C\uB85C \uAD00\uB9AC\uD558\uB294 \uBC29\uBC95\uC744 \uB2E4\uB8EC\uB2E4. \uCF54\uB4DC \uC608\uC81C\uC640 \uD568\uAED8 \uC2E4\uC2B5\uC744 \uD1B5\uD574 useLazyQuery\uC758 \uAE30\uBCF8 \uC0AC\uC6A9\uBC95\uC744 \uC54C \uC218 \uC788\uB2E4.",tags:["React","React Query","JavaScript","TypeScript"],date:"2024-08-11",thumbnailUrl:"2024/react-query-lazy-query/thumbnail.png",category:"\u{1F4BB} Dev"};function p(e){let n={a:"a",code:"code",div:"div",h2:"h2",p:"p",pre:"pre",span:"span",strong:"strong",...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.h2,{id:"\uAC1C\uC694",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uAC1C\uC694",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uAC1C\uC694"]}),` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"React Query"}),"\uC5D0\uC11C\uB294 \uB124\uD2B8\uC6CC\uD06C \uC694\uCCAD\uC744 \uD560 \uB54C \uC8FC\uB85C ",(0,a.jsx)(n.code,{children:"useQuery"})," \uD6C5\uC744 \uC0AC\uC6A9\uD55C\uB2E4. \uC774 \uD6C5\uC740 \uAE30\uBCF8\uC801\uC73C\uB85C \uC790\uB3D9\uC73C\uB85C \uB124\uD2B8\uC6CC\uD06C \uC694\uCCAD\uC744 \uC218\uD589\uD558\uC9C0\uB9CC, \uD2B9\uC815 \uC774\uBCA4\uD2B8(\uC608: \uBC84\uD2BC \uD074\uB9AD) \uC2DC \uB124\uD2B8\uC6CC\uD06C \uC694\uCCAD\uC744 \uC81C\uC5B4\uD558\uB824\uBA74 ",(0,a.jsx)(n.strong,{children:"enabled"})," \uC635\uC158\uC744 \uC0AC\uC6A9\uD574\uC57C\uD55C\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"enabled",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setEnabled",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"key",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," fetchAPI",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" enabled",(0,a.jsx)(n.span,{className:"token operator",children:":"})," enabled",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleClick"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"// \uD074\uB9AD \uC2DC \uB124\uD2B8\uC6CC\uD06C \uC694\uCCAD"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setEnabled"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["\uC774\uC640 \uAC19\uC740 \uAE30\uBCF8\uC801\uC778 \uAD6C\uC870\uC5D0\uC11C\uB294 \uBB38\uC81C\uAC00 \uC5C6\uC9C0\uB9CC, \uAC80\uC0C9 \uAE30\uB2A5\uC774 \uCD94\uAC00\uB418\uB294 \uACBD\uC6B0, \uAC80\uC0C9\uC5B4\uB97C ",(0,a.jsx)(n.strong,{children:"state"}),"\uB85C \uAD00\uB9AC\uD574\uC57C \uD558\uB294 \uBC88\uAC70\uB85C\uC6C0\uC774 \uC0DD\uAE34\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"enabled",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setEnabled",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"searchWord",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setSearchWord",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'""'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"key",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," searchWord",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetchAPI"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"searchWord",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" enabled",(0,a.jsx)(n.span,{className:"token operator",children:":"})," enabled",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleClick"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"search",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"// \uD074\uB9AD \uC2DC \uB124\uD2B8\uC6CC\uD06C \uC694\uCCAD"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setSearchWord"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"search",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setEnabled"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.p,{children:["\uC774 \uACBD\uC6B0 ",(0,a.jsx)(n.strong,{children:"enabled"}),"\uC640 ",(0,a.jsx)(n.strong,{children:"searchWord"}),"\uB97C \uD568\uAED8 \uAD00\uB9AC\uD574\uC57C \uD558\uB294 \uBC88\uAC70\uB85C\uC6C0\uC774 \uC788\uB2E4. \uC774\uC640 \uAC19\uC740 \uC0C1\uD669\uC744 \uAC1C\uC120\uD558\uAE30 \uC704\uD574, ",(0,a.jsx)(n.code,{children:"Apollo Client"}),"\uC758 ",(0,a.jsx)(n.code,{children:"useLazyQuery"}),"\uC640 \uC720\uC0AC\uD55C \uAE30\uB2A5\uC744 ",(0,a.jsx)(n.code,{children:"React Query"}),"\uC5D0\uC11C \uAD6C\uD604\uD574\uBCF4\uC558\uB2E4."]}),` `,(0,a.jsxs)(n.h2,{id:"uselazyquery-\uAD6C\uD604-\uCF54\uB4DC",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#uselazyquery-\uAD6C\uD604-\uCF54\uB4DC",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"useLazyQuery \uAD6C\uD604 \uCF54\uB4DC"]}),` `,(0,a.jsxs)(n.p,{children:["\uC544\uB798\uB294 ",(0,a.jsx)(n.code,{children:"useLazyQuery"})," \uD6C5\uC744 \uAD6C\uD604\uD55C \uCF54\uB4DC\uC774\uB2E4. \uC774 \uD6C5\uC740 \uD568\uC218 \uD638\uCD9C\uC744 \uD1B5\uD574 \uB370\uC774\uD130\uB97C \uD398\uCE6D\uD558\uACE0, \uC131\uACF5 \uBC0F \uC2E4\uD328 \uC2DC \uCF5C\uBC31\uC744 \uC2E4\uD589\uD558\uB294 \uAE30\uB2A5\uC744 \uC81C\uACF5\uD55C\uB2E4."]}),` `,(0,a.jsx)(n.div,{className:"rehype-code-title",children:"useLazyQuery"}),(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useCallback",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useEffect",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryResult"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useQuery ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"@tanstack/react-query"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,a.jsxs)(n.span,{className:"token class-name",children:["Callbacks",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"TData",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" onCompleted",(0,a.jsx)(n.span,{className:"token operator",children:"?"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"data",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"void"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" onError",(0,a.jsx)(n.span,{className:"token operator",children:"?"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"error",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"void"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,a.jsxs)(n.span,{className:"token class-name",children:["Options",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"TData",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," TParams",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,a.jsxs)(n.span,{className:"token class-name",children:["Callbacks",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"TData",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" variables",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TParams"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," useLazyQuery ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TParams"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" queryKey",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"queryFn"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"params",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TParams"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Promise"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"options",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Options"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TParams"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"void"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"UseQueryResult"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Error"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"trigger",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setTrigger",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"args",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setArgs",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsxs)(n.span,{className:"token generic-function",children:[(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsxs)(n.span,{className:"token generic class-name",children:[(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"TParams",(0,a.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCallbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsxs)(n.span,{className:"token generic-function",children:[(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsxs)(n.span,{className:"token generic class-name",children:[(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"Callbacks",(0,a.jsx)(n.span,{className:"token operator",children:"<"}),"TData",(0,a.jsx)(n.span,{className:"token operator",children:">>"})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," query ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useQuery"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" queryKey",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"queryKey",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," args",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"queryFn"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"args ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Promise"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"reject"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(n.span,{className:"token class-name",children:"Error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Args are undefined"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"queryFn"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"args",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" enabled",(0,a.jsx)(n.span,{className:"token operator",children:":"})," trigger",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"isSuccess"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"onCompleted"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"onCompleted"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"data"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setCallbacks"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"isError"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"onError"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"onError"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"error"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setCallbacks"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"data"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"isSuccess"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," query",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"isError"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," callbacks",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," refetch ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," variables",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," onCompleted",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," onError ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Options"}),(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TData"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"TParams"}),(0,a.jsx)(n.span,{className:"token operator",children:">"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setArgs"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"variables",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setTrigger"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"setCallbacks"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," onCompleted",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," onError ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"refetch",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," query",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," useLazyQuery",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"uselazyquery-\uC0AC\uC6A9-\uC608\uC81C",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#uselazyquery-\uC0AC\uC6A9-\uC608\uC81C",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"useLazyQuery \uC0AC\uC6A9 \uC608\uC81C"]}),` `,(0,a.jsxs)(n.p,{children:["\uC544\uB798\uB294 ",(0,a.jsx)(n.code,{children:"useLazyQuery"}),"\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAC80\uC0C9 \uAE30\uB2A5\uC744 \uAD6C\uD604\uD55C \uC608\uC81C\uC774\uB2E4. ",(0,a.jsx)(n.code,{children:"getSearch"})," \uD568\uC218\uB97C \uD638\uCD9C\uD558\uC5EC \uB370\uC774\uD130 \uD398\uCE6D\uC744 \uC218\uD589\uD558\uACE0, \uACB0\uACFC\uB97C \uCC98\uB9AC\uD55C\uB2E4."]}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"fetchAPI"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"search",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"// \uB370\uC774\uD130 \uD328\uCE6D \uB85C\uC9C1"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"useGetSearchQuery"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token generic-function",children:[(0,a.jsx)(n.span,{className:"token function",children:"useLazyQuery"}),(0,a.jsxs)(n.span,{className:"token generic class-name",children:[(0,a.jsx)(n.span,{className:"token operator",children:"<"}),(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token string",children:'"search"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," fetchAPI",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsx)(n.pre,{className:"language-tsx",children:(0,a.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"Example"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"search",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setSearch",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'""'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"getSearch",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," data",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isSuccess",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," isError ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useGetSearchQuery"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"handleClick"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"search",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token builtin",children:"string"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function",children:"getSearch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" variables",(0,a.jsx)(n.span,{className:"token operator",children:":"})," search",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onCompleted"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," response ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"// \uC870\uD68C \uC131\uACF5 \uC2DC \uCC98\uB9AC"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Success:"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," response",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onError"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," error ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token comment",children:"// \uC870\uD68C \uC2E4\uD328 \uC2DC \uCC98\uB9AC"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"error"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Error:"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," error",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"input"]}),` `]})]}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"type"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"text",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"search",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsx)(n.span,{className:"code-line",children:(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onChange"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"e ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setSearch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"e",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"target"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"handleClick"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"search",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\uD074\uB9AD"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isSuccess ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\uB370\uC774\uD130: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"JSON"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"stringify"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"data",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isError ",(0,a.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\uC5D0\uB7EC\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4."}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token plain-text",children:" "}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[" ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,a.jsx)(n.span,{className:"code-line",children:` `}),(0,a.jsxs)(n.span,{className:"code-line",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Example"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,a.jsxs)(n.h2,{id:"\uB9C8\uCE58\uBA70",children:[(0,a.jsx)(n.a,{className:"anchor","aria-label":"anchor",href:"#\uB9C8\uCE58\uBA70",children:(0,a.jsx)(n.span,{className:"icon icon-link"})}),"\uB9C8\uCE58\uBA70"]}),` `,(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"Apollo Client"}),"\uC758 ",(0,a.jsx)(n.code,{children:"useLazyQuery"}),"\uB97C \uCC38\uACE0\uD558\uC5EC ",(0,a.jsx)(n.code,{children:"React Query"}),"\uC5D0\uC11C\uB3C4 \uBE44\uC2B7\uD55C \uAE30\uB2A5\uC744 \uAD6C\uD604\uD574\uBCF4\uC558\uB2E4. \uC774 \uD6C5\uC740 \uB370\uC774\uD130 \uD398\uCE6D\uC744 \uB354\uC6B1 \uC720\uC5F0\uD558\uAC8C \uAD00\uB9AC\uD560 \uC218 \uC788\uB3C4\uB85D \uB3C4\uC640\uC8FC\uBA70, \uC131\uACF5 \uBC0F \uC2E4\uD328 \uCF5C\uBC31\uC744 \uD1B5\uD574 \uCD94\uAC00\uC801\uC778 \uB85C\uC9C1\uC744 \uCC98\uB9AC\uD560 \uC218 \uC788\uB2E4. \uC774 \uAE00\uC744 \uD1B5\uD574 ",(0,a.jsx)(n.code,{children:"useLazyQuery"}),"\uB97C \uD65C\uC6A9\uD55C \uD6A8\uC728\uC801\uC778 \uB370\uC774\uD130 \uD398\uCE6D \uBC29\uBC95\uC744 \uC774\uD574\uD558\uACE0, \uC5EC\uB7EC\uBD84\uC758 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uB3C4\uC6C0\uC774 \uB418\uAE38 \uBC14\uB780\uB2E4."]})]})}function d(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}return b(x);})(); ;return Component;

React

React Query로 useLazyQuery 구현하기