react-query에서 만약 리스트 추가 했을때 리스트 갱신 하기

보통 이럴 경우에는 2가지 방법이 있는데
1. get을 한번 더 해서 리스트를 초기화한다.
2. useState를 활용, 기존 Array에 push 해서 setState를 해준다.

const queryClient = useQueryClient();
  const [userId, setUserId] = useState<number>(5);
  // Query
  const { isLoading, data, isError } = useQuery('users', getUserWithAxios, {
    staleTime: 5000,
  });

 const mutation = useMutation((data: User) => axios.post('http://localhost:8000/user', data), {
    onMutate: (data: User) => {
    
      const previousValue = queryClient.getQueryData('users');
      queryClient.setQueryData('users', (old: any) => {
        
        return [...old, data];
      });

      return previousValue;
    },
    onSuccess: (result, variables, context) => {
      setUserId(userId + 1);
    },
  });

useMutation Hook의 onMutate에서 setQueryData를 이용해 해당 키의 데이터를 수정해주는 방식.