Deniz Posts - Answer Overflow

Deniz

•Created by Deniz on 1/19/2024 in #questions

api keys and rate limiting

Im building an api in my nextjs 14 project that i want to put behind auth using api keys and rate limit it. What is the go to way to handle generating unique api keys and authenticating the request + rate limiting?

2 replies

TTCTheo's Typesafe Cult

•Created by Deniz on 10/18/2023 in #questions

Error handling with new create-t3-app app dir template

Since the OnError callback got removed from usequery in tanstack query v5, how can i now handle (read: catch) errors when calling a protected procedure that is not a mutation? I am trying to call the "post.getSecretMessage" endpoint which is a protected procedure without being logged in, and it obviously is throwing an TRPCError. The problem is that this error stops the whole application and is not being handled correctly. I read the blog post from TkDodo (https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose) about how to do error handling in v5, but it doesnt work. This is the code as suggested in the blog:

const [queryClient] = useState(() => new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        if(query.meta?.errorMessage) {
          console.log(query.meta.errorMessage)
          return
        }     
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if(error?.message) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          //@ts-ignore
          console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        }
      }
    })
  }));

const [queryClient] = useState(() => new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        if(query.meta?.errorMessage) {
          console.log(query.meta.errorMessage)
          return
        }     
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //@ts-ignore
        if(error?.message) {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          //@ts-ignore
          console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
        }
      }
    })
  }));

When an error message is thrown, none of the console logs are being called and the error is not handled properly, thus breaking the application. The console log on api/trpc/[trpc]/route.ts is being called however.

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
    onError:
      env.NODE_ENV === "development"
        ? ({ path, error }) => {
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
            );
          }
        : undefined,
  });

1 replies

TTCTheo's Typesafe Cult

•Created by Deniz on 8/25/2023 in #questions

form action not working

I have a server component where im importing a server action which i want to call when a form is submitted using the form's action prop, however im getting:

Type '(taskData: FormData) => Promise<void>' is not assignable to type 'string'.ts(2322)
index.d.ts(2121, 9): The expected type comes from property 'action' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'

Type '(taskData: FormData) => Promise<void>' is not assignable to type 'string'.ts(2322)
index.d.ts(2121, 9): The expected type comes from property 'action' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>'

<form action={createTaskForUser}>

<form action={createTaskForUser}>

2 replies

TTCTheo's Typesafe Cult

•Created by Deniz on 8/25/2023 in #questions

useTransition typescript error

I have a server action that looks like this:

export async function deleteTask(id: string) {
  await prisma.task.delete({
    where: {
      id,
    },
  });

  revalidatePath("/projects/tasks");
}

export async function deleteTask(id: string) {
  await prisma.task.delete({
    where: {
      id,
    },
  });

  revalidatePath("/projects/tasks");
}

I am importing this in a client component and calling it using the useTransition hook like this:

<DropdownMenuItem onClick={() => startTransition(() => deleteTask(task.id))}>Edit</DropdownMenuItem>

<DropdownMenuItem onClick={() => startTransition(() => deleteTask(task.id))}>Edit</DropdownMenuItem>

However im getting this ts error: Type 'Promise<void>' is not assignable to type 'VoidOrUndefinedOnly'

1 replies

TTCTheo's Typesafe Cult

•Created by Deniz on 8/12/2023 in #questions

add install/open app prompt

4 replies

TTCTheo's Typesafe Cult

•Created by Deniz on 5/9/2023 in #questions

create t3 app for nextjs 13.4 app dir

Are there plans to update the boilerplate to use the now stable app dir in nextjs 13.4? If so, is there an expected date for this?

6 replies

Gaming

Programming