React Queryを使いこなすために試したこと

export const useOptimisticMutation = <TVariables, TData, TContext>(
  queryKey: [string, Record<string, unknown>?],
  fetcher: (params: TVariables, token: string) => Promise<TData | void>,
  updater?: ((oldData: TContext, newData: TVariables) => TContext) | undefined,
  options?: Omit<
    UseMutationOptions<TData | void, unknown, TVariables, TContext>,
    'onMutate' | 'onError' | 'onSettled'
  >,
) => {
  const { accessToken } = useAuthGuardContext();

  const queryClient = useQueryClient();

  return useMutation(
    async (params) => {
      return await fetcher(params, accessToken || '');
    },
    {
      // mutationが開始したタイミングで実行
      onMutate: async (data) => {
        // 事前に走っているリクエストがある場合はキャンセルする
        await queryClient.cancelQueries(queryKey);

        // 更新前の現在のデータを取得
        const previousData = queryClient.getQueryData<TContext>(queryKey);

        // 送信予定のデータと更新用の関数を使ってキャッシュデータを更新する
        // ここでUI上のデータは仮のデータに書き換えられる
        if (previousData && updater) {
          queryClient.setQueryData<TContext>(queryKey, () => {
            return updater(previousData, data);
          });
        }

        // データ取得前のデータを返す
        return previousData;
      },
      // APIへの更新が失敗した場合に旧データでロールバックする
      onError: (err, _, context) => {
        queryClient.setQueryData(queryKey, context);
        console.warn(err);
      },
      // すべての処理が終了した際にキャッシュを更新する
      // APIから取得成功した場合は仮のデータから取得したデータに更新
      // 失敗した場合は旧データに更新
      onSettled: () => {
        queryClient.invalidateQueries(queryKey);
      },
      ...options,
    },
  );
};

const useAddTask = (taskListId: string) =>
  useOptimisticMutation<Task, Task, Task[]>(
    ['tasks', { taskListId }],
    async (params, token) =>
      tasksRepository.createTask({ ...params, taskListId }, token),
    // 登録したタスクを現在のデータの先頭へ挿入した一覧を返す
    (oldData, newData) => [newData, ...oldData],
  );

const submitHandler = async (values: FormValues) => {
  try {
    await createTask.mutateAsync(
      {
        // idは仮のものを渡しておく
        id: Math.random().toString(),
        title: values.title,
      },
      {
        // 成功時にフォームをリセット
        onSuccess: () => form.reset(),
      },
    );
  } catch (error) {
    console.warn(error);

    const message =
      error instanceof Error ? error.message : 'error connecting to server';

    // トーストなどでエラーを返す
    showNotification({
      title: `Cannot add the task: ${values.title}`,
      message,
      autoClose: 3000,
      color: 'red',
    });
  }
};

// useUpdateTask
const useUpdateTask = (taskListId: string) =>
  useOptimisticMutation<Task, Task, Task[]>(
    ['tasks', { taskListId }],
    async (params, token) =>
      tasksRepository.updateTask({ ...params, taskListId }, token),
    // 該当するタスクの中身を変更したタスク一覧を返す
    (oldData, params) => {
      return [
        ...oldData.map((task) => {
          if (task.id === params.id) {
            return { ...task, ...params };
          } else {
            return task;
          }
        }),
      ];
    },
  );

// useDeleteTask
const useDeleteTask = (taskListId: string) =>
  useOptimisticMutation<Pick<Task, 'id'>, void, Task[]>(
    ['tasks', { taskListId }],
    async ({ id }, token) =>
      tasksRepository.deleteTask({ taskListId, taskId: id }, token),
    // 該当するタスクを取り除いたタスク一覧を返す
    (oldData, params) => [...oldData.filter(({ id }) => id !== params.id)],
  );