[React] React-Query 기본 사용법 정리 (useQuery, useMutation)

[ 목차 ]
사용자에게 최신 데이터를 보여주려는 노력
useQuery
useMutation
queryClient.invalidQueries

 

사용자에게 최신 데이터를 보여주려는 노력

React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공합니다.

 

 

1. Remount

컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다.

refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

2. Window refocus

윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다.

refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

3. Network reconnect

네트워크가 다시 연결되면, 새로운 데이터를 갱신합니다.

refetchOnReconnect 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

 

그 밖에 주기적으로 데이터를 새로운 데이터를 갱신할 수 있는 refetchInterval, refetchIntervalInBackground 등의 옵션을 제공하고 있습니다.

 

 

 

기본적으로 사용해보기

Query 함수에 아래의 API를 이용할 예정입니다.

// apis.ts

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}


// 기본 API들을 정의합니다.
export const getPost = (id: number): Promise<Post> => {
  return axios.get(`/posts/${id}`);
};

export const createPost = (payload: Omit<Post, "id">): Promise<Post> => {
  return axios.post("/posts", payload);
};

export const updatePost = (payload: Post) => {
  return client.put(`/posts/${payload.id}`, payload);
};

 

 

 

 

반응형

 

 

 

useQuery

useQuery를 이용해서 데이터를 fetching 할 수 있습니다.

HTTP GET 요청을 할 때, 주로 사용합니다.

 

useQuery는 queryKey, queryFn, options를 이용해서 코드를 작성할 수 있습니다.

 

queryKey는 Query를 Unique하게 지칭할 배열,

queryFn은 Promise를 리턴하는 함수,

options는 다양한 옵션들을 전달할 수 있는 객체

 

 

// QueryFn을 async/await를 이용해서 작성

const { data, error, isLoading } = useQuery(['getPost'], async () => {
  // getPost는 idx값을 받아서 Post 데이터를 가져오는 API
  const data = await getPost(1);

  return data;
});

// QueryFn을 Promise.prototype.then을 이용해서 작성

const { data, error, isLoading } = useQuery(["/getPost"], () =>
	getPost(1).then((res) => res)
);

// useQuery를 객체 형태로 작성

const { data, error, isLoading } = useQuery({
	queryKey: ["/getPost"], 
    queryFn: () => getPost(1).then((res) => res),
    refetchOnMount: false
});

 

 

 

useMutation

서버의 데이터를 변경할 때 사용합니다.

HTTP POST, PUT, DELETE 요청을 사용할 수 있습니다.

 

mutationFn은 queryFn처럼 Promise를 리턴하는 비동기 함수입니다.

파라미터를 전달받을 수 있습니다.

 

mutationFn 파라미터는 useMutation의 리턴값인 mutate 함수의 인자로 전달됩니다.

mutationFn에서는 어떻게 동작할지 정의만 하고, mutate 함수를 통해 나중에 실행되는 것입니다.

 

// useMutation 기본 사용법
const { mutate } = useMutation((post: Omit<Post, "id">) => createPost(post), {
    onSuccess: () => { 	// mutate가 정상적으로 실행되면, 함수를 실행합니다.
		console.log("createPost success");
    },
    onError: () => { 	// mutate가 실패하면, 함수를 실행합니다.
    	console.log("createPost error");
    }
});


const post = {
	title: 'title from 123',
    body: 'body from 123',
    userId: 123
};

// useQuery처럼 정의된 함수가 바로 실행되는 것이 아니라, mutate 함수가 실행될 때 실행합니다.
mutate(post);

 

 

 

 

 

queryClient.invalidQueries

queryClient 객체는 다양한 메소드들을 제공하고 있는데요.

useQueryClient hook 함수를 통해 가져올 수 있습니다.

 

많은 메소드 중에서, invalidQueries 메소드는 자주 쓰입니다.

invalidQueries는 전달받은 queryKey의 Query를 invalid 처리하고, 해당 Query가 active할 경우 다시 refetch 해주는데요.

특정 API 호출 후, 데이터를 갱신하고 싶을 때 사용할 수 있습니다.

 

 

const POST_KEY = ['post'];

const { data: post1 } = useQuery(POST_KEY, () => getPost(1).then((res) => res);
const { mutate } = useMutation((post: Post) => update(post));

const queryClient = useQueryClient();

mutate({
	id: 1,
	userId: 2,
    title: 'title from 2',
    body: 'body from 2',
}, {
	onSuccess: () => queryClient.invalidQueries(POST_KEY);
});

mutate 함수를 실행할 때, option에 onSuccess 함수를 전달한 코드입니다.

useMutation의 option에 onSuccess 함수를 전달할 수도 있습니다.

 

 

 

const POST_KEY = ['post'];

const { data: post1 } = useQuery(POST_KEY, () => getPost(1).then((res) => res);
const { mutate } = useMutation((post: Post) => update(post), {
	onSuccess: () => queryClient.invalidQueries(POST_KEY);
});

const queryClient = useQueryClient();

mutate({
	id: 1,
	userId: 2,
    title: 'title from 2',
    body: 'body from 2',
});