반응 js에서 반응 쿼리 v4를 사용하여 서버 측 데이터를 얻는 방법.

리액트 쿼리 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에서 데이터를 가져오려면

import {
  useQuery,
} from '@tanstack/react-query'
import { getProducts } from '../my-api'

function Products() {

  // Queries
  const {data , isLoading , isError} = useQuery(['products'], getProducts)
if(isLoading) return "Loading ..."
if(isError) return "Error ..."

//then we can assume the data is success

  return (
    <div>
      <ul>
        {data?.map(product => (
          <li key={product.id}>{product.title}</li>
        ))}
      </ul>
    </div>
  )
}

여기에서 캐싱을 제공하는 useQuery 후크 내부의 "제품"으로 고유한 키를 제공했으며 고유해야 합니다.

getProducts 함수는 성공하면 데이터를 반환하고 오류가 있으면 오류를 발생시키는 약속 기반 함수입니다.

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

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

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

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

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

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

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

그래서 AddProduct 구성 요소에서

import {
  useQuery,
  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 후크에 제공하는 콜백 함수입니다.
무효화 쿼리는 데이터 또는 제품을 다시 가져옵니다.

결론,

React 쿼리는 서버 측 상태 관리를 위한 가장 강력한 라이브러리이며 반응 쿼리의 활성화 속성은 조용히 인상적입니다.
예시,

const params = useParams();
const id = Number(params?.id)
const {data} = useQuery([''] , queryFn , {
enabled : !!id
})

따라서 id가 true이면 이 쿼리만 데이터를 가져오고 그렇지 않으면 쿼리가 비활성화됩니다.