[React Query] 2. Pagenation, Prefetching, Mutation

hzn·2023년 3월 9일

React Query

목록 보기

4/4

13. 쿼리 키 Query Key

PostDetail.jsx

const { data, isLoading, isError, error } = useQuery('comments', () =>
    fetchComments(post.id)
  );

1) 문제 발생

처음 fetching한 게시물의 답글 데이터가 계속 똑같이 나오는 문제 발생 (comments 쿼리가 refetch 되지 않음)

2) 원인

👉🏽 (post.id에 따라) 각각 다른 데이터(query)를 받아오지만 같은 query key(comments)를 사용하고 있기 때문
👉🏽 이미 알려진(만들어진?)(known keys) 키의 쿼리 데이터는 특정한 트리거가 있어야 refetch된다.

트리거의 예

component remount

window refocus

running refetch function

automated refetch (지정된 간격으로 refetch 자동 실행)

query invalidation after a mutation

3) 해결 방법

❌ 새 게시물 클릭할 때마다 쿼리를 무효화해서 refetch 한다?

캐시에서 이전 게시물의 쿼리(데이터)를 지우면 안됨
게시물 1과 2를 클릭했을 때 서로 같은 쿼리를 실행하는 것이 아님 (서로 다른 쿼리!)
=> 같은 캐시 공간을 차지하지 않는다. 각 쿼리에 해당하는 캐시를 가지게 된다.

✅ 각 게시물의 쿼리에 label을 설정한다

query key에 문자열 대신 배열을 할당한다.

Query Key를 배열로 설정하기

PostDetail.jsx

const { data, isLoading, isError, error } = useQuery(['comments', post.id], () =>
    fetchComments(post.id)
  );

쿼리 키를 의존성 배열처럼 다루는 것
쿼리 키가 바뀌면( = post.id가 업데이트되면) 새로운 쿼리를 만든다.
새로운 쿼리는 별개의 staleTime과 cacheTime을 가진다.

👉🏽 쿼리 함수에 있는 값(데이터를 구별할 때 쓰이는 값. 여기서는 post.id)이 쿼리 키(배열)에 포함돼야 한다!

새로운 게시물을 클릭하면 이전 쿼리는 inactive 상태가 된다.
가비지로 수집되기 전까지는 캐시에 남아있는다. (만약 cacheTime 동안 다시 사용되면 다시 활성화됨)

14. 페이지네이션 Pagenation

현재 페이지 보여주기

페이지마다 다른 쿼리 키가 필요
👉🏽 쿼리 키를 배열로 만들어준다.
👉🏽 배열에 가져오는 페이지 번호를 포함

Post.jsx

...
const maxPostPage = 10; // 최대 10페이지로 임의로 설정해 줌 (json placeholder가 제공하는 api에 limit가 10으로 설정되어 있음..)

