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

[elder mesa]

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.

[strong gyro]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[elder mesa]

Did look at useSWR but that's for API calls. I don't really want to wrap my db call into an API

[native trout]

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")

[elder mesa]

Not sure how I feel about adding react query, but I'll check this out

[native trout]

Else you end up like many others people, who don't want to use a clientside fetching library. One example is: #1269001348913954899 message
And a few others are:
#1265811123375046747 message
#1263090904277716992 message
#1261618478650228898 message
#1259849117597831238 message
#1251886532067852368 message

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

[elder mesa]

That is fair

[native trout]

Thanks

[elder mesa]

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>
  )
}

[native trout]

yea, SWR is also a possible clientside fetching library

[native trout]

are there any reasons why you don't want to do this?

[elder mesa]

Stigma? I don't have a rational reason for it but just that it feels ugly.

useSWR feels nice and compact

[native trout]

ah ok, it's a common pattern: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

[elder mesa]

Yeah, I'm aware

[native trout]

Is you question "How to fetch data from a db in a client component?" like that resolved? If yes, please mark solution

[elder mesa]

Yeah, thanks a bunch!

[strong gyro]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1269573149268246629 message)

[elder mesa]

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?

[elder mesa]

I learnt about tRPC and I think I could just make these endpoints and hit them on my client components

Does that make sense @native trout?

[native trout]

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

[elder mesa]

Yup, understood. I wouldn't text in this thread, but my query this time was basically an extension of this

[elder mesa]

Thanks!

[native trout]

👍

[warm moss]

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

[elder mesa]

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

[warm moss]

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

[elder mesa]

you figured me out lol

[blazing cairn]

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

[elder mesa]

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