Next.js Discord

Discord Forum

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
Open in Discord
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.
View full answer

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
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
Chinese 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?
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 🙏
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