React Query 자세히 알아보기

React Query는 크게 2가지로 나뉩니다.

• Query : 서버 데이터를 가져오는 것
• Mutation : 서버 데이터의 값을 바꾸거나 추가 또는 삭제하는것

Query

💬 useQuery 기본 설명

GET 요청과 비슷하게 서버 데이터를 가져오기 위해선 useQuery라는 hook이 사용됩니다. 이 useQuery를 사용할 때 두가지를 주의해야 합니다.

const data = useQuery(queryKey, queryFn)

• queryKey : useQuery마다 배열 형태로 부여되는 고유한 key 값입니다. 이 queryKey를 통해서 다른 mutation function이나 다른 곳에서도 해당 쿼리의 결과를 꺼내오는것이 가능합니다. React query는 이 queryKey로 캐싱 관리를 하여 데이터마다 고유한 key 값을 지정하는게 중요합니다. 더 나아가서 특정한 데이터를 가져오기 위해서 데이터의 아이디나 필요한 필터링 조건을 배열 형태로 보내줄수 있습니다.

/posts => ["posts"]
/posts/1 => ["posts", post.id]
/posts?authorId=1 => ["posts", {authorId : 1}]
/posts/2/comments => ["posts", post.id, "comments"]

• queryFn : Promise 처리가 이뤄지는 함수로 서버에 api를 요청하는 코드입니다.

useQuery는 비동기로 작동합니다. 만약 여러개의 useQuery가 한 컴포넌트에서 사용될 경우 하나가 끝난다음 다음 useQuery가 실행되는 것이 아닌 여러개의 useQuery가 동시에 실행됩니다.

📌 useQuery return 값

  const queryClient = useQueryClient();
  const { data, isLoading, isError, error, isSuccess, status} = useQuery({
    queryKey: ["posts"],
    queryFn: () => wait(1000).then(() => [...POSTS]),
  });

  if (isLoading || status === 'loading') return <div>...isLoading</div>;
  if (isError || status === 'error') {
    return <pre>{JSON.stringify(error)}</pre>;
  }

  return (
    <div>{data.map((data) => (<p key={data.id}>{data.title}</p>))}</div>
  )

• data : queryFn 함수를 랜더한 결과값을 나타냅니다.
• isLoading : boolean 형태의 값으로 서버에서 데이터를 받아오는 동안 로딩 화면을 보여주고 싶다면 이 값이 유용하게 쓰일것입니다.
• isError : boolean 형태의 값으로 여러번의 시도끝에 계속 queryFn 함수가 에러를 낸다면 이 값으로 에러를 확신할수 있습니다.
• error : 에러가 생겼을때 화면에 에러 메세지를 보이게 하고 싶거나 확인하고 싶다면 이 값을 쓸수 있습니다.
• isSuccess : boolean 형태의 값으로 성공적으로 데이터를 받아왔는지를 확인할 수 있습니다.
• status : error, loading, success중 값의 상태를 확인할 수 있습니다.
• fetchStatus :
  • fetching : 현재 데이터를 가지고 오는 중일때를 뜻합니다
  • idle : 현재 아무것도 하지 않고 있거나 데이터를 가져온 후를 뜻합니다.
  • paused : 데이터를 가져오는중에 인터넷과 끊겼거나 어떠한 이유로 멈췄을 때를 뜻합니다.

📌 useQuery를 사용해 fetching 할때의 과정

1. 페이지안의 컴포넌트에 useQuery가 있을때 useQuery는 실행되며 밑의 상황들이 일어날때 다시 실행됩니다.

   • 페이지 새로고침
   • 한 페이지에서 다른 페이지로 넘어갈때
   • 마우스 포커스를 다른 곳에 뒀다가 다시 페이지로 돌아갈때
   • 인터넷이 끊겼다가 다시 돌아오는 동시에 페이지를 보여줄때

2. QueryKey를 사용해 데이터가 stale인지를 알아본다음 refetch를 합니다.

3. refetch된 데이터를 화면에 보여줍니다.

제일 처음에 페이지를 로딩할때

fetchStatus : fetching
 status : loading

데이터를 성공적으로 가져왔을 때

fetchStatus : idle
 status : success (실패할 경우 "error")

다른 페이지로 넘어갈때 똑같은 데이터를 넘어가는 페이지에서도 부를 경우 (Refetching)

fetchStatus : fetching
 status : success (실패할 경우 "error")

📌 useQuery에서 자주 사용되는 옵션

  const { data, isLoading, isError, error, isSuccess, status} = useQuery({
    queryKey: ["posts", postQuery?.data?.postId],
    queryFn: getPosts,
    enabled: postQuery?.data.postId !== null,
    staleTime : 1000,
    refetchInterval : 1000,
  });

enabled : 위에서 말했듯이 useQuery는 비동기로 작동합니다. 만약 여러개의 useQuery를 한 컴포넌트에서 동기로 작동하고 싶다면 enable를 사용할수 있습니다. boolean 형태의 조건을 넣어주면서 조건이 true일때 useQuery를 작동시킵니다.

