[리액트(React)] 텐스택쿼리(TanstackQuery) 기본세팅 및 CRUD

TanstackQuery?

기존 ReactQuery에서 v5부터 출시된 새로운 버전이다.

React에 국한되지 않고 다른 프레임워크(Vue, Svelt 등)에서도 사용 가능하게 나왔기 때문에 TanstackQuery로 이름이 바뀌었다.

기존 ReactQuery에서 많이 달라진 점은 없기 때문에 핵심 개념은 동일하다.

 

기본 세팅

1. install

$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query

 

2.Provider

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

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

사용할 컴포넌트 최상위를 Provider로 감싸주고 꼭 new QueryClient( )를 사용해 준다. 그 외의 하위 컴포넌트에선 useQueryClient( )를 사용한다.

 

3. useQueryClient

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

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

 

 

CRUD 적용해 보기

1. useQuery

useQuery는 서버에서 데이터를 불러올 때 사용한다. CRUD 중 R을 담당. CUD는 Mutation이 담당한다.

tanstack부터는 queryKey를 배열 형태로 사용한다. 

 

READE 예시코드

  //query와 마찬가지로 isLoading, isError등 다양한 상태를 반환해준다.
  const { isLoading, isError, data } = useQuery({
    queryKey: ['todos'], 
    queryFn: getTodo,
  });
  
  //getTodo
  export const getTodo = async () => {
  const req = await fetch('http://localhost:3000/api/todos', {
    method: 'GET',
  });
  const res = await req.json();
  return res.todos;
};

 

2. Mutation, invalidateQueries

 

CUD를 담당하는 Mutation은 mutate에 인자값을 받고 그 인자 값으로 mutationFn의 인자로 전달된다.

 

CREATE 예시코드

const queryClient = useQueryClient();

const addMutate = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
  
   const handSubmit = () => {
    const newTodo = {
      title,
      contents,
    };
    addMutate.mutate(newTodo);
  };
  
  //src/mutateFn.ts
  export const addTodo = async (payload: payload) => {
  await fetch('http://localhost:3000/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  });
};

 

Submit이 발생하면 newTodo를 addMutate.mutate의 인자로 전달 => 이 인자 값은 mutationFn: addTodo함수에 인자로 전달된다.

addTodo는 비동기 서버통신 로직이며 성공할 경우 invalidatateQueries로 기존의 queryKey가 'todos'인 데이터를 무효화시켜 다시 fetch 하기 때문에 서버와 client가 같은 상태를 보고 있을 수 있게 한다.

 

DELETE 예시코드

const deleteMutate = useMutation({
    mutationFn: deleteTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
  
  //이벤트함수
  const handDelete = (id: string) => {
	const payload = { id };
    deleteMutate.mutate(payload);
  };


//mutateFn.ts
export const deleteTodo = async (payload: { id: string }) => {
  await fetch(`http://localhost:3000/api/todos/`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  });
};

 

위 코드도 마찬가지로 id를 인자로 받아 mutateFn의 인자로 넘겨준다. 서버통신 할 때 객체로 받길 원했기 때문에 객체 형태로 id값을 넣어서 보내 주었다.

 

UDATE 예시코드

 //이벤트함수
 const handUpdate = (id: string) => {
    const findData = data.find((item: Todo) => item.id === id);
    const updateData = { ...findData, isDone: !findData.isDone };
    updateMutate.mutate(updateData);
  };
  
  //mutatation
    const updateMutate = useMutation({
    mutationFn: updateTodo,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  });
  
  
  //mutateFn.ts
  export const updateTodo = async (payload: Todo) => {
  await fetch('http://localhost:3000/api/todos/', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  });
};

 

update도 마찬가지로 id를 받아서 원하는 값을 변경 후 인자로 보내주었다. 중요한 건 수정 후 수정된 데이터를 보내는 것.

 

 

학습하는 단계이기 때문에  잘못된 정보일 수 있습니다.