Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Changing URL but components re-rendering.

I'm working on an application wherein you click on various chapters of a story and it should update the form fields on the page with that chapters content. The URL is changing correctly, but the form fields are not rerendering with the new content. What do?

Weird React error

When I show a notification or a modal that is outside of root div. In each render, this error will occur and this is not the first time that this happened. I investigated it a bit, but I couldn't find a solution. This error happens exactly when I call a notification that is set to be positioned absolute or outside the root div. It says can't set the property of undefined, but I can't find it I guess it's deep into react...

Is there a way to async await a mutation instead of passing a callback to onSuccess?

Basically I would like to do: ```ts let m = trpc.useMutation(["example.testing"]); let result = await m.mutate({something: "example"});...

Needed help to write unit test for image download

Hey there, I wanted to write test for the handleShareClick function, this function uses html2canvas lib and I am not sure how I acna write a unit test using jest. PS I am new to testing. Here is the code: `` const handleShareClick = () => {     html2canvas(document.querySelector('#share')!).then(canvas => {       const dataURL = canvas.toDataURL();...

Fixing React video questions came up to my mind !

* do I have to work full stack to use the benefits of async components? * Instead of Prisma any promise-based function will do the same right? * what about useQuery(). it's a hook so is it gonna work just like Theo showed us like : ...

how would u await something, if you cant use promises and await 👀

I have a function in a class that cannot be async, however in that function i need to run another function that will do a playthrough of a game (basically just run a set interval, every 50 ms) and when that returns, then execute the rest of the function i dont think that can work with a callback as i specifically need to wait for the function that does the playthrough to complete as it returns values that the outer function needs. ...

how to block first trpc call fetching user data after next auth authentication completed

I'm trying to implement auth such that I pass some string derived from the token from the auth provider into the authorization header of the request I would send via trpc or react query, for that matter, which means that fetching should definitely not start until the auth process is totally complete, which can be signalled by either the token being available through . I feel like this is a common pattern but I'm having trouble finding docs for this. Thanks.

NextAuth Alternatives

Hello, im looking for a NextAuth alternative because cloudflare functions isn't supported yet https://github.com/nextauthjs/next-auth/issues/5142 anyone know of an alternative? Reason im wanting an alternative instead of just waiting is cause i think it will, take a while to actually get pushed and my application mainly focuses on having some sort of google auth.

how to access value on next auth jwt from client

When logging my next auth jwt, I see a value i had added but am not seeing it in my cookies.

Returning Prisma generated in nextjs issues error 'TypeError Do not know how to serialize a BigInt'

I tried following the thread here https://github.com/prisma/studio/issues/614 and it sounds like I have to monkeypatch BigInt to get it to work. Is there a better way?

trpc.useQuery() succeeding but returning empty data?

Ive checked my db and the entries definitely exist. and the query is sending the right Id input to find a unique entry using the id. But the data object in the useQuery result is undefined...

Is NextJS Api worth? When do we use it?

I've been learning NextJS lately, I used to create and use my own RestApi with express while coding for React. When I create NextJS Api Can I skip express? Can I use it instead of Express or should I use it? Does it allow middleware operations? Can you tell me if it has a different purpose?...

Custom fonts not working in new version of tailwindcss

I want to use custom fonts in my app but the custom fonts wont work. tailwind.config.cjs: ``` /** @type {import('tailwindcss').Config} */...

rich text react

How would a component that lets a user customize rich text work? Would it just be markdown? What about wysiwyg? Is it just turning everything to markdown in real time?

How do i parse Fetch response with superjson

So the issue is that when i fetch data it wraps data into object with key "json" and value of data: ``ts const groupResponse = await fetch(${baseUrl}/groups`); //Handle errors...

how to http fetch from nextjs app running on GitHub codespaces without being prompted to login

Hello. When I try to hit an API from nextjs codespaces that lives in the same app and url, I get a prompt for logging in as a response which breaks the response follow. How do I fix this?

Prisma where every filter on many-to-many

I think I am being super dumb, but I have a many-to-many relationship of Entry to Campaign. I want to find all entries connected to a given campaign. I thought I could just do ```ts const entries = await ctx.prisma.entry.findMany({ where: {...

NextJS build works locally but fails when deployed to Vercel

I searched this up but found no solutions that applied. Vercel crying:...

Creating a new record that's related to an existing record and creates new relations?

Can you use this to created multiple levels of related records? https://www.prisma.io/docs/concepts/components/prisma-client/relation-queries#connect-an-existing-record i.e. the story app I'm working on. Users create a story which should connect to their user id, and they also write a chapter which connects to the story:...

Call trpc query after click or change

I am trying to fetch some data on a change event
const handleClientChange = async (value: string) => {
const result = trpc.client.getOne({ id: value }).useQuery()
const handleClientChange = async (value: string) => {
const result = trpc.client.getOne({ id: value }).useQuery()
...