How to fetch data from backend inside 'use client'

[spark sage]

is there anwyay to fetch data from backend without await inside a client side because I have to use useState and useEffect and it makes the code alot bigger is there anyway to fetch data without using useState and useEffect ?

const { data } = prisma.session.findMany()

[ember dune]

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)

[dense oak]

then you need to hit your api route from you client component.
like inside your useEffect

const { data } = prisma.session.findMany()

this is invalid ⬆️

[spark sage]

yes inside server component i have to just await , is there a hook to help with this situation ?

[dense oak]

what's your problem indeed?

[spark sage]

my problem inside my client component , i cannot async await this so I can fetch the data , in client component i have to use useState and useEffect to make it work , is there an easier approach ?

[dense oak]

you can! inside useEffect

well it's not a difficult approach but correct one

use other libraries like useSwr

https://swr.vercel.app/

it will help you to write down your own logic to handle loading state, error handling, revalidation ...

[spark sage]

so with useSWR , i can do this

useSWR(prisma.sessions.findMany()) ?

[dense oak]

oh

it accepts api path

you need to create your api route that does prisma.sessions.findMany()

[spark sage]

yea trying to use prisma in client component ^^

[dense oak]

Prisma is Node.js ORM tool that is intended to be run on the server

[spark sage]

the only way to make it work is to use tanstack react query it works client and server side but i am using bun with elysia and tanstack is not supported to bun yet

[dense oak]

why don't you fetch data on the server component and pass down to your client component as prop?

[spark sage]

oh, is there an example to do this because i am using my client component inside a page.tsx

also it will provide types or i will have to add types to the props ?

[dense oak]

is your page.tsx a server component?

[spark sage]

its a useContext with a provider so I have to use client component but I am checking for user session so I have to use client component here is the full code

'use client';

`import React, { use, useContext } from 'react';
import api from '@/utils/eden';
import AuthContext from '@/utils/context';

export function AuthProvider({ children }: { children: React.ReactNode }) {

const { data,  } = api.session.get()

return (
  <AuthContext.Provider value={{ user : data?.user as any || null}}>
    {children}
  </AuthContext.Provider>
);

}`

[dense oak]

Never, children can be a server component

[spark sage]

do you mean that if i did this all my childrens will be a client components ?

[dense oak]

CAN be a server component

[spark sage]

oh I see , should i use getServerSideProps for this ?

[dense oak]

are you using page router???

[spark sage]

I am using app router

[dense oak]

then there is no getServerSideProps

[spark sage]

should I create a customHook for this and use useState and useEffect and preuse it instead ?

[dense oak]

as I said you can't use prisma in the client side????

[spark sage]

yea , I will use useState and useEffect for this , I though there was a better way to do this ^^

[dense oak]

omg, did you understand what I mean?

you can't use prisma in the client side, so you need to create your api route

then it's better to use useSWR rather than creating your own hook

[spark sage]

I see , will try to check if useSWR is compatibly with elysia js

appreciate the help man