1-13 react query (2)

useQuery사용법

import { useQuery } from 'react-query';
import { fetchTodoList } from '../api/fetchTodoList';

function App() {
const info = useQuery('쿼리키', 비동기함수);
}

여기서 쿼리 키의 용도는
refetching(=invalidate)
캐싱처리(저장된 데이터를 불러오기)
애플리케이션 전체 맥락에서 이 쿼리를 불러오기
->어느 컴포넌트 곳곳에 뿌려져있어도 같은 key면 같은 쿼리 및 데이터 보장

유의사항
query키는 겹치면 안된다.

const query1 = useQuery('qk', api); // unique
const query2 = useQuery('qk2', api); // not unique
const query3 = useQuery('qk2', api); // not unique

 

쿼리 키의 다양한 형태

// 💥주의! key는 표현이 그렇다는거지, api 로직과는 관련이 없어요!

// ID가 5인 todo 아이템 1개
useQuery(['todo', 5], ...)
// queryKey === ['todo', 5]

// ID가 5인 todo 아이템 1개인데, preview 속성은 true야
useQuery(['todo', 5, { preview: true }], ...)
// queryKey === ['todo', 5, { preview: true }]

// todolist 전체인데, type은 done이야
useQuery(['todos', { type: 'done' }], ...)
// queryKey === ['todos', { type: 'done' }]

비동기함수은 쿼리함수라고 부른다.(Query Function)

쿼리 함수는 promise 객체를 return하고
promise객체는 반드시 data를 resolve하거나 에러를 내야한다.
resolve: 정상적으로 통신이 되었을때 리턴
error: 원했던 상황이 아닌 오류가 발생한 경우에 오류처리 관련 로직 리턴
axios에서는 try~ catch문으로 비동기함수 호출 후 (), then(), catch()로알려주기

 

1. useQuery의 결과물에 대해
   1. useQuery를 통해 얻은 결과물은 객체(object)에요 객체!
   2. 그 안에는 여러분이 ‘조회’를 요청한 결과에 대한 거의 모든 정보가 들어있고 그 과정에 대한 정보도 다음과 같이 들어있어요.
      1. 시~작 하면, isLoading이 true가 돼요.
      2. 조회 결과 오류가 나면 isError가 true가 돼요. isLoading은 false가 되겠죠. error 객체를 통해 좀 더 상세한 오류 내용을 확인할 수 있어요.
      3. 조회 결과 정상이 되면 isSuccess가 true가 돼요. isLoading은 false가 된답니다. data 객체를 통해 좀 더 상세한 조회 결과를 확인할 수 있어요.

mutation

위에서 언급했듯이, query와는 다르게 mutation은 CUD에서 사용돼요.

useMutation 예제를 다시 한번 짚어봅시다.

// [출처] : 공식문서

function App() {
   const mutation = useMutation(newTodo => {
     return axios.post('/todos', newTodo)
   })
 
   return (
     <div>
       {mutation.isLoading ? (
         'Adding todo...'
       ) : (
         <>
           {mutation.isError ? (
             <div>An error occurred: {mutation.error.message}</div>
           ) : null}
 
           {mutation.isSuccess ? <div>Todo added!</div> : null}
 
           <button
             onClick={() => {
               mutation.mutate({ id: new Date(), title: 'Do Laundry' })
             }}
           >
             Create Todo
           </button>
         </>
       )}
     </div>
   )
 }

useMutation은 hook이죠. 함수구요. API에요.

mutation.mutate( 인자 )

인자는 반드시 한 개의 변수 또는 객체여야 해요.

mutation.mutate(인자1, 인자2) → 오류

결과를 객체(object 형태로) 갖고 있습니다.

그 결과물 객체는 항상 어느 상태 중 하나에 속해요.

isIdle
isLoading
isError
isSuccess(data객체를 항상 품고있다)

 

예를들어

성공이 일어났을때, onSuccess: ()=>{}가 필요한지 판단해줘야한다.
변경이 일어난 경우, 혹시나 갱신해줘야하는 데이터이 없는지 유념하고,
있다면 해당 query키를 queryClient.invalidate.Queries()를 꼭 넣어줘야한다.