Bartholomeas Posts - Answer Overflow

Bartholomeas

Explore posts from servers

RReactiflux PPrisma TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 7/22/2024 in #questions

Deploying Expressjs to Vercel.

2 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 5/6/2024 in #questions

Dockerizing t3 app with mysql database

3 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 4/9/2024 in #questions

TRPC Revalidating serverside queries

3 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 4/6/2024 in #questions

Refetching/revalidating server query with TRPC

[Nextjs 14 app Dir] Hello, i want to revalidate my query after form sumit but for some reason i dont know what am i doing wrong. As im newbie in trpc i want to just revalidate specified request "onSuccess" after mutation but it doesnt work. Thats the code: Here im fetching card of user (with .query),

const WizardPanel = async () => {
  const company = await api.user.getUserCompany.query();
  const card = await api.card.getBusinessCard.query();
  
  return (
    // <CardStylesProvider card={card}>
    <CardStylesStoreProvider card={card}>
      <div className="flex h-full flex-col">
        <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
          <h2 className="text-lg font-semibold">Kreator</h2>
...

const WizardPanel = async () => {
  const company = await api.user.getUserCompany.query();
  const card = await api.card.getBusinessCard.query();
  
  return (
    // <CardStylesProvider card={card}>
    <CardStylesStoreProvider card={card}>
      <div className="flex h-full flex-col">
        <div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
          <h2 className="text-lg font-semibold">Kreator</h2>
...

then im passing it to CardStylesStoreProvider where im creating zustand store with that:

export const CardStylesStoreProvider = ({ card, children }: CardStylesStoreProviderProps) => {
  const storeRef = useRef<StoreApi<CardStylesStore> | null>(null);
  if (!storeRef.current) {
    storeRef.current = createCardStylesStore(getInitialState(card));
  }

  return (
    <CardStylesStoreContext.Provider value={storeRef.current}>
      {children}
    </CardStylesStoreContext.Provider>
  );
};

export const CardStylesStoreProvider = ({ card, children }: CardStylesStoreProviderProps) => {
  const storeRef = useRef<StoreApi<CardStylesStore> | null>(null);
  if (!storeRef.current) {
    storeRef.current = createCardStylesStore(getInitialState(card));
  }

  return (
    <CardStylesStoreContext.Provider value={storeRef.current}>
      {children}
    </CardStylesStoreContext.Provider>
  );
};

Lastly onsubmit im updating my DB with data and want to revalidate this previous request but for some reason it doesnt work.. When i change route and back im getting old state (it only works on total F5 reload)

12 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 2/5/2024 in #questions

Error handling in nextjs13

2 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 11/25/2023 in #questions

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?

4 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 11/21/2023 in #questions

How to invalidate query in T3?

Hello, how can i invalidate query in TRPC like that?

const user = await api.user.getMe.query();

const user = await api.user.getMe.query();

When its query, but it does not have any queryKey, revalidate or something like that.. Im using T3 Stack with nextjs. Thanks!

13 replies

TTCTheo's Typesafe Cult

•Created by Bartholomeas on 11/3/2023 in #questions

Usage of NextAuth with Prisma and Nextjs Appdir

2 replies

Gaming

Programming