Next.js Discord

Discord Forum

get data from server in form on client side

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
so basically this is my Select component 
"use client"

import { useCurrentGuild } from "@/app/contexts/CurrentGuildContext"
import { FormControl } from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function ChannelSelect({
  onChange,
}: {
  onChange: (value: string) => void
}) {
  const { channels } = useCurrentGuild()
  const textChannels = channels.filter((channel) => channel.type === 0)
  return (
    <Select onValueChange={onChange} defaultValue={textChannels[0].id}>
      <FormControl>
        <SelectTrigger>
          <SelectValue placeholder="Select a channel" />
        </SelectTrigger>
      </FormControl>
      <SelectContent>
        {textChannels.map(({ id, name }) => (
          <SelectItem key={id} value={id}>
            #{name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}
and it is put inside a form

when the form is submitted the data is stored inside database

what i would like to do is when there is already some data saved in database i would like to display it so user can edit it. But how would i get it from that database when im on client side?

21 Replies

Clown
You will fetch the data. Simple. Either using an ORM or using fetch()
If you want the data fetched before CSR pulls in, you can pull the data from a Server Component then pass it down
@Clown You will fetch the data. Simple. Either using an ORM or using `fetch()`
American ChinchillaOP
but to use the orm dont i need to be in server component?
American ChinchillaOP
i cant even use the orm cause i need await
well i get this
@American Chinchilla but to use the orm dont i need to be in server component?
Clown
You can use server actions in client components. You can also technically use a route handler.
@Clown You can use server actions in client components. You can also technically use a route handler.
American ChinchillaOP
how would i use a server action in this case? cause i dont see how
i thought they are only for forms
Standard Chinchilla
I think the best way to do it is make the prisma call in a server component to get the info for the select component. then feed the data as a prop to your client component
@Standard Chinchilla I think the best way to do it is make the prisma call in a server component to get the info for the select component. then feed the data as a prop to your client component
American ChinchillaOP
So i should make a component just to make a database call? That doesnt make any sense
Standard Chinchilla
If you want the most efficient solution then yes. If you don't care then you can use a server action or a fetch call in a useefect. The problem with the latter is that you will have to wait to get the data before you render the select component or make the select component show a loading icon
American ChinchillaOP
how would i use form action, i tried to just call it and it was stuck and was calling it infinitelly
Standard Chinchilla
Can you show me how you are making the api call
American ChinchillaOP
"use client"

import { useCurrentGuild } from "@/app/contexts/CurrentGuildContext"
import { FormControl } from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { getSelectedChannel } from "@/lib/actions"

export default async function ChannelSelect({
  onChange,
}: {
  onChange: (value: string) => void
}) {
  const { guild, channels } = useCurrentGuild()
  const textChannels = channels.filter((channel) => channel.type === 0)
  const selectedChannel = await getSelectedChannel(guild.id)
  return (
    <Select onValueChange={onChange} defaultValue={`${selectedChannel}`}>
      <FormControl>
        <SelectTrigger>
          <SelectValue placeholder="Select a channel" />
        </SelectTrigger>
      </FormControl>
      <SelectContent>
        {textChannels.map(({ id, name }) => (
          <SelectItem key={id} value={id}>
            #{name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}
this is the component
and this is getSelectedChannel 
"use server"

import prisma from "./db"

export async function getSelectedChannel(id: string) {
  console.log(123)
  const guild = await prisma.guild.findUnique({
    where: { id: BigInt(id) },
  })
  return guild?.welcomeChannel
}
and it spams 123 in console
but shows Loading... in component place
Standard Chinchilla
you can't have a client component be async
You need to call getSelectedChannel inside a useEffect
American ChinchillaOP
maybe im just trying to overcomplicate it .. im just trying to do a Form that will save things to database, but when already there is something in database it will show it so you can modify it
@Standard Chinchilla You need to call getSelectedChannel inside a useEffect
Standard Chinchilla
Try this and see if it works