<div id="readability-page-1" class="page"><div><h2 id="usequery의-재호출">useQuery의 재호출</h2>
useQuery는 첫 호출할 때 한번만 api를 call 한다.
만약 api를
<ul>
<li>같은 파라미터로 재호출하고싶다면 <code>query.refetch</code>를 사용한다.</li>
<li>다른 파라미터로 재호출하고싶다면, <code>queryKey</code>를 바꿔주면된다. 
- react-hook 은 queryKey가 변경되면 자동으로 재호출한다. (<a href="https://stackoverflow.com/questions/67796103/refetch-with-different-data-react-query">참고</a>)</li>
</ul>
꼼수로 queryKey로 넘기는 값을 state로 관리하여, state를 바꾸면서 재호출시킬 수 있다. 
별도의 customHook으로 구현해볼 수도 있다.
<pre><code>export function useLazyQuery(
 initalParams?: ApiParams,
) {
 const [params, setParams] =
 useState&lt;ApiParams | undefined&gt;(initalParams);
 const queryClient = useQueryClient();

 const query = useQuery(['test-refetch', params], () =&gt; api({ params }));

 const fetch = (newParams: ApiParams) =&gt; {
 setParams(newParams);
 };

 return { query, fetch };
}</code></pre></div></div>

ginameee.log

Jangchun Lee

useQuery의 재호출
useQuery는 첫 호출할 때 한번만 api를 call 한다.
만약 api를
같은 파라미터로 재호출하고싶다면 query.refetch를 사용한다.
다른 파라미터로 재호출하고싶다면, queryKey를 바꿔주면된다.
react-hook 은 queryKey가 변경되면 자동으로 재호출한다. (참고)
꼼수로 queryKey로 넘기는 값을 state로 관리하여, state를 바꾸면서 재호출시킬 수 있다.
별도의 customHook으로 구현해볼 수도 있다.
export function useLazyQuery(
 initalParams?: ApiParams,
) {
 const [params, setParams] =
 useState<ApiParams | undefined>(initalParams);
 const queryClient = useQueryClient();
 const query = useQuery(['test-refetch', params], () => api({ params }));
 const fetch = (newParams: ApiParams) => {
 setParams(newParams);
 };
 return { query, fetch };
}

2023.01.05

댓글