How do I set result of DB call into react state I can pass to JSX in RSC?
Answered
Chinese softshell turtle posted this in #help-forum
Chinese softshell turtleOP
I have this code:
import { auth } from "@/edgedb-next-client"
import { profileAuth, profilePublic } from "@/edgedb/crud/queries"
import Image from "next/image"
export default async function Profile(props: any) {
let session = auth.getSession()
const client = session.client
const authenticated = await session.isSignedIn()
let authData
let publicData
if (authenticated) {
authData = await profileAuth(client)
console.log(authData, "auth data")
} else {
publicData = await profilePublic(props.params.profile)
}Answered by Satin Angora
What is stopping you from passing the data into your components? It must be serialisable. If it isn't you should serialise it first as you stated.
32 Replies
Chinese softshell turtleOP
i want to then use it here
return (
<>
{authData && (
<header className="flex justify-between items-center pb-4">
<div>Authenticated data:</div>
{JSON.stringify(authData)}
</header>
)}
{publicData && (
<header className="flex justify-between items-center pb-4">
<div>Public data:</div>
{JSON.stringify(publicData)}
</header>
)}I thought I could use zustand and put the value from my db call and then pass it down
but I can't do that
I asked this in zustand discord too
https://discord.com/channels/740090768164651008/740093228904218657/1235563407898316862
https://discord.com/channels/740090768164651008/740093228904218657/1235563407898316862
but it seems I can't really put value from my db call in rsc into some react state I can pass down?
Chinese softshell turtleOP
reading https://nextjs.org/docs/app/building-your-application/rendering/server-components
it seems I can't have
it seems I can't have
useState in body of RSCChinese softshell turtleOP
I can't do this in RSC I think
Chinese softshell turtleOP
asked about this on X and got this reply
I wonder if this is the only way to do this as he says?
I wonder if this is the only way to do this as he says?
can I not do it like above where I put the value of DB call into some state i can send serialised to my components?
Chinese softshell turtleOP
from the X thread
https://twitter.com/nikitavoloboev/status/1786033933039104349
maybe someone reading this knows how to solve this 🙏
https://twitter.com/nikitavoloboev/status/1786033933039104349
maybe someone reading this knows how to solve this 🙏
Satin Angora
Hey @Chinese softshell turtle 👋
Chinese softshell turtleOP
hey hey
Satin Angora
useState is only used in client components
you can't use it in server components but that's a good thing because you probably don't need it.
Chinese softshell turtleOP
yea im aware
it seems you suggest i do this?
Satin Angora
What is stopping you from passing the data into your components? It must be serialisable. If it isn't you should serialise it first as you stated.
Answer
Chinese softshell turtleOP
yea
resolving this here
thank you lots @Satin Angora
i think your approach actually works for me too
i kinda wanted to have it how i had it in solid.js
but alas
where i can just pass data to jsx as react state
Satin Angora
no problemo.
Chinese softshell turtleOP
ok its perfect