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
Bartholomeas12mo ago
In typical endpoint it was no problem beacuse i was able to just revalidate specified tag/path :/
Circus
Circus7mo ago
Did you ever find a solution for TRPC? I'm having similar difficulties
Want results from more Discord servers?
Add your server