Reactjs 反应查询变异类型脚本

我只是在玩弄你

用打字稿

我的意思是我做了第一次尝试

这条路对吗

const useCreateTodo = () => {
  const queryClient = useQueryClient();
  return useMutation(
    (todo: TodoDto) => axios.post(`${URL}/todos`, todo).then((res) => res.data),
    {
      onMutate: async (newTodo: TodoDto) => {
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries("todos");

        // Snapshot the previous value
        const previousTodos = queryClient.getQueryData("todos");

        // Optimistically update to the new value
        queryClient.setQueryData<TodoDto[] | undefined>("todos", (old) =>
          old ? [...old, newTodo] : old
        );

        // Return a context object with the snapshotted value
        return { previousTodos };
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (
        err,
        newTodo,
        context:
          | {
              previousTodos: unknown;
            }
          | undefined
      ) => {
        queryClient.setQueryData(
          "todos",
          context ? context.previousTodos : context
        );
      },
      // Always refetch after error or success:
      onSettled: () => {
        queryClient.invalidateQueries("todos");
      },
    }
  );
};

const useCreateTodo=（）=>{
const queryClient=useQueryClient（）；
回归突变(
（todo:TodoDto）=>axios.post（`${URL}/todos`，todo）。然后（（res）=>res.data），
{
onMutate:async（newTodo:TodoDto）=>{
//取消任何传出的重新蚀刻（以便它们不会覆盖我们的乐观更新）
等待queryClient.cancelQueries（“TODO”）；
//快照上一个值
const previousTodos=queryClient.getQueryData（“todos”）；
//乐观地更新到新值
queryClient.setQueryData（“todos”，旧）=>
老的？[…老的，新的]：老的
);
//返回具有快照值的上下文对象
返回{previousTodos}；
},
//如果变异失败，使用onMutate返回的上下文回滚
onError：(
犯错误
纽托多，
背景：
| {
以前的托多：未知；
}
|未定义
) => {
queryClient.setQueryData(
“待办事项”，
context？context.previousTodos:context
);
},
//错误或成功后始终重新蚀刻：
已设置：（）=>{
queryClient.invalidateQueries（“TODO”）；
},
}
);
};

对不起：）

---

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是业界标准的虚拟文本

乐观更新对于类型推断来说有点棘手。现在有一个例子来说明这个确切的情况

从这个例子来看：

const addTodoMutation = useMutation(
    newTodo => axios.post('/api/data', { text: newTodo }),
    {
      // When mutate is called:
      onMutate: async (newTodo: string) => {
        setText('')
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries('todos')

        // Snapshot the previous value
        const previousTodos = queryClient.getQueryData<Todos>('todos')

        // Optimistically update to the new value
        if (previousTodos) {
          queryClient.setQueryData<Todos>('todos', {
            ...previousTodos,
            items: [
              ...previousTodos.items,
              { id: Math.random().toString(), text: newTodo },
            ],
          })
        }

        return { previousTodos }
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (err, variables, context) => {
        if (context?.previousTodos) {
          queryClient.setQueryData<Todos>('todos', context.previousTodos)
        }
      },
      // Always refetch after error or success:
      onSettled: () => {
        queryClient.invalidateQueries('todos')
      },
    }
  )

const addtodomutate=useMutation(
newTodo=>axios.post（'/api/data'，{text:newTodo}），
{
//调用mutate时：
onMutate:async（newTodo:string）=>{
setText（“”）
//取消任何传出的重新蚀刻（以便它们不会覆盖我们的乐观更新）
等待queryClient.cancelQueries（'TODO'）
//快照上一个值
const previousTodos=queryClient.getQueryData（'todos'）
//乐观地更新到新值
if（以前的TODOS）{
queryClient.setQueryData（'todos'{
…以前的事，
项目：[
…以前的todos.items，
{id:Math.random（）.toString（），text:newTodo}，
],
})
}
返回{previousTodos}
},
//如果变异失败，使用onMutate返回的上下文回滚
onError：（错误、变量、上下文）=>{
if（上下文？.previousTodos）{
queryClient.setQueryData（'todos'，context.previousTodos）
}
},
//错误或成功后始终重新蚀刻：
已设置：（）=>{
queryClient.invalidateQueries（'todos'）
},
}
)

有两种解释：

• 基本上，您只想在

  onMutate

  上设置类型定义，这样类型推断将适用于

  mutateFn

  （

  newTodo

  被推断）以及

  onError

  中的上下文
• 为

  getQueryData

  添加泛型，以便键入

  previousTodos

  。不过，您不需要与

  未定义的

  联合-react查询将为您完成这项工作

• setQueryData

  的函数更新程序很复杂，因为它要求您返回数组，但是

  old

  可以不定义。我更喜欢使用

  getQueryData

---

在自定义挂钩内调用

useQueryClient

是否可以，如下所示？const useCreateTodo=（）=>{'const queryClient=useQueryClient（）；'return useMutation（…）；}是的，绝对是

useQueryClient

只是反应上下文：）