Optimistic update

import { api } from "@/utils/api";
import type { Category } from "@prisma/client";


export const useMutationUpdateCategory = () => {
    const utils = api.useContext();

    return api.category.update.useMutation({
        onMutate: async (variables) => {
            // Cancel any outgoing refetches (so they don't overwrite(race condition) our optimistic update)
            await utils.category.list.cancel();
            const previousQueryData = utils.category.list.getData();

            const newCategory: Category = {
                id: crypto.randomUUID(),
                name: variables.name,
                slug: variables.name,
                createdAt: new Date(),
                updatedAt: new Date(),
            };

            utils.category.list.setData(undefined, (oldQueryData) => {
                if (oldQueryData) {
                    const filteredData =
                        oldQueryData.filter((item) => item.slug !== variables.slug) ?? [];
                    const elementIndex =
                        oldQueryData.findIndex((item) => item.slug === variables.slug) ??
                        -1;
                    filteredData.splice(elementIndex, 0, newCategory);

                    return filteredData;
                }
            });

            // Return a function to be used in the onError callback
            return () => utils.category.list.setData(undefined, previousQueryData);
        },

        onError: (error, variables, rollback) => {
            // If there is an error, rollback the mutation
            if (rollback) {
                rollback();
            }
        },

        onSettled: async (data, variables, context) => {
            await utils.category.list.invalidate();
        },
    });
};