// 페이지에 따라 받아오는 데이터가 다른 쿼리 함수     
async function fetchPosts(pageNum) { // 매개변수로 pageNum 
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNum}` // pageNum에 따라 다른 api 요청 
  );
  return response.json();
}
    
export function Posts() {
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 state 만들기. 첫 페이지를 1페이지로 설정
  const [selectedPost, setSelectedPost] = useState(null);

  const { data, isError, error, isLoading } = useQuery(
    ['posts', currentPage], // currentPage를 넣어서 쿼리키를 의존성 배열처럼 만든다
    () => fetchPosts(currentPage), // 인자를 가지는 쿼리함수
    {
      staleTime: 2000,
    }
  );

이동 버튼 만들기 / 페이지 이동하기

Next Page, Previous Page 버튼 클릭
👉🏽 currentPage state를 업데이트
👉🏽 React Query가 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새로운 페이지가 표시된다.

Posts.jsx

...
<button
     disabled={currentPage <= 1} // 현재 페이지가 1 이하면 비활성화
     onClick={() => {
     setCurrentPage((previousValue) => previousValue - 1); // 클릭하면 현재페이지 -1
     }}>Previous page</button>
     <span>Page {currentPage}</span>
<button
    disabled={currentPage >= maxPostPage}
    onClick={() => {
    setCurrentPage((previousValue) => previousValue + 1); // 클릭하면 현재페이지 +1
    }}>Next page</button>

15. 데이터 프리페칭 Pre-fetching

다음 페이지가 캐시에 없기 때문에 Next Page 버튼을 누를 때마다 로딩 인디케이터가 보이는 현상...
👉🏽 Pre-fetching으로 (데이터를 미리 가져와서 캐시에 넣어서) 이러한 현상을 없애줄 수 있다.

pre-fetch의 목적

일단 캐시된 데이터를 표시해 주면서

백그라운드에서 데이터의 업데이트 여부를 조용히 서버에서 확인하는 것

만약 데이터가 업데이트 됐을 경우 해당 데이터를 페이지에 보여줌.
QQQ) 그럼 두 번 통신해서 비효율적인 것 아닌지.

데이터를 캐시에 추가
자동으로 stale 상태가 됨 (설정할 수 있지만 stale이 기본값) (inactive..)
re-fetching 하는 동안 stale 상태의 데이터를 보여줌 (캐시가 만료되지 않았다는 가정 하에! 만약 사용자가 cacheTime보다 오래 페이지에 머물렀다면 캐시가 없기 때문에 다시 로딩 인디케이터가 나타남)
추후 사용자가 사용할 법한 모든 데이터에 Pre-fetching을 사용

queryClient.prefetchQuery

prefetching을 수행하는 queryClient의 메서드

Post.jsx

Next Page를 prefetching

import { useQuery, useQueryClient } from 'react-query'; // useQueryClient 불러오기
...
export function Posts() {
 ...
  const queryClient = useQueryClient(); // queryClient 사용

// currentPage가 바뀔 때마다 pre-fetching 하기 (useEffect와 의존성 배열 사용) 
  useEffect(() => {
    if (currentPage < maxPostPage) { // Next Page 클릭에 대한 prefetching을 만들 것이므로
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery(['posts', nextPage], () =>
        fetchPosts(nextPage) // 해당 포스트(다음 페이지)를 fetch
      );
    }
  }, [currentPage, queryClient]);

참고 : Previous Page의 데이터를 캐시에 유지하기

keepPreviousData: true : 쿼리 키가 변경되어서 새로운 데이터를 fetching 하는 동안에도 마지막으로 fetch 되었던 데이터 값을 유지한다. (이전 페이지로 이동했을 때 해당 데이터가 캐시에 있도록)

Post.jsx

export function Posts() {
  const { data, isError, error, isLoading } = useQuery(
    ['posts', currentPage],
    () => fetchPosts(currentPage),
    {
      staleTime: 2000,
      keepPreviousData: true, // Previous Page 데이터 유지하기
    }
  );

16. isLoading vs isFetching

isFetching : 데이터 가져오는 중 (쿼리 함수 완료 전) (데이터 존재 여부 상관 X)
isLoading : isFetching + 캐시된 쿼리 데이터 없음 (데이터 새로 가져오는 중)

보통 로딩 인디케이터를 만들 때는 isLoading 사용 (데이터 없어서 새로 가져올 때만 보여줄 용도로 사용되므로)

🐥 (어떤 상태이든) 캐시가 있다는 것...
=> fetching 중일 때 보여줄 수 있는 데이터가 있다는 것 (fetching은 다시 해야 함)

17. Mutation

데이터를 변경하기 위해 서버에 네트워크 호출을 실시

참고 : 강의에서 사용하는 jsonplaceholder는 실제 서버 데이터를 변경할 수는 없음. mutation 요청 보내는 건 가능하지만...

useMutation

mutate 함수를 리턴 (..?) (객체의 속성 함수로...)

query key가 필요 없음 (데이터를 저장하지 않으므로)

isLoading은 있지만 isFetching은 없음 (캐시되는 항목이 없으므로)

retry(재시도) 기본값 없음. (자동 재시도를 적용하고 싶다면 설정은 가능)

useMutation과 useQuery의 차이점

useQuery의 queryFn은 매개변수 가질 수 없지만
  const { data, isLoading, isError, error } = useQuery(
    ['comments', post.id],
    () => fetchComments(post.id) // 쿼리함수 (매개변수 x)
  );
useMutation의 mutationFn은 매개변수를 가질 수 있다.
const deleteMutation = useMutation((postId) => deletePost(postId)); // 변이함수 (매개변수 O)

mutate 함수 사용

mutate 함수의 인자(여기서는 post.id)로 넣으면

  <button onClick={() => deleteMutation.mutate(post.id)}>
        Delete
      </button>

mutationFn의 인자(여기서는 postId)로 전달된다

const deleteMutation = useMutation((postId) => deletePost(postId));

PostDetail.jsx

Delete 버튼 누르면 삭제

import { useQuery, useMutation } from 'react-query';

// 삭제 mutationFn
async function deletePost(postId) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/postId/${postId}`,
    { method: 'DELETE' }
  );
  return response.json();
}

