react-query를 통해서, post 요청을 보내고 응답받은 값을 화면에 보여주고자 할 때 아래와 같이 작업한다. 이 방법의 장점은 1번의 network 요청만 이루어진다는 것 이다.
post 요청과 즉시에 get 요청을 하는 invalidateQueries
과는 달리 setQueryData
는 저장하고자 하는 값을 서버로 보냄과 동시에 react-query에서 캐싱하고 있는 값을 변경함으로써 새로운 데이터가 화면에 보여진다.
추가되는 값을 클라이언트 단에서 가지고 있기 때문에 가능한 방법이며, 리덕스 썽크 함수에서 dispatch
를 통해 상태를 변경하는 방법하면서 post 요청을 보내는 구성과 비슷하다.
redux-thunk
const __addTodoThunk = async (data) => (dispatch) => {
try {
// .. 중략
await axios.post('/', data)
dispatch(addTodo(data))
} catch(e){
// ...
}
}
useAddTodo.ts
// fetcher
const addCard = (cardInfo: TyCard) => {
return todoApi.addTodo(cardInfo);
};
// hook
export const useAddCard = () => {
const queryClient = useQueryClient();
return useMutation(addCard, {
onSuccess: ({ data }: { data: TyCard }) => {
queryClient.setQueryData<TyCard[] | undefined>("allTodos", (preCache) => {
if (!preCache) return;
return [...preCache, data];
});
},
});
};
get 이 아닌 post는 useQuery
말고 useMutaion
을 사용한다. 1번째 파라미터에는 'key'가 들어가고 2번째 파라미터는 fetcter, 3번째 파라미터에는 options이 들어간다. react-query
에서 제공하는 api를 사용하기 위해 useQeuryClient
를 사용했다.
Todos.tsx
// ... 중략
const { mutate } = useAddCard();
// ... 중략
const onSubmitHandler = useCallback(
(e) => {
e.preventDefault();
mutate(card);
},
[card, mutate]
);
만든 hook을 사용해보자. useAddCard
에서 mutate
를 꺼내서 핸들러 안에서 사용한다. 핸들러는 input의 값을 submit 한다.