optimistic update for complex data structure

 const updateRecipe = api.recipe.update.useMutation({
        onMutate: async (recipe) => {
            await utils.recipe.getQ.cancel();

            const newRecipe = {
                ...recipe,
                id: recipeData!.id,
                userId: recipeData!.userId,
                openedAt: recipeData!.openedAt,
            };

            console.log(newRecipe);

            utils.recipe.getQ.setData({ id: recipeId }, newRecipe);

            return { recipeData };
        },

        onSettled: () => {
            utils.recipe.getQ.invalidate();
        },
    });

 const updateRecipe = api.recipe.update.useMutation({
        onMutate: async (recipe) => {
            await utils.recipe.getQ.cancel();

            const newRecipe = {
                ...recipe,
                id: recipeData!.id,
                userId: recipeData!.userId,
                openedAt: recipeData!.openedAt,
            };

            console.log(newRecipe);

            utils.recipe.getQ.setData({ id: recipeId }, newRecipe);

            return { recipeData };
        },

        onSettled: () => {
            utils.recipe.getQ.invalidate();
        },
    });

const MyComponent = () => {
  const listPostQuery = api.post.list.useQuery();

  const utils = api.useContext();
  const postCreate = api.post.create.useMutation({
    async onMutate(newPost) {
      // Cancel outgoing fetches (so they don't overwrite our optimistic update)
      await utils.post.list.cancel();

      // Get the data from the queryCache
      const prevData = utils.post.list.getData();

      // Optimistically update the data with our new post
      utils.post.list.setData(undefined, (old) => [...old, newPost]);

      // Return the previous data so we can revert if something goes wrong
      return { prevData };
    },
    onError(err, newPost, ctx) {
      // If the mutation fails, use the context-value from onMutate
      utils.post.list.setData(undefined, ctx.prevData);
    },
    onSettled() {
      // Sync with server once mutation has settled
      utils.post.list.invalidate();
    },
  });
};

const MyComponent = () => {
  const listPostQuery = api.post.list.useQuery();

  const utils = api.useContext();
  const postCreate = api.post.create.useMutation({
    async onMutate(newPost) {
      // Cancel outgoing fetches (so they don't overwrite our optimistic update)
      await utils.post.list.cancel();

      // Get the data from the queryCache
      const prevData = utils.post.list.getData();

      // Optimistically update the data with our new post
      utils.post.list.setData(undefined, (old) => [...old, newPost]);

      // Return the previous data so we can revert if something goes wrong
      return { prevData };
    },
    onError(err, newPost, ctx) {
      // If the mutation fails, use the context-value from onMutate
      utils.post.list.setData(undefined, ctx.prevData);
    },
    onSettled() {
      // Sync with server once mutation has settled
      utils.post.list.invalidate();
    },
  });
};

const newStep = api.step.create.useMutation({
        onSuccess: (s) => {
            if (s) {
                setSteps([...steps, s]);
                toast.success("Step created");
            }
        },

        onSettled: () => {
            utils.recipe.getQ.invalidate();
        },

        onMutate: async (step) => {
            await utils.recipe.getQ.cancel();

            const fRecipe = {
                id: recipeData!.id,
                openedAt: recipeData!.openedAt,
                title: recipeData!.title,
                description: recipeData!.description,
                userId: recipeData!.userId,
                steps: [...recipeData!.steps, step],
                ingredients: recipeData!.ingredients,
            };

            utils.recipe.getQ.setData({ id: recipeId }, fRecipe);

            return { recipeData };
        },

        onError: (error) => {
            toast.error(error.message);
        },
    });

const newStep = api.step.create.useMutation({
        onSuccess: (s) => {
            if (s) {
                setSteps([...steps, s]);
                toast.success("Step created");
            }
        },

        onSettled: () => {
            utils.recipe.getQ.invalidate();
        },

        onMutate: async (step) => {
            await utils.recipe.getQ.cancel();

            const fRecipe = {
                id: recipeData!.id,
                openedAt: recipeData!.openedAt,
                title: recipeData!.title,
                description: recipeData!.description,
                userId: recipeData!.userId,
                steps: [...recipeData!.steps, step],
                ingredients: recipeData!.ingredients,
            };

            utils.recipe.getQ.setData({ id: recipeId }, fRecipe);

            return { recipeData };
        },

        onError: (error) => {
            toast.error(error.message);
        },
    });

 create: protectedProcedure
        .input(z.object({ recipeId: z.string(), step: z.string() }))
        .mutation(async ({ ctx, input }) => {
            const recipe = await ctx.db.recipe.findUnique({
                where: {
                    id: input.recipeId,
                },
                include: {
                    steps: true,
                },
            });

            if (!recipe) {
                return null;
            }

            if (recipe.userId !== ctx.session.user.id) {
                return null;
            }

            if (recipe.steps.length >= 20) {
                throw new Error("Max steps reached");
            }

            const step = await ctx.db.step.create({
                data: {
                    recipeId: input.recipeId,
                    step: input.step,
                },
            });

            return step;
        }),

 create: protectedProcedure
        .input(z.object({ recipeId: z.string(), step: z.string() }))
        .mutation(async ({ ctx, input }) => {
            const recipe = await ctx.db.recipe.findUnique({
                where: {
                    id: input.recipeId,
                },
                include: {
                    steps: true,
                },
            });

            if (!recipe) {
                return null;
            }

            if (recipe.userId !== ctx.session.user.id) {
                return null;
            }

            if (recipe.steps.length >= 20) {
                throw new Error("Max steps reached");
            }

            const step = await ctx.db.step.create({
                data: {
                    recipeId: input.recipeId,
                    step: input.step,
                },
            });

            return step;
        }),

model Step {
    id       String @id @default(cuid())
    step     String
    recipeId String
    recipe   Recipe @relation(fields: [recipeId], references: [id], onDelete: Cascade)

    @@index([recipeId])
}

model Step {
    id       String @id @default(cuid())
    step     String
    recipeId String
    recipe   Recipe @relation(fields: [recipeId], references: [id], onDelete: Cascade)

    @@index([recipeId])
}