Request and update as the server comes along
So, I have a scenario in which I have a list of currencies, like
["USD", "EUR", "BRL"] etc, that has a dynamic size. My problem is that the API only allows for 5 calls per minute, so I need a 20s interval just to be safe.
Now, requesting every 20s is easy, but I can't wrap my head around how to have a React Query set up so I read from this array of currencies, and return one by one so I can render it in real time on the client. And then restart the cycle.
I've thought of many workarounds, but nothing that seems like a perfect solution. Does anyone have any idea on how I could do this?...Can't resolve 'fs' but in an API route???
Any idea why this error is occuring? I thought all api routes are node compatible...
```
Module not found: Can't resolve 'fs'
https://nextjs.org/docs/messages/module-not-found...
React Query cache is not working?
I started a new t3-turbo-app project then added refetchInterval: 1000 in the post router to update posts real-time. I am getting a status 200 even though data haven't changed. I was expecting a status 304.
using zact with react-hook-form issues error
hello. when I try to call a server action wrapped in zact like so, I am getting this error:
- error ReferenceError: Cannot access 'callMyServerAction' before initialization. This only seems to happen once I introduce react-hook-form and validate on the front end as well:
```
// actions.ts
export const addDynamoDBConnection =
zact(...What's the reason for having the prisma singleton in the context?
On the t3 Stack homepage it says the following:
We include the Prisma Client in Context by default and recommend using this instead of importing it separately in each file.On the app I'm currently working on I'm implementing a repository pattern so I'm only actually using the prisma object in a handful of repository files. To me this feels like the most sane way of handling database connections that's why I'm wondering why it is included in the context. I'm sure there are good reasons...
Sizes prop in the <Image/> component
I've always been using the <Image> component with the fill prop, but I've never used the sizes one: https://nextjs.org/docs/pages/api-reference/components/image#sizes I'm reading the docs and I don't understand what it does. I thought NextJS Images were automatically served with the proper size according to the device of the user, was I wrong? Is the sizes prop the thing that takes care of that? As an example, I have a hero image that always takes up the whole screen width, I've added the sizes prop like this: and I don't see any difference when it comes to the srcset of images when I inspect the element - or any difference in lighthouse (with or without the sizes prop, the amount of KB spent on images is the same) so I'm not sure what it's actually doing...
<Image
src="/example.png"
fill
sizes="100vw"
/>
<Image
src="/example.png"
fill
sizes="100vw"
/>
Preact Error on next 12
On next 12, I tried to switch to Preact, using the following guide:
https://reacthustle.com/blog/how-to-speed-up-your-nextjs-app-with-preact
But I get this error:
Cannot read properties of undefined (reading '__H')...
How to add Many to Many relation fields in `z.object` and how to write procedure for it ?
I have created these two models
```
model Category {
id String @id @default(cuid())
name String...
NextJS app router trips/[id]/page.tsx
Hello all,
How do I correctly pull in [id] to page.tsx to console.log and display the id?...
Good Select component/library for large lists?
I've recently had a usecase where I need to display a large list inside a Select (10k+).
Up until now I used only React select, which works perfectly fine up until like 1k items, after that it gets laggy and then at like 2-3k+ it's to janky to be called usable... I also used virtualization for it, but it's still not as smooth as I would expect it to be.
Does anyone have any good recommendations?...
UploadThing Pricing
I'm just talking with an startup friend about migrating to UploadThing from s3 from cost perspective. We really need to know how much it will cost for example a tb or more, maybe only know how much it cost after 100gb per gb to make our own calculations.
httpBatchStreamLink example with T3
anyone already played with trpc streaming in T3 ? when I add
import { httpBatchStreamLink } from '@trpc/client' I get : "@trpc/client" has no exported member named. Maybe anyone there already played with it?Uploadthing: do not upload immediately
in upload thing is it possible when putting the file in uploader do not upload immediately? i want when I click form button start upload after that not after putting file there
Do I have the right idea?
I am trying to figure out the structure and tech I should use for my personal project. I am thinking of using T3 for the main application and then creating express servers for every new service I would want to include in to my app. My questions:
- Is using express with tRpc a good solution for creating easy to integrate microservices into the T3 app?
- I assume, that this is a good approach to an easy to expand structure, but I know that I lack experience in this, so any opinion would be helpful. (Not a question, I know)
- What would be the best way to write the microservices so, maybe in the future, I could rewrite them, for example in Rust, for a more performant service?
- If I am going to want to create a React Native app that consumes the API exposed by my Next app, what AUTH solution should I consider using?...
Paypal webhooks with NEXT's edge runtime
I'm currently testing paypal webhooks locally and it runs just fine on the normal runtime but when i turn on edge, i can't get the body of the request (in particular
webhook_event which is necessary for this: https://developer.paypal.com/docs/api/webhooks/v1/#verify-webhook-signature_post )
any ideas why i can't get the body at all when using edge?...How do I stop a trpc query from running when a parameter is null?
In this example, since the TRPC procedure only accepts productId as a string that's not nullable, I still get a type error for productId.
```TypeScript
export const useStockByProductId = (productId: string | null) => {
return api.stock.getStockByProductId.useQuery(...
Should I use setState inside useEffect with React Query (or TRPC)?
Lets say I want to fetch a product and set the result to a zustand store.
```
//Get zustand store setter
const { setSelectedProduct } = useCustomerTransactionStore();
...
any typescript genius can help with writing a wrapper function for a SvelteKit loader ?
the way that the auth library i'm working with works, is that it recommends reading in the auth from the request (after being processed by hooks), and redirecting in the pager loader.
so for a bunch of my pages, i'm gonna want almost the same structure, with computation specific to the page: ```ts
export const load = (async (req) => {
const auth = await req.locals.auth.validateUser();...
Archiving on serverless functions
Does anyone know any zipper/achiver library that works on serverless functions?
Admin dashboard
How could I create an admin dashboard where if the user is not authenticated with next-auth it goes to /login but if he does not have admin give a 403 ? Maybe something like roles ?
Solution:
There is a guide that might help: https://authjs.dev/guides/basics/role-based-access-control