TanStackQuery (20) - 추가적인 정리(2)

 

이어서 나머지 내용을 정리해보고자 한다.

이 포스트는 https://www.heropy.dev/p/HZaKIE를 참고하여 작성하였다.

 

 

상태 확인

isFetching 은 쿼리 함수(queryFn)가 실행 중인지의 여부로, 데이터를 가져오는 중을 나타낸다

 

isPending은 캐시된 데이터가 없고 쿼리가 아직 완료되지 않은 상태의 여부로, initialData 혹은 placeholderData 옵션으로 데이터를 제공하면 출력 대기(Pending)가 필요하지 않으므로 false를 반환한다.

따라서 상황에 따라 사용할 때 enabled 옵션을 false로 지정하면 쿼리가 대기 상태로 시작하므로 isPending은 true를 반환한다.

 

export default function DelayedData() {
  const { data, isFetching, isPending, isLoading } = useQuery<ResponseValue>({
    queryKey: ['delay'],
    queryFn: async () => (await fetch('https://api.heropy.dev/v0/delay?t=1000')).json(),
    staleTime: 1000 * 10
  })
  return (
    <>
      <div>isFetching: {JSON.stringify(isFetching)}</div>
      <div>isPending: {JSON.stringify(isPending)}</div>
      <div>isLoading: {JSON.stringify(isLoading)}</div>
      <div>{data?.time}</div>
    </>
  )
}

 

다시 가져오기

refetch 함수를 사용하면, 데이터를 항상 새롭게 다시 가져올 수 있다.

const { data, isStale, refetch } = useQuery<ResponseValue> ({
	// ... 
    
    return (
    	<button onClick = { () => refetch()}>
        // ...

 

캐시된 데이터가 필요하다면 ... 

useQueryClient 훅을 사용해 queryClient 객체를 가져온 후, getQueryData 메소드를 사용한다.

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

export default function DelayedData() {
	const queryClient = useQueryClient()
    
    // ...
    
    function getCachedData() {
    	const data = queryClient.getQUeryData(['delay'])
        console.log(data) // 캐시된 데이터 또는 undefiend
    //...

 

 

useInfiniteQuery

무한 스크롤 기능을 구현한 hook

const 반환 = useInfiniteQuery<페이지타입>(옵션)

https://vitamin3000.tistory.com/206

TanStackQuery (10) - Infinite Queries

 

useMutation

데이터 변경 작업(생성, 수정, 삭제)을 위한 useMutaion hook을 제공해준다.

이를 통해, 데이터 변경 작업을 처리하고 다양한 성공, 실패, 로딩 등의 상태를 얻을 수 있다,

요청 실패 시의 자동 재시도나 낙관적 업데이트 같은 고급 기능도 쉽게 처리할 수 있다.

*낙관적 업데이트 : 서버 요청의 응답을 기다리지 않고, 먼저 UI를 업데이트하는 기능

서버 응답이 느린 상황에서도 빠른 인터페이스를 제공할 수 있어 사용자 경험을 크게 향상할 수 있따.

 

사용한 예제

useQuery를 활용한 데이터 가져오기 

// src/components/Users.tsx

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

export type Users = User[]
export interface User {
	name: string
    age: number
    isValid?: boolean
    emails?: string[]
    photo?: {
    	name: string
        data: string
    }
    id?: string
}

export default function Users() {
	const { data } = useQuery<Users>({
    	queryKey: ['users'],
        queryFn: async () => {
        	const res = await fetch('https: //...') //GET
            const json  = await res.json()
           	return json.users
        },
        
        staleTime: 1000 * 60 * 5 //5분
   }}

 

userMutation을 활용한 데이터 CRUD 작업

import React, { useState } from 'react'
import { useMutation, useQueryClient } from '@tanstack-react-query'
import type { Users, User } from './Users'

export default function AddUser() {
	const [name, setName] = useState('')
    const [age, setAge] = useState(0)
    const queryClient = useQueryClient()
    
    const { mutate, error, isPending, isError } = useMutation({
    	mutationFn: async (newUser: User) => {
        	const res = await fetch('https://...', {
            	method: 'POST',
                body: JSON.stringify(newUser)
        	})
        	if (!res.ok) throw new Error('mutation 처리 중 오류')
            return res.json()
     },
     onMutate: async newUser => {
     	// 낙관적 업데이트 전에 사용자 목록 쿼리를 취소해 잠재적인 충돌 방지
        await queryClient.cancelQueries({ queryKey: ['users'] })
        
        // 캐시된 데이터(사용자 목록) 가져오기
        const previousUsers = queryClient.getQueryData<User>({'users'])
        
        // 낙관적 업데이트
        if (previousUsers){
        	queryClient.setQueryData<Users>(['users'], [...previousUsers, newUser])
        }
        
        // 각 콜백의 context로 전달할 데이터 반환
        return { previousUsers }
    },
    
    onSuccess: (data, newUser, context ) => {
		console.log("onSuccess", data, newUser, context)
        // mutation 성공 시 캐시 무효화로 사용자 목록 데이터 갱신
        queryClient.invalidateQueryes({ queryKey: ['users'] })
       	},
        
        onError: (data, error, newUser, context) => {
        	console.log('onError', error, newUser, context)
            // 변이 실패시 낙관적 업데이트 결과를 이전 사용자 목록으로 되돌리기
            if(context){
            	queryClient.setQueryData(['users'], context.previousUsers)
            }
        },
        onSettled: (data, error, newUser, context) => {
      		console.log('onSettled', data, error, newUser, context)
    		},
    	retry: 3, // 변이 실패 시 3번 재시도
    	retryDelay: 500 // 0.5초 간격으로 재시도
     })

      const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        mutate({ name, age }) // 변이!
      }