Next.js Discord

Discord Forum

Need help with school project

Answered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
For a little context: I am a student working on a school project who is not very experienced with what i'm doing apologies for my poor knowledge.

I am building my project using next js and supabase for my backend (supabase is a tool like firebase I use mainly for my database and users). The project is basically a form where a user can insert information and results about played games (wether the user won or lost, the amount of points scored...) the data is then saved or updated in the database. This data is then showed in a graph or some kind of dashboard.

I have succesfully fetched data from my supabase database. however I have come to the conclusion that in order to fetch data i need to use an async function so i can use the 'await supabase' function. I want to be able to use the fetched data of the coresponding user in react hooks like usestate. For example To use these react hooks i need to initiate 'use client' in my code but when i try to do these 2 things in the same page.tsx this gives conflicts. I assume that fetching data is a server side process and using react hooks, displaying data... is a client side process.

to simplify, this is what i am trying to acomplish:
fetched data is on display => user adds new data => database is updated => new data is displayed

my question: can i fetch data using async functions and use this data in react hooks like usestate in the same code?

I hope my explanation makes some sense to whoever may read it and that someone could maybe offer a solution or could help me to better understand my problem.
Answered by joulev
export default async function Page() {
  const data = await getData()
  return <PageClient initialData={data} />
}

"use client"

export function PageClient({ initialData }) {
  const [data, setData] = useState(initialData);
  return …;
}
View full answer

15 Replies

@New Guinea Freshwater Crocodile For a little context: I am a student working on a school project who is not very experienced with what i'm doing apologies for my poor knowledge. I am building my project using next js and supabase for my backend (supabase is a tool like firebase I use mainly for my database and users). The project is basically a form where a user can insert information and results about played games (wether the user won or lost, the amount of points scored...) the data is then saved or updated in the database. This data is then showed in a graph or some kind of dashboard. I have succesfully fetched data from my supabase database. however I have come to the conclusion that in order to fetch data i need to use an async function so i can use the 'await supabase' function. I want to be able to use the fetched data of the coresponding user in react hooks like usestate. For example To use these react hooks i need to initiate 'use client' in my code but when i try to do these 2 things in the same page.tsx this gives conflicts. I assume that fetching data is a server side process and using react hooks, displaying data... is a client side process. to simplify, this is what i am trying to acomplish: fetched data is on display => user adds new data => database is updated => new data is displayed my question: can i fetch data using async functions and use this data in react hooks like usestate in the same code? I hope my explanation makes some sense to whoever may read it and that someone could maybe offer a solution or could help me to better understand my problem.
joulev
export default async function Page() {
  const data = await getData()
  return <PageClient initialData={data} />
}

"use client"

export function PageClient({ initialData }) {
  const [data, setData] = useState(initialData);
  return …;
}
Answer
@joulev tsx export default async function Page() { const data = await getData() return <PageClient initialData={data} /> } tsx "use client" export function PageClient({ initialData }) { const [data, setData] = useState(initialData); return …; }
New Guinea Freshwater CrocodileOP
hey there, thanks for the response. So I use the first block of code to fetch the data and i can use the other part to do stuff with react hooks in the same page.tsx file?
@New Guinea Freshwater Crocodile hey there, thanks for the response. So I use the first block of code to fetch the data and i can use the other part to do stuff with react hooks in the same page.tsx file?
joulev
you will need another file. the page.tsx file is the first block, a server component. that another file is the second block, a client component
New Guinea Freshwater CrocodileOP
okay, i will try to make it work, thank you very much
@joulev you will need another file. the page.tsx file is the first block, a server component. that another file is the second block, a client component
New Guinea Freshwater CrocodileOP
Could you tell me what i'm doing wrong here?
@New Guinea Freshwater Crocodile Could you tell me what i'm doing wrong here?
joulev
Well you have to import the component
New Guinea Freshwater CrocodileOP
@joulev Well you have to import the component
New Guinea Freshwater CrocodileOP
@New Guinea Freshwater Crocodile Click to see attachment
American Crow
Since you are learning:
Check your logic first, see if it works. Do the typing after that.

What you are seeing are Type Errors / Type Warnings. Which you will have to eventually fix however in devmode your program still runs.
Meaning:
Return something like <div> does this work? {data} </div> from the pageClient.tsx
Check if that works. If it does move on to fix the type errors
__
Btw your introduction and understanding of server and client is spot on.
thank you both so much, yeah as you can tell i'm just a noob going with the flow but i do understand the given code now that i took a better look at it instead of just sending screenshots of the errors which was a bit rude, sorry for that
American Crow
No worries you are doing well. Keep going, happy coding.
Learn about Typescript in React Components