Theo's Typesafe Cult•7mo ago

Revalidating tRPC server request/page after email change

Hello, i want to revalidate request where im getting user by his e-mail after e-mail change in settings, but have no idea how. I have that request for getting currently logged in user profile:

 getProfile: protectedProcedure.query(
    async ({ ctx }): Promise<UserProfile> => {
      const { email, avatarId } = ctx.session.user;

      const avatarUrl = await ctx.db.file.findFirst({
        where: { key: avatarId },
        select: { url: true },
      });

      if (!email)
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Nie mogliśmy znaleźć obecnie zalogowanego użytkownika.",
        });

      const user = await ctx.db.user.findFirst({
        where: { email },
        include: { company: true },
      });

      if (!user) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Użytkownik o tym adresie e-mail nie istnieje.",
        });
      }

      const { name, firstName, lastName, description } = user;

      return {
        name,
        email,
        firstName,
        lastName,
        description,
        avatarUrl: avatarUrl?.url ?? null,
      };
    },
  ),

 getProfile: protectedProcedure.query(
    async ({ ctx }): Promise<UserProfile> => {
      const { email, avatarId } = ctx.session.user;

      const avatarUrl = await ctx.db.file.findFirst({
        where: { key: avatarId },
        select: { url: true },
      });

      if (!email)
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Nie mogliśmy znaleźć obecnie zalogowanego użytkownika.",
        });

      const user = await ctx.db.user.findFirst({
        where: { email },
        include: { company: true },
      });

      if (!user) {
        throw new TRPCError({
          code: "NOT_FOUND",
          message: "Użytkownik o tym adresie e-mail nie istnieje.",
        });
      }

      const { name, firstName, lastName, description } = user;

      return {
        name,
        email,
        firstName,
        lastName,
        description,
        avatarUrl: avatarUrl?.url ?? null,
      };
    },
  ),

and this is my component where im fetching this request:

const Settings = async () => {
  const userProfile = await api.user.getProfile.query();

  return (
    <div className="flex w-full flex-col gap-12 space-y-6 lg:flex-row-reverse">
      <ImageUploader />

      <div className="flex w-full flex-col gap-4">
        <ChangeProfileDataForm user={userProfile} />
        <Separator className="my-8" />
        <ChangePasswordForm />
        <Separator className="my-8" />
        <ChangeEmailForm email={userProfile.email} />
      </div>
    </div>
  );
};

const Settings = async () => {
  const userProfile = await api.user.getProfile.query();

  return (
    <div className="flex w-full flex-col gap-12 space-y-6 lg:flex-row-reverse">
      <ImageUploader />

      <div className="flex w-full flex-col gap-4">
        <ChangeProfileDataForm user={userProfile} />
        <Separator className="my-8" />
        <ChangePasswordForm />
        <Separator className="my-8" />
        <ChangeEmailForm email={userProfile.email} />
      </div>
    </div>
  );
};

in <ChangeEmailForm/> component im changing user email. After change im getting from getProfile request because it doesnt see user in DB with new e-mail. Is there any way to do it or ill need to move getProfile to client request?

2 Replies

Bartholomeas•7mo ago

In typical endpoint it was no problem beacuse i was able to just revalidate specified tag/path :/

Circus•2mo ago

Did you ever find a solution for TRPC? I'm having similar difficulties

Gaming

Programming

Revalidating tRPC server request/page after email change