How to fetch data from backend inside 'use client'
Answered
Scaly-naped Pigeon posted this in #help-forum
Scaly-naped PigeonOP
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()Answered by James4u
then it's better to use useSWR rather than creating your own hook
38 Replies
then you need to hit your api route from you client component.
like inside your useEffect
like inside your useEffect
const { data } = prisma.session.findMany()this is invalid ⬆️
Scaly-naped PigeonOP
yes inside server component i have to just await , is there a hook to help with this situation ?
what's your problem indeed?
Scaly-naped PigeonOP
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 ?
you can! inside useEffect
well it's not a difficult approach but correct one
use other libraries like useSwr
it will help you to write down your own logic to handle loading state, error handling, revalidation ...
Scaly-naped PigeonOP
so with useSWR , i can do this
useSWR(prisma.sessions.findMany()) ?
useSWR(prisma.sessions.findMany()) ?
Scaly-naped PigeonOP
yea trying to use prisma in client component ^^
Prisma is Node.js ORM tool that is intended to be run on the server
Scaly-naped PigeonOP
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
why don't you fetch data on the server component and pass down to your client component as prop?
Scaly-naped PigeonOP
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 ?
is your
page.tsx a server component?Scaly-naped PigeonOP
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';
'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>
);
}Never, children can be a server component
Scaly-naped PigeonOP
do you mean that if i did this all my childrens will be a client components ?
CAN be a server component
Scaly-naped PigeonOP
oh I see , should i use getServerSideProps for this ?
are you using page router???
Scaly-naped PigeonOP
I am using app router
then there is no
getServerSidePropsScaly-naped PigeonOP
should I create a customHook for this and use useState and useEffect and preuse it instead ?
as I said you can't use prisma in the client side????
Scaly-naped PigeonOP
yea , I will use useState and useEffect for this , I though there was a better way to do this ^^
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
Answer
Scaly-naped PigeonOP
I see , will try to check if useSWR is compatibly with elysia js
appreciate the help man