Next.js Discord

Discord Forum

How to fetch data from a db in a client component?

Answered
GetPsyched posted this in #help-forum
Open in Discord
GetPsychedOP
Is the only real option to pass in the data from a server component? Because this is getting tricky.

I'm making a select component that takes in an items array. The data I want to pass into this prop comes from my drizzle-orm instance which needs an await call. This might be a really dumbass question but RSC in NextJS has spoiled me to the point where I forgot how to do this.

I remember being able to do stuff like db.findFoo().then(() => do-something()) but don't really know how to wait for that promise without using await.
Answered by B33fb0n3
Else you end up like many others people, who don't want to use a clientside fetching library. One example is: https://nextjs-forum.com/post/1269001348913954899#message-1269673356626624544
And a few others are:
https://nextjs-forum.com/post/1265811123375046747#message-1266068346869252207
https://nextjs-forum.com/post/1263090904277716992#message-1263094831207551016
https://nextjs-forum.com/post/1261618478650228898#message-1261636332141412405
https://nextjs-forum.com/post/1259849117597831238#message-1259851475308511253
https://nextjs-forum.com/post/1251886532067852368#message-1251999340709548092

So please: use a clientside fetching library like swr or react query to control your clientside fetched data
View full answer

38 Replies

GetPsychedOP
Did look at useSWR but that's for API calls. I don't really want to wrap my db call into an API
@GetPsyched Did look at `useSWR` but that's for API calls. I don't really want to wrap my db call into an API
B33fb0n3
you can (and I prefer) using react query. There you only need to pass in a function, that does the fetching for you. Of course your db is handled serverside, to it would be either a server action or api endpoint using fetch("/api/your/endpoint")
GetPsychedOP
Not sure how I feel about adding react query, but I'll check this out
Answer
GetPsychedOP
That is fair
@GetPsyched That is fair
B33fb0n3
Thanks :thank_you:
GetPsychedOP
Are there other libraries for the same?
I'm leaning towards swr because I'm not doing this stuff:
const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}
@GetPsyched Are there other libraries for the same?
B33fb0n3
yea, SWR is also a possible clientside fetching library
GetPsychedOP
Stigma? I don't have a rational reason for it but just that it feels ugly.
useSWR feels nice and compact
GetPsychedOP
Yeah, I'm aware
@GetPsyched Yeah, I'm aware
B33fb0n3
Is you question "How to fetch data from a db in a client component?" like that resolved? If yes, please mark solution
GetPsychedOP
Yeah, thanks a bunch!
B33fb0n3
GetPsychedOP
BTW, if I use swr or react query, my calls would be non-blocking, right?
How can I make them blocking
Or just wait for them to complete in way
useEffect on isLoading?
GetPsychedOP
I learnt about tRPC and I think I could just make these endpoints and hit them on my client components
Does that make sense @B33fb0n3?
@GetPsyched I learnt about tRPC and I think I could just make these endpoints and hit them on my client components
B33fb0n3
Yes, you can create endpoints for them and your client request these endpoints. I can only speak for react query: it does not block the page while loading when you use „useQuery“. You can use „useSuspenseQuery“ to block it
btw, if you only chat in a thread that I don’t follow, I won’t see your message. If you see my name on the right, I am following this thread (and will see messages without ping). If I don’t follow this thread you can ping me
GetPsychedOP
Yup, understood. I wouldn't text in this thread, but my query this time was basically an extension of this
B33fb0n3
👍
@GetPsyched I learnt about tRPC and I think I could just make these endpoints and hit them on my client components
Pembroke Welsh Corgi
If you just need some data fetching function you can just make server actions that return the data from the db and call the server action in the query function of React Query or SWC client-side, it will be bundled automatically as a fetch request to the server
GetPsychedOP
It's kinda silly, but I'll have to put the action in another file, which I don't want to do because all of my actions are inline
Pembroke Welsh Corgi
well, you would still have to define the route for the trpc query in another file :/
I guess you are attached a bit too much to your code aesthetics ahahaha
GetPsychedOP
you figured me out lol
Field Spaniel
What about creating a wrapper component to perform the db query on the server and pass the data to the client component as props? Something like this example with the CardWrapper component:
https://github.com/vercel/next-learn/blob/main/dashboard/final-example/app/ui/dashboard/cards.tsx
GetPsychedOP
That's valid, but a key difference here is that Card here is also a server component
if it were a client component, you'd need to put it another file
And once you have this instances in multiple places, it gets messy
Big L for code quality IMO