[TIL] 23/12/20 React 쿼리 조금 더.. mutation 공통부로 빼기

지금 사실은 next js 구간이다.. (?)

언제해 공부..

TIL

React query mutation 공통 함수로 빼기

오늘의 에러 : useMutation 같은 React hook은 top level에서 사용할 수 없다. 는 에러  

src\query\useTodoQuery.js
  Line 5:31:  React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
                          react-hooks/rules-of-hooks

 

오늘의 실수 () => 이것을 안붙인 것..

아직도 개념이 안잡혀서 그런 듯ㅠ.ㅠ

 

[공통으로 뺀 부분]

src/hook/useTodosQuery.js

import { addTodo, removeTodo, switchTodo } from "../api/todos";
import { useMutation } from "react-query";

export const useAddMutation = () => useMutation(addTodo);
export const useRemoveMutation = () => useMutation(removeTodo);
export const useSwitchMutation = () => useMutation(switchTodo);

 

useAddMutation 이라는 함수를 만들어서 전체 코드에서 공용으로 쓸 수있게 내보내(export) 주자.

이 함수는 useMutation(addTodo) 구문을 리턴하는 함수이다.

여기서 ()=> 를 빼니깐.. 그냥 useMutation(addTodo)  이게 실행되어 버려서 발생한 에러이다.

수업 때 들었는데도 까먹고 빼버렸다.^.^ 

 

매개변수로 함수를 넘길때에도 실행이되게하는것이 아닌 함수를 넘기게 하는 부분이 이거랑 같다.

onClick= {()=>addTodoHandler()}

 

하나는 알고 둘은 몰랐던 것이다..^0^

 

[어쨌든 사용부분]

src/redux/components/Input/Input.jsx

const { mutate: addMutate } = useAddMutation();

// todo를 추가하는 reducer 호출
// 인자 : payload
addMutate(newTodo, {
  onSuccess: (data) => {
    console.log("data", data);
    queryClient.invalidateQueries(QUERY_KEYS.TODOS);
  },
});

 

mutate를 실행해 줄 때 onSuccess 부분을 추가해 줄 수 있다~