1. useConfig Hook

import { QueryKey, useQueryClient } from "react-query";

interface ConfigProps <T> {
  queryKey: QueryKey,
  callback: (target: Partial<T>, old?: T[]) => T[]
}

const useConfig = <T> ({queryKey, callback}: ConfigProps<T>) => {
  const queryClient = useQueryClient()
  return {
    onMutate: async (target: Partial<T>) => {
      await queryClient.cancelQueries(queryKey);
      // 保存前一次状态的快照
      const previousItems = queryClient.getQueryData(queryKey);
      // 乐观更新修改数据
      queryClient.setQueryData(
        queryKey,
        (old?: T[]) => callback(target, old)
      );
      // 返回前一次状态的快照，以便发生错误时需要回滚所使用
      return { previousItems };
    },
    // 出错时，使用前一次状态的快照重新设置当前缓存数据
    onError: (error: unknown, newItem: Partial<T>, context: unknown) => {
      queryClient.setQueryData(
        queryKey,
        (context as { previousItems: T[] }).previousItems
      );
    },
  }
}

export default useConfig

2. useEditProject Hook

useMutation(
    (params: Partial<Project>) =>
      client(`/projects/${params.id}`, {
        method: "PATCH",
        data: params,
     }),
     useOptimisticOption<Project>({
	    queryKey,
	    callback: (target, old) => (old?.map(item => item.id === target.id ? { ...item, ...target } : item) || [])
	 }) 
);