[ 목차 ]
사용자에게 최신 데이터를 보여주려는 노력
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',
});
'React' 카테고리의 다른 글
[React] 컴포넌트를 어떻게 잘 구현할 수 있을까? (0) | 2023.07.29 |
---|---|
[React] 리액트 컴포넌트 최적화해보기 (with. useCallback, React.memo) (0) | 2023.06.22 |
[React] React-Query 상태(Status) & StaleTime, CacheTime 정리 (0) | 2023.01.18 |
[React] React-Query를 이용해서 페이지네이션 구현하기 (0) | 2022.11.27 |
[React] React + Swiper.js를 이용해서 카드 UI를 인라인 형식으로 보여주기 (0) | 2022.07.29 |