TanStackQuery (3) - Queries

 

쿼리 기본 사항

쿼리는 고유 키에 연결된 비동기 데이터 소스에 대한 선언적 종속성이다

쿼리는 서버에서 데이터를 패치하기 위해 모든 Promise 기반 매서드 (GET, POST 메소드 포함)와 함께 사용할 수 있다.

 

구성요소 또는 사용자 정의 hook에서 쿼리를 구독하려면 아래의 최소한 코드로 useQuery hook을 호출한다.

import { useQuery } from '@tanstack/react-query'

function App() {
	const info = useQuery({ 
    	queryKey: ['todos'],
        queryFn: fetchTodoList}
    })
}

 

사용자가 작성한 queryKey인 고유 키는 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는데 내부적으로 사용된다.

 

여기서 핵심적인 사용법에 대한 내용은 다음의 내용이라고 생각한다.

 

결과 객체에는 중요한 상태가 포함되어 있다.

• isPending 또는 status === 'pending' 쿼리에 아직 데이터가 없다
• isError 또는 status === 'error' 쿼리에서 오류가 발생했다
• isSuccess 또는 status === 'success' 쿼리가 성공했으며 데이터를 사용할 수 있다.

이러한 기본 상태 외에도 쿼리 상태에 따라 추가 정보를 사용할 수 있다.

• error 쿼리가 isError 상태인 경우 error 속성을 통해 오류를 사용할 수 있다.
• data 쿼리가 isSuccess 상태인 경우 data 속성을 통해 데이터를 사용할 수 있다.
• isFetching 어떤 상태이든, 쿼리가 언제든지 페칭중이면 isFetching이 true가 된다

 

대부분의 쿼리의 경우 isPending 상태를 확인한 다음 isError 상태를 확인한 후 마지막으로 데이터를 사용

function Todos() {
	const { isPending, isError, data, error } = useQuery({
    	queryKey: ['todos'],
        queryFn: fetchTodoList,
    })
    
    is (isPending) { 
    	return <span> Loading... </span>
       }
    if (isError) {
    	return <span> Error: {error.message} </span>
       }
       
    return (
    	<ul>
        	{data.map((todo)) => {
            	<li key ={todo.id}>{todo.title}</li>
            ))}
        </ul>
    )
}

 

또는 다음과 같이 사용할 수 있다.

function Todos() {
	const { status, data, error } useQuery({
    	queryKey: ['todos'],
        queryFn: fetchTodoList,
    })
    
    if (status === 'pending') {
    // ...