staleTime : 데이터를 fresh상태에서 stale상태로 전환될 때까지의 시간을 정해줄 수 있습니다. 만약 5분을 지정해준다면 5분동안은 데이터가 fresh상태를 유지할것이며 fresh상태의 데이터는 항상 cache에서 읽어온다는 것을 뜻합니다.

refetchInterval: milisecond 단위의 시간으로 지정한 시간마다 데이터를 refetch 할수 있습니다. 만약 1000를 지정해주었다면 1초마다 한번씩 데이터를 refetch 해줍니다.

💡 stale이란? React query는 캐싱된 data를 stale한 상태로 여깁니다. 여기서 stale은 "신선하지 않다"라는 뜻이 있는데요. 이 stale한 data는 최신화가 필요한 데이터라는 의미로 컴포넌트가 마운트나 업데이트되면 refetch가 됩니다.

Mutation

💬 useMutation 기본 설명

POST나 PUT 요청과 비슷하게 서버 데이터의 값을 바꾸거나 추가 또는 삭제하기 위해선 useMutation이라는 hook이 사용됩니다. 받는 props들이 위의 useQuery와 동일하지만 그 외에 또 다른 하나의 mutate 또는 mutateAsync이라는 props를 받습니다. mutate 또는 mutateAsync는 함수 형태이며 useMutation을 실행할수 있게 도와줍니다.

• mutationFn : queryFn과 같이 Promise 처리가 이뤄지는 함수로 서버에 api를 요청하는 코드입니다. 하나의 props를 받을수 있으며 이 값을 함수에 전달하여 사용할수 있습니다.

• onSuccess : 예상대로 작동했을때 실행되는 함수입니다. onSuccess를 사용하지 않는다면 mutationFn이 랜더된 후에도 화면에 바뀐 결과가 나타나지 않을겁니다. 그 이유로는 mutation은 단순히 uniquekeyname을 가지고 있는 값을 바꾸어버릴 뿐 다시 fetch 해오지 않기 때문입니다. onSuccess가 실행될때 세개의props를 받는데요. data는 결과값을 나타내고 props는 mutationFn에서 전달했던 값과 같은 값을 받습니다. 마지막으로 context는 onMutate 함수에서 return 하는 값을 뜻합니다.

  • queryClient.invalidateQueries : queryKey를 사용해 값을 다시 refetch를 할수 있습니다.

• onError : 예상대로 작동하지 않았을때 실행되는 함수입니다.

• onSettled : 위의 onError과 onSuccess와 다르게 4개의 props를 받아내며 data와 error을 다 전달 받을수 있습니다.

• onMutate : 위의 세개의 함수와 다르게 props를 하나만 전달 받는 함수 입니다. 이 함수는 mutationFn이 작동되기 전에 실행되며 여기서 보내는 값은 onSuccess의 context로 전달됩니다. 데이터를 여러번 생성또는 변경되는걸 막기위해 이 함수는 예상대로 작동하지 않아도 다시 시도를 해보려 하지 않습니다. 하지만 retry를 통해 다시 시도 해볼 수를 지정할수 있습니다.

  const queryClient = useQueryClient();

  const {data, error, status,isIdle, isSuccess, isError, mutate } =
  useMutation({
    mutationFn: (props) => wait(1000).then(() => POSTS.push({ id: 1, props })),
    onSuccess: (data, props, context) => {
      queryClient.invalidateQueries(["posts"]);
    },
    onError: (error, props, context) => {
      ...
    },
    onSettled: (data, error, props, context) => {
      ...
    },
    retry: 3,
    onMutate: props => {
      return {key:"value"}
    },
  });


  return (
      <button onClick={()=> mutate('New post') } />
      <button onClick={()=> mutateAsync('New post').then(()=>{...}) } />
  )

Devtool

React Query Devtools는 React Query의 장점중의 하나인 강력한 내장 개발 도구입니다. 사용중인 모든 쿼리 상태들을 시각화하여 확인할수 있게 도와주고 에러가 생기거나 예상대로 작동하지 않는 경우 문제를 해결할수 있게 도와줍니다.

📌 설치방법

npm i @tanstack/react-query-devtools
yarn add @tanstack/react-query-devtools

📌 사용방법

react-query가 제공하는 QueryClientProvider 사이에 ReactQueryDevtools를 넣어줘야 합니다. 여기서 props로 client를 전달해줘야 하는데 QueryClient의 인스턴스를 전달해주는것으로 만족시킬 수 있습니다.

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { QueryClient, QueryClientProvider } from 'react-query';


const queryClient = new QueryClient();

...

return
  <QueryClientProvider client={queryClient}>
    <ReactQueryDevtools initialIsOpen={false} position='bottom-right' />
  </QueryClientProvider>

// initialIsOpen : open된 채로 시작
// position : devtools를 열 수 있는 logo 위치 - 우측 하단으로 지정