johnjohn4632 Posts - Answer Overflow

johnjohn4632

•Created by johnjohn4632 on 4/13/2023 in #questions

Optimistic update

I'm encountering an issue where, upon updating the data, the response updates quickly with the new list but then reverts back to the old value after a few milliseconds, before finally returning to the new value.

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();
        },
    });
};

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();
        },
    });
};

1 replies

TTCTheo's Typesafe Cult

•Created by johnjohn4632 on 3/9/2023 in #questions

How to get type inference from Prisma with Zod

my question is how to type from prisma User model using zod-prisma package. I was trying to post the full question here but because it is too long and I do not have enough characters I will put a link so you can read all the details. https://stackoverflow.com/questions/75680609/type-inference-from-prisma-with-zod

1 replies

Gaming

Programming