React Query를 통한 데이터 패칭, 캐싱, 동기화 방법 총정리

const { data, isLoading, error } = useQuery('todos', fetchTodos);

// 결과: 

// isLoading이 true일 때: data는 undefined, error는 null 

// 데이터 로드 성공 시: data는 fetched data, isLoading은 false, error는 null 

// 에러 발생 시: data는 undefined, isLoading은 false, error는 Error 객체

const mutation = useMutation((newTodo) => {

    return axios.post('/todos', newTodo);

 });

 // 사용: 

 mutation.mutate({ title: 'New Todo' });

// 결과:

 // mutation.isLoading: true during the mutation 

// mutation.isError: true if an error occurred 

// mutation.isSuccess: true if the mutation succeeded

import { QueryClient, QueryClientProvider } from 'react-query';

 const queryClient = new QueryClient();

 function App() {

  return (

    <QueryClientProvider client={queryClient}>

      {/* 애플리케이션 컴포넌트들 */}

    </QueryClientProvider>

  );

 }

// 결과: 이 설정으로 모든 하위 컴포넌트에서 React Query 기능을 사용할 수 있습니다.

const { data, isLoading, error } = useQuery('todos', fetchTodos);

const mutation = useMutation((newTodo) => {

   return axios.post('/todos', newTodo);

});

import { useQuery } from 'react-query';

import axios from 'axios';

const fetchTodos = () => axios.get('https://jsonplaceholder.typicode.com/todos').then(res => res.data);

function Todos() {

 const { isLoading, error, data } = useQuery('todos', fetchTodos);

 if (isLoading) return 'Loading...';

 if (error) return 'An error has occurred: ' + error.message;

 return (

   <ul>

     {data.slice(0, 5).map(todo => (

       <li key={todo.id}>{todo.title}</li>

     ))}

   </ul>

 );

}

// 결과 (성공 시):

// • delectus aut autem

// • quis ut nam facilis et officia qui

// • fugiat veniam minus

// • et porro tempora

// • laboriosam mollitia et enim quasi adipisci quia provident illum

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

import axios from 'axios';

const addTodo = (newTodo) => axios.post('https://jsonplaceholder.typicode.com/todos', newTodo);

function AddTodo() {

 const queryClient = useQueryClient();

 const mutation = useMutation(addTodo, {

   onSuccess: () => {

     queryClient.invalidateQueries('todos');

   },

 });

 const handleSubmit = (event) => {

   event.preventDefault();

   const newTodo = { title: event.target.todo.value, completed: false };

   mutation.mutate(newTodo);

 };

 return (

   <form onSubmit={handleSubmit}>

     <input type="text" name="todo" />

     <button type="submit">Add Todo</button>

     {mutation.isLoading ? 'Adding todo...' : ''}

     {mutation.isError ? `An error occurred: ${mutation.error.message}` : ''}

     {mutation.isSuccess ? 'Todo added!' : ''}

   </form>

 );

}

// 결과:

// 폼 제출 시 'Adding todo...' 표시

// 성공 시 'Todo added!' 표시 및 todos 쿼리 무효화 (새로고침)

// 실패 시 에러 메시지 표시

const queryClient = useQueryClient();

// 'todos' 쿼리를 무효화

queryClient.invalidateQueries('todos');

// 결과: 'todos' 쿼리가 무효화되고 백그라운드에서 새로운 데이터를 fetch합니다.

const { isError, error } = useQuery('todos', fetchTodos, {

 retry: 3,

 onError: (error) => {

   console.log('An error occurred:', error);

 },

});

if (isError) {

 return <div>Error: {error.message}</div>;

}

// 결과:

// 에러 발생 시 콘솔에 에러 로그 출력

// 3번까지 재시도 후 실패 시 에러 메시지를 화면에 표시

// 단순 문자열 키

const { data: todos } = useQuery('todos', fetchTodos);

// 배열 형태의 키

const { data: todo } = useQuery(['todo', 5], () => fetchTodoById(5));

// 객체를 포함한 배열 키

const { data: doneTodos } = useQuery(['todos', { status: 'done' }], () => fetchTodosByStatus('done'));

// 결과: 각 쿼리는 고유한 키로 식별되어 독립적으로 캐시 및 관리됩니다.

const { data, isLoading, error, isPreviousData } = useQuery(

 ['todos', page],

 () => fetchTodoPage(page),

 { keepPreviousData: true }

);

// 결과: 페이지 변경 시 새 데이터를 로드하면서 이전 데이터를 유지합니다.

const {

 data,

 fetchNextPage,

 hasNextPage,

 isFetchingNextPage,

} = useInfiniteQuery('todos', fetchTodos, {

 getNextPageParam: (lastPage, pages) => lastPage.nextCursor,

});

// 결과: 스크롤 시 추가 데이터를 로드하며, 모든 페이지 데이터를 누적하여 유지합니다.

const queryClient = useQueryClient();

queryClient.prefetchQuery('todos', fetchTodos);

// 결과: 'todos' 데이터가 백그라운드에서 미리 로드되어 캐시에 저장됩니다.

// 결과: 스크롤 시 추가 데이터를 로드하며, 모든 페이지 데이터를 누적하여 유지합니다.

const queryClient = useQueryClient();

const mutation = useMutation(updateTodo, {

 onMutate: async (newTodo) => {

   await queryClient.cancelQueries('todos');

   const previousTodos = queryClient.getQueryData('todos');

   queryClient.setQueryData('todos', old => [...old, newTodo]);

   return { previousTodos };

 },

 onError: (err, newTodo, context) => {

   queryClient.setQueryData('todos', context.previousTodos);

 },

 onSettled: () => {

   queryClient.invalidateQueries('todos');

 },

});

// 결과:

// 1. 변경 즉시 UI 업데이트

// 2. 에러 시 이전 상태로 롤백

// 3. 성공 여부와 관계없이 서버 데이터와 동기화

const { isLoading, isError, error, data, isFetching } = useQuery('todos', fetchTodos);

if (isLoading) return 'Loading...';

if (isError) return `An error occurred: ${error.message}`;

return (

   <div>

       {data.map((todo) => (

           <Todo key={todo.id} todo={todo} />

       ))}

       {isFetching && 'Updating...'}

   </div>

);