React Query最新版本中useMutation的isLoading状态未定义问题

问题原因 #

React Query v4 版本对useMutation的状态字段做了重命名，原本的isLoading被替换为isPending，所以升级后继续使用isLoading会出现字段不存在的类型错误，运行时也会拿到undefined。

解决方法 #

直接将代码中的isLoading替换为isPending即可，包括解构赋值和返回对象的部分：

修改后的完整代码：

const useAddUserNote = (owner: string) => {
  const queryClient = useQueryClient();
  const { mutate, error, data, isPending } = useMutation({
    mutationFn: (note: CreateNoteData) => addUserNote(note),
    onSuccess: () => {
      queryClient.invalidateQueries(["allUserNotes", owner]);
    },
  });

  if (error instanceof Error) error;

  return { mutate, data, error, isPending };
};

补充说明 #

除了isLoading改为isPending，React Query v4 对useMutation的状态还有一些其他调整，比如新增了isIdle状态（表示mutation还未触发），但解决当前问题的核心就是替换字段名。

内容的提问来源于stack exchange，提问作者Sefa