nickparks Posts - Answer Overflow

nickparks

•Created by nickparks on 7/15/2024 in #questions

T3 Turbo Auth Proxy - Correct Setup Help

Hi Folks, Trying my hand at the T3 Turbo repo to get a cross platform app setup. Hopefully someone can help. I have generally kept everything as is but running into issues trying to login to Discord on the mobile sim. Here’s what I’ve done: - repo pulled locally and pnpm installed + db pushed - deployed auth relay on vercel - setup app on Discord - redirect url on discord = {vercel url}/r/callback/discord - env variables set (both on vercel and locally): secret and discord app id from discord, url = vercel url Am I missing something here? Been a few hours trying to work out what i am missing but the logs are not very discriptive on the local react app or the vercel auth deployment.

2 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 9/13/2023 in #questions

TRPC / Prisma findMany not showing properties in auto completion

4 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 4/28/2023 in #questions

Any ideas why TRPC doesnt find the mutation?

I have am trying to use a create many Prisma call in a TRPC mutation as follows:

import { z } from "zod";

import { clerkClient } from "@clerk/nextjs/server";
import { filterUserForClient } from "~/server/helpers/filterUserForClient";
import type { TeamMember } from "@prisma/client";

import {
  createTRPCRouter,
  privateProcedure,
  publicProcedure,
} from "~/server/api/trpc";
import { TRPCError } from "@trpc/server";

export const activityRouter = createTRPCRouter({
  startRace: privateProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      try {
        const race = await ctx.prisma.race.findFirst({
          where: { id: input.id },
        });

        const createMany = await ctx.prisma.activeTask.createMany({
          data: [
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
          ],
          skipDuplicates: true,
        });

        return createMany;
      } catch (error) {
        console.log(error);
      }
    }),
});

import { z } from "zod";

import { clerkClient } from "@clerk/nextjs/server";
import { filterUserForClient } from "~/server/helpers/filterUserForClient";
import type { TeamMember } from "@prisma/client";

import {
  createTRPCRouter,
  privateProcedure,
  publicProcedure,
} from "~/server/api/trpc";
import { TRPCError } from "@trpc/server";

export const activityRouter = createTRPCRouter({
  startRace: privateProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      try {
        const race = await ctx.prisma.race.findFirst({
          where: { id: input.id },
        });

        const createMany = await ctx.prisma.activeTask.createMany({
          data: [
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
            {
              taskId: "clgzk25a30000q74rrov7jvnm",
              teamId: "clgzep8kl0000q7vkbngr1ecm",
            },
          ],
          skipDuplicates: true,
        });

        return createMany;
      } catch (error) {
        console.log(error);
      }
    }),
});

Which is exported via the following router:

export const appRouter = createTRPCRouter({
  race: raceRouter,
  team: teamRouter,
  location: locationRouter,
  task: taskRouter,
  activity: activityRouter,
});

export const appRouter = createTRPCRouter({
  race: raceRouter,
  team: teamRouter,
  location: locationRouter,
  task: taskRouter,
  activity: activityRouter,
});

This is how I have setup all my mutations elsewhere. However, this one consistently gives a TRPC error as follows:

 ❌ tRPC failed on activity.startRace: No "mutation"-procedure on path "activity.startRace"

 ❌ tRPC failed on activity.startRace: No "mutation"-procedure on path "activity.startRace"

Any ideas why this could be happening? My deepdive leads me to believe that this is due to CreateMany but not sure what teh best way to structure such is?

16 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 3/26/2023 in #questions

Best way to redirect from create page back to index

Looking for some guidance around best practice to handle form create and redirects in one step. I often only see examples of create>invalidate on the same page but haven't come across many where there is a dedicated next page for the create form that redirects to another page. Currently, I have this setup something like this:

 const router = useRouter();

  const { mutate, isLoading: isPosting } = api.example.create.useMutation({
    onSuccess: () => {
      setInput("");
      void ctx.example.getAll.invalidate();
      router.push("/");
    },
  });

 const router = useRouter();

  const { mutate, isLoading: isPosting } = api.example.create.useMutation({
    onSuccess: () => {
      setInput("");
      void ctx.example.getAll.invalidate();
      router.push("/");
    },
  });

However, I am not sure that this pattern makes sense or if there is a more correct / efficient way to do this (for example waiting for the outcome of the create and sending this as props)? Any example projects or guidance would be super helpful.

2 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 2/13/2023 in #questions

Best practice for protecting page / not letting anything run before redirect

In my app, I would like to protect a few key routes. The middleware implementation of NextAuth looks interesting but I am reluctant to swap out the strategy to 'jwt'. As such, I am protecting page by page with something as below: --- const { status } = useSession({ required: true, onUnauthenticated() { signIn() }, }) console.log("I am alive") const { data: todos } = api.todo.getAll.useQuery(); --- However, I notice in these cases, that the page continues to run - briefly (I can see the "I am alive" being logged to the console) - before its redirected to the signin page. This feels like a security lapse to me (stuff running on the page before the page loads). What is the best way to make it wait before running the rest of the page (essentially - not running anything unless the person is authenticated)?

13 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 2/13/2023 in #questions

Using dynamic Param slug in TRPC query

I seem to go in ups and downs in my love of TypeScript (I shouldn’t say that here tho 🙂 ) In a page, I would like to pass the slug of that page to a TRPC api call as follows: const router = useRouter() const { slug } = router.query const { data: options } = api.product.getOptions.useQuery({ id: slug }) However, doing so I get type errors on slug (specifically that it could be undefined, string or string[] I have tried both doing a type check and then returning when it’s not a strinf but this leads to an error around ‘more hooks rendered than during previous render’ or by trying enabled but this doesn’t seem to solve it. What is the proper way to use the slug directly in a TRPC query?

10 replies

TTCTheo's Typesafe Cult

•Created by nickparks on 2/8/2023 in #questions

Handling undefined errors on TRPC dependent queries

Really loving TRPC and relying more and more on the Tanstack to learn a bit more. In my app, largely a very simple modification of the base from TRPC, I would like to fetch some data and pass this to a second dependent query. I believe this is achieved as follows: const { data: product } = api.product.getUnique.useQuery({ id: pid }); const options = api.option.getAll.useQuery( { product: product.productSize, region: product.productRegion, }, { enabled: !!product } ); However, as much as I try, I continue to get ‘product could be undefined’ type errors in the input pass in the options query for both product and region. What is the correct way to use enabled to wait on the output of one TRPC call to avoid this?

5 replies

Gaming

Programming