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

Hello I'm using react router my biggest problem is re-routing the error from invalid queries

Using React-Router, React-query I've tried using a validator object i was wrapping it across my queries to invalidate any malicious search query from entering query call which was a temp fix but it hurts decoupling and the code is a mess and i cant unravel it. My code structure is that i have a custom hook called in several components all which are shared by the same searchQuery state so they all update at the same time which is good the problem is some invalid queries needs to be errored and not just silently fail where i tried Using HOC which used the same hook and called the same queries i was trying not to, the thing is I'm using supabase as my backend im not that good at it so I dont have a backend function which i can call to validate the query first as a safe checking layer so my queries are called then not used I mean thats as good as i can explain without showing Idk how to here sry i guess but here is my github link if you could take a look. https://github.com/Mohamed-Abdelrazeq/react-e-commerce TLDR. I want to know the best practice to validate search queries and not run my dependant react-queries and if i need the react-query output to invalidate the search query how is it best done in the loader by ensuring query? im still testing trying to figure out the best solution but im kinda in the dark. ...

Sizing to fit parent container, while respecting css "aspect-ratio"

I've been struggling with this for 2 hours so hopefully someone can help me out. I have a div that I need a set aspect ratio, and am using the CSS "aspect-ratio" attribute for this. This div (white) needs to scale to fit the parent container (red), while maintaining aspect ratio. I need my container to be scaled, not just what is shown in the viewport (i.e. no overflow-hidden). I also need this to be pure CSS, as this is in a NextJS server component....
Solution:
ok, solution (for minimal example) was aspect-square h-[min(100vh,100vw)] for my original problem (not shown here) i had to do: aspect-square h-[min(50vw-24px,100vh-210px)] (50vw since there are 2 side by side, and the arbitrary px values guessed/checked until it matched parent) ...

TypeScript Type Mismatch in Microsoft Authentication with Passport

I've created a backend using Microsoft authentication in Express. I'm facing some type errors that are a bit confusing for me. passport.tsx ```js import { Strategy as MicrosoftStrategy } from "passport-microsoft";...

I'm having problems refreshing my component

The Redbox is where the problem is that's the only way I was able to refresh the component to fetch the data. I know you're wondering why am I using a custom hook for that because just I want to simplify the code in each component The yellow box is the custom hook to fetch data This is the only way I'm able to refresh the component to fetch data because when the component mounts the required information for the data to be fetched is not defined, but when I refresh it, it's defined...

T3 architecture

Is T3 stack an mvc? Anyone can describe me this please! I looked in the website but couldn't find any relation.

How to stop prisma from updating the same row via 3 different update functions at the same time?

I am using a webhook architecture to synchronize my DB with another central DB, when I do a thing such as creating a new row in the central DB, it triggers several creation and update events at the same time, how do I stop prisma from having a race condition where 3 different http requests are trying to mutate the same row?

Can't detect cleckMiddleware()

Using clerk in nextjs app router.. Encountered this error.. What could the issue here? I have the middleware in the root dir and clerkProvider wrapped around the whole app but calling the currentUser() function throws this error....

Cookies in Next 14

I'm fairly new to SSR and server components. I am having trouble understanding cookies behavior with ssr and client in mind. My goal: Set cookie on NextJS backend, be able to see it in browser and in client components. My code: ```ts...

shadcn/ui page reloads on form submit

I have this code to submit on enter on the form but the page reloads on the submit: ```tsx <Form {...textMessageForm}> <form...

Steps to use graphql endpoint on react client

Hello, this might be a very beginner question. I have a Graphql endpoint and I want to use that in a react client with full type-safety. Could someone let me know what are the steps or how you would approach this? I'm wondering whats the right way to get the schema to code generation with hooks. I have some idea in terms of what I need, but I couldn't find any good resources on setting up and using an external datasource for a production app. Any help is appreciated. Thanks everyone. Note: I don't mind using URQL or apollo react client or react-query...

Paid (if allowed) - Help with laggy react frontend

hey :Peepsteroji_pepewavehappy: would anyone be interested in helping me out for like an hour or half pinpointing where my code is slow? i've made a fairly complex project, and the react frontend is a bit laggy and crunches ram. it's a frontend with a lot of realtime data coming in, so a bunch of renders is happening....

Create-T3-App Middleware Conventions

What's the recommended place to put middleware in a create-t3-app app?

calling server action from client sido throws webpack error - default webpack config

I'm trying to use a server action and when i run it i get
TypeError: __webpack_modules__[moduleId] is not a function
at Object.__webpack_require__ [as require] (/home/huilensolis/dev/projects/Pictura/.next/server/webpack-runtime.js:33:42)
TypeError: __webpack_modules__[moduleId] is not a function
at Object.__webpack_require__ [as require] (/home/huilensolis/dev/projects/Pictura/.next/server/webpack-runtime.js:33:42)
...

server action split tasks

Genuine question, if you want a server action A that doesn't block your UI, action does 1, 2, 3, 4 task, ui only needs 1, 2 to render, it calls action A how can I rendered the UI, make sure 3, 4 is done after the UI is rendered?...

Include padding bottom when overflow-y-scroll

I have an element that needs to be scrollable. Specifically, this element is the parent element that encapsulates all elements bar my sidebar (im using nextjs, this element is element that encapsulates children in the root layout). I would like that when the element is scrolled, that the bottom padding is also included in the scroll, e.g if we were to scroll all the way down the page, the bottom padding on the element should be visible. Currently, when we scroll all the way down the element, the page cuts off before the bottom padding is displayed. (In the image attached, I have scroll the page all the way down) RootLayout:...

Cannot get data out of Promis.allSettled()

I am trying to get data from db which requires a an array of individual queries like this: ``` const dbColumns = await ctx.db .select() .from(columns)...

Whats /aab

Lately I've seen a lot of request in my server log probing for some obvious securit overgishts like GET [host]/.env or GET [host]/wp-admin/setup-config.php but there are some I don't recongnize what they are going for e.g. GET [host]/aab8 GET [host]/aab9``GET [host]/ab2h anyone know if they mean anything ? if so what, just curious...

Vercel Data Cache Debugging

I there an way to see what fetch requests hit the Data Cache? I have an fetch which should be opted out of but since I'm using a library I can't access the fetch directly. It's suppsed to be able to take fetch options but I've not found a way to verify if this is actually working. The closest I've found is the number of reads for the project, but nothing on individual fetches. I've read the docs on Disabling the Data Cache, but they don't include any mention any tools or methods for actually checking what's in the cache....
No description

quick Graphite.dev question about existing commits

I'm try out graphite atm and i have an existing feature branch, main -> A with some well organized commits A.1, A.2, A.3, A.4 ...