react js의 React Query Custom Hooks 예제

반응 쿼리를 사용하여 사용자 지정 후크를 만들어 보겠습니다.
이제 반응 쿼리로 제품 목록을 가져오는 구성 요소를 만듭니다.

이제 Product.js 구성 요소에서

const Product = () => {
  const products = useProducts()
   if(products.isLoading) return "Loading ....."
   if(products.isError) return "Error ...." 
  return(
   <>
      products.map((product) => (
     <h4 key={product.id}>{product.title}</h4>
  ))
   </>
)
}

useProducts.js로 후크를 만들 수 있습니다.

const useProducts = () => {
  return useQuery(['products'] , getProducts)
};

이제 단일 데이터를 가져오려면 id를 전달할 수 있습니다.

const Product = () => {
const params = useParams();
const id = Number(params?.id)
  const product = useProduct(id)
   if(product.isLoading) return "Loading ....."
   if(product.isError) return "Error ...." 
  return(
   <>
     <h4>{product.title}</h4>
  ))
   </>
)
}

const useProduct = (id) => {
  return useQuery(['product' , id] , () => getProduct(id))
};

이제 게시 및 수정을 위해

const AddProduct = () => {
  const mutation = useAddProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data)}></button>
   </>
  )
)
};

const useAddProduct = () => {
  return useMutation(postProduct , {
  onSuccess : () => {
    toast.success(`Added successfully`)
  }
})
};

편집을 위해

const EditProduct = () => {
  const params = useParams();
  const id = Number(params.id);
  const mutation = useEditProduct()
  const [data , setData] = useState('');
  return(
   <>
    <input value={data} onChange={(e) => 
        setData(e.target.value) } /> 
    <button onClick={mutation.mutate(data , id)}></button>
   </>
  )
)
};

const useEditProduct = () => {
  return useMutation(editProduct , {
  onSuccess : () => {
    toast.success(`edited successfully`)
  }
})
};

결론,

이것은 서버 측 데이터를 관리하고 비즈니스 로직을 UI 구성 요소와 분리하는 가장 좋은 방법이므로 외부 세계의 누구나 코드를 확인, 편집 및 이해할 수 있습니다. 이것이 반응 작업에 가장 좋은 방법이며 필요한 구성 요소만 사용자 지정 후크의 데이터를 사용합니다.