const deleteMutation = useMutation((postId) => deletePost(postId));

   return (
    <>
      ...
      <button onClick={() => deleteMutation.mutate(post.id)}>Delete</button> // mutate의 인자로 삭제할 post id를 전달
      {deleteMutation.isError && (
        <p style={{ color: 'red' }}>Error deleting the post</p>
      )}
      {deleteMutation.isLoading && (
        <p style={{ color: 'purple' }}>Deleting the post...</p>
      )}
      {deleteMutation.isSuccess && (
        <p style={{ color: 'green' }}>Post has been deleted</p>
      )}
    ...

isError, isLoading, isSuccess

useMutation의 반환 객체에 들어있음..

PostDetail.jsx

 return (
    <>
      <h3 style={{ color: 'blue' }}>{post.title}</h3>
      <button onClick={() => deleteMutation.mutate(post.id)}>Delete</button>
      {deleteMutation.isError && ( // 에러 발생 시
        <p style={{ color: 'red' }}>Error deleting the post</p>
      )}
      {deleteMutation.isLoading && ( // 로딩 시
        <p style={{ color: 'purple' }}>Deleting the post...</p>
      )}
      {deleteMutation.isSuccess && ( // 요청 성공 했을 시
        <p style={{ color: 'green' }}>Post has been deleted</p>
      )}
      <button>Update title</button>
      <p>{post.body}</p>
      <h4>Comments</h4>
      {data.map((comment) => (
        <li key={comment.id}>
          {comment.email}: {comment.body}
        </li>
      ))}
    </>
  );

20. 정리

useQuery: 서버에서 데이터를 가져오고 최신 상태인지 확인하는 훅
staleTime : 데이터가 사용 가능한 상태로 유지되는 시간 (특정 트리거에 의해 re-fetch 되어 시작됨)
cacheTime : 데이터가 비활성화 된 후 남아있는 시간
쿼리 키가 변경되면 useQuery hook은 쿼리를 다시 실행함 (re-fetch)
( => 데이터 함수(쿼리 함수?)가 바뀌면 쿼리 키도 바뀜(바뀌어야 함). 데이터가 바뀌면 다시 실행될 수 있도록)

hzn

이전 포스트

[React Query] 2. Pagenation, Prefetching, Mutation

React Query

13. 쿼리 키 Query Key

PostDetail.jsx

1) 문제 발생

2) 원인

트리거의 예

3) 해결 방법

❌ 새 게시물 클릭할 때마다 쿼리를 무효화해서 refetch 한다?

✅ 각 게시물의 쿼리에 label을 설정한다

Query Key를 배열로 설정하기

PostDetail.jsx

14. 페이지네이션 Pagenation

현재 페이지 보여주기

Post.jsx

이동 버튼 만들기 / 페이지 이동하기

Posts.jsx

15. 데이터 프리페칭 Pre-fetching

pre-fetch의 목적

queryClient.prefetchQuery

Post.jsx

참고 : `Previous Page`의 데이터를 캐시에 유지하기

Post.jsx

16. isLoading vs isFetching

17. Mutation

useMutation

useMutation과 useQuery의 차이점

mutate 함수 사용

PostDetail.jsx

isError, isLoading, isSuccess

PostDetail.jsx

20. 정리

[React Query] 1. Query 생성하기 / Loading, Error 처리하기

0개의 댓글

[React Query] 2. Pagenation, Prefetching, Mutation

React Query

13. 쿼리 키 Query Key

PostDetail.jsx

1) 문제 발생

2) 원인

트리거의 예

3) 해결 방법

❌ 새 게시물 클릭할 때마다 쿼리를 무효화해서 refetch 한다?

✅ 각 게시물의 쿼리에 label을 설정한다

Query Key를 배열로 설정하기

PostDetail.jsx

14. 페이지네이션 Pagenation

현재 페이지 보여주기

Post.jsx

이동 버튼 만들기 / 페이지 이동하기

Posts.jsx

15. 데이터 프리페칭 Pre-fetching

pre-fetch의 목적

queryClient.prefetchQuery

Post.jsx

참고 : Previous Page의 데이터를 캐시에 유지하기

Post.jsx

16. isLoading vs isFetching

17. Mutation

useMutation

useMutation과 useQuery의 차이점

mutate 함수 사용

PostDetail.jsx

isError, isLoading, isSuccess

PostDetail.jsx

20. 정리

[React Query] 1. Query 생성하기 / Loading, Error 처리하기

0개의 댓글

참고 : `Previous Page`의 데이터를 캐시에 유지하기