[ useQuery ] - custom hook 을 useQuery로 바꿔보자 -3 invalidateQueries 무효화하기

☝🏻 invalidateQueries

useQuery는 최상위에서 provider로 감싸주기 때문에 안에 컴포넌트에서는 useQuery를 사용할 수 있다.

만약 상품등록하는 페이지에서 useQuery를 사용하고있는데 새로운 상품이 등록되어 화면에 렌더링 되도록 하게 하려면 refetching이 필요하다.

이를 위해 invalidateQueries 를 사용할 수 있다.

	import React, { useState } from 'react';
    import Products from './Products';
    import {useQueryClient } from "@tanstack/react-query"

    export default function MainProducts() {
      const client = useQueryClient(); // 1

      const [showLeftProducts, setShowLeftProducts] = useState(true);
      const [showRightProducts, setShowRightProducts] = useState(true);
      return (
        <main className='container'>
          <div>
            {showLeftProducts && <Products />}
            <button onClick={() => setShowLeftProducts((show) => !show)}>
              Toggle
            </button>
          </div>
          <div>
            {showRightProducts && <Products />}
            <button onClick={() => setShowRightProducts((show) => !show)}>
              Toggle
            </button>
            <button onClick={() => // 2
            {client.invalidateQueries(['products',false])}}></button> 
          </div>
        </main>
      );
    }

Products 컴포넌트안엔 데이터를 받아오는 로직이 있다. 데이터가 업데이트 되었을 경우 refetch를 원한다면 무효화, invalidateQueries 를 해주어야 refetch(새로고침) 을 할 수 있다.

만약 false일 경우에만 새로고침을 원한다면 client.invalidateQueries(['products',false]) 로 넣어주어 false 상태일 경우에만 invalidate 된다.

false는 Products 컴포넌트안에 useState로 true,false 상태변화에 따라 다른 값을 얻어올수 있도록 한 값이다.

true false 상관없이 모든 상태에서 무효화를 원한다면 client.invalidateQueries(['products'])
내가 만들어준 키값만 넣어 주면 된다.