TanStack Query v4 TS/JS, React, Solid, Vue 및 Svelte를 위한 강력한 비동기 상태 관리

리액트 쿼리 V4를 배워봅시다.

React Query는 종종 React에 대한 누락된 데이터 가져오기 라이브러리로 설명됩니다. 그러나 더 기술적인 측면에서 보면 React 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것이 쉬워집니다.

쿼리에 반응하는 이유는 무엇입니까?
-> 자주 언급되는 React 쿼리는 서버 데이터의 상태 관리에 사용되며 react 쿼리를 사용하면 코드를 적게 작성해야 하므로 redux 툴킷의 대안이기도 합니다.

react-query로 시작하여 react-query에서 제공하는 컨텍스트 공급자를 제공해야 합니다. 그런 다음 react-query에서 제공하는 후크를 사용할 수 있습니다. 예제를 살펴보겠습니다.

app.js 파일에서 다음과 같은 방법으로 구성합니다.

import {
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

// Create a client
const queryClient = new QueryClient()

export function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
    //out app goes here......
    </QueryClientProvider>
  )
}

이제 구성 요소 내에서 데이터에 액세스할 수 있습니다.

따라서 구성 요소 Products.js에서 데이터를 가져오려면

`가져오기 {
사용 쿼리,
} '@tanstack/react-query'에서
'../my-api'에서 { getProducts } 가져오기

함수 제품() {

//쿼리
const {data , isLoading , isError} = useQuery(['제품'], getProducts)
if(isLoading) return "로드 중..."
if(isError)는 "오류 ..."를 반환합니다.

//그러면 데이터가 성공했다고 가정할 수 있습니다.

반품 (




{데이터?.지도(제품 => (

{제품.제목}

))}



)
}`

여기에서 캐싱을 제공하는 useQuery 후크 내부의 "제품"으로 고유한 키를 제공했으며 고유해야 합니다.
getProducts 함수는 성공하면 데이터를 반환하고 오류가 있으면 오류를 발생시키는 약속 기반 함수입니다.

여기에서는 다음과 같은 것을 제공하는 react-query에서 useQuery라는 후크를 사용했습니다.

데이터 -> 서버에서 데이터를 제공합니다. 예: data : [{title : 'title'}]

isLoading -> 데이터를 가져오고 현재 로드 상태에 있을 때까지 로드 상태를 부울로 제공합니다.

isError -> 데이터를 가져오는 동안 문제가 있으면 오류 상태에 오류가 제공됩니다.
더 많은 방법은 다음과 같습니다. -

오류 -> 오류 메시지를 제공합니다.

isFetching -> 모든 렌더링 반응 쿼리 가져오기 후에 isFetching이 참인 반면 isLoading은 초기 렌더링 중에만 참입니다.

이제 데이터 게시를 위해 Next hook을 useMutation으로 사용합니다.

그래서 AddProduct 구성 요소에서

mport {
  useMutation,
  useQueryClient,
} from '@tanstack/react-query';

const AddProducts = () => {
const [data , setData] = useState('');
 // Access the client
  const queryClient = useQueryClient();

const mutation = useMutation(mutationFn , {
onSuccess : () => {
   // Invalidate and refetch
      queryClient.invalidateQueries(['products'])}
}
)

return (
<>
  <input value={data} setData={(e) => setData(e.target.value)} />
<button onClick={mutation.mutate(data)}>Submit</button> 
</>
)
}

여기서 useMutation 후크는 돌연변이 기능을 사용합니다.
여기서 mutate는 데이터를 가져와 useMutation 후크에 제공하는 콜백 함수입니다.