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

[SOLVED] How to get data using useQuery, then update it using useMutation without reseting inputs?

I'm using React-hook-forms in combination with T3v10 and I've come to a problem I don't have a solution to.... It's essentially a user profile form. I want to get the user's data with useQuery, then set those values as the default ones for the inputs, and when it's saved with useMutation it should keep the new data. Which is basically this part:...

Next-Auth types

Im trying to add type groups so I can have typings for my nextauth config. Can't seem to figure it out. Whats is the exact way I can do add the type for such ``` callbacks: { signIn({ profile }) { const { groups = [] } = profile; // <--- make groups typed...

How to type either

Quick question. I have an object I'm passing as a parameter. It has the shape
{id: number, name: string, foo: Partial<SomeObject>}
{id: number, name: string, foo: Partial<SomeObject>}
I need either or both id and name, and I require foo. How would I go about typing this?...

help with invalid prisma invocation

I'm getting
Invalid `prisma.invite.findMany()` invocation:
Error converting field "groupId" of expected non-nullable type "String", found incompatible value of "null".
Invalid `prisma.invite.findMany()` invocation:
Error converting field "groupId" of expected non-nullable type "String", found incompatible value of "null".
pictured below is an entry in the db im looking at from the prisma client, and here's the model in question ```...

Push notifications in a react app

I'm adding push notifications to my react app (TS and react-query on the frontend and MongoDB for the backend). Thinking of a pub-sub model (instead of webhooks/websockets) since the notifications need to go to all users of a workspace. Haven't ever built such a system before and was looking for recommendations on implementations.

The current domain is not authorized for OAuth operations

hello everyone i have vite app and i used firebase google auth . it works fine but when i deploy it on vercel it give me this error : The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (todomarwenlabidi.vercel.app) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab. this is my app link : https://todomarwenlabidi.vercel.app/...

How to do this React Query thing without useEffect

Hi, here's some working code that I would love to remove the useEffect from. However if I just give the input text to the query directly, search results disappear when the user changes the search text because it creates a new query. Any ideas on an elegant way to solve this? ```ts const [inputVal, setInputVal] = useState(""); const [text, setText] = useState(""); ...

Dynamically rendering a component using an object

I'm currently building a React/Next application that's connecting to a CMS. The CMS gives the structure of the website in JSON and our job is to translate this to React components. Each "JSON component" has a unique name property that's being used to match the "JSON component" with the correct React component. Let's say we have two components, ComponentA and ComponentB. ComponentA has the following properties...

Validating supabase JWT token locally (without making a request to their API) [solved]

I have a nextjs api handler that calls this to validate the user (and then makes a DB request using user.id):
const { user } = await supabase.auth.api.getUserByCookie(req);
const { user } = await supabase.auth.api.getUserByCookie(req);
...

React Hook Form and breaking up form components

I'm trying to convert a previous app to t3 stack and use some of the libs that I've seen theo use to simplify the code and make it work more consistently. So far most things are going great, but the point I'm stuck on is converting some of my more complex forms to react-hook-form. For some background my most complex form currently consists of a few reusable "dumb" form segments. These segments take an object as a value and call an onChange() function with an updated version of the whole object whenever one of the fields is modified. The top-level component has a state variable that contains all of these sub-objects. When the user is done with the form the entire object is checked and submitted to the api endpoint. These are the issues I'm having: 1) My first thought was to treat each one of my dumb form segments as a controlled input wrapped with a <Controller />. However, if I want to be able to display errors on the text fields in the sub-component I don't think I can do that. Is this correct?...

how to get next-auth session in _app.tsx on getInitalProps?

Hi people, I'm using getInitalProps in my _app.tsx, and I need somehow to get session and pass it in SessionProvider, but not sure how, anyone had similar situation?

Type to require elements of array to all have one property or the other

I'm looking for a type that will force all elements of the array to have 1 property or the other example ```ts...

How to handle cancelled login, when using nextAuth OAuth?

Hi there! I'm using the T3 stack for the first time and was having trouble handling the OAUTH_CALLBACK_HANDLER_ERROR when cancelling the signIn flow using OAuth. My users will signIn (e.g. via Discord) and will be greeted with the Discord login page, but if I were to cancel the OAuth flow, I am redirected to http://localhost:3000/api/auth/signin?error=Callback where I can once again sign in via Discord and I get an error in my console. The proper functionality I want is to redirect my user back to the login page. Thanks!...

Pointing to object in array giving me an undefined error in console.log

I have no clue why line 58 is giving me an error as undefined

change multiple attributes with 'group-hover'

If I want to do something like this with a component. i.e. make a tooltip go from hidden to absolute and the opacity from 0 to 100. how do I do this with group-hover?...

[Solved] Why does leetcode say “non-decreasing” and not “ascending”

Just going through leetcode questions and curious why it always say “non-decreasing” as opposed to “ascending”

T3 & Plausible proxy setup

I am having a some issues configuring plausible as a proxy on my t3-project running on Vercel. Since I am using NextJS & Vercel I want to use next-plausible and I am following the example on their gh-page. https://github.com/4lejandrito/next-plausible#proxy-the-analytics-script My next.config.mjs looks like this ```ts...

NextAuth - OneLogin flow mocking

Im trying to mock OneLogin login flow using WireMock server. I can easily get the flow working until I submit credentials on the mocked OneLogin page and after it redirects I get this error and can't get pass it the whole day ;/ ``` [next-auth][error][OAUTH_CALLBACK_ERROR] https://next-auth.js.org/errors#oauth_callback_error failed to validate JWT signature { error: RPError: failed to validate JWT signature...