#How do i use server and client components someone please help me.

41 messages · Page 1 of 1 (latest)

frank coyote
#

Hey i am currently writing an part of my application where i have a client component that gets the public key from the useWallet and i then import that in a server componenet which then uses the publickey to make a fetch to see the solana balance but i am getting this error message.

Screenshot_2024-02-25_195700.png Screenshot_2024-02-25_195720.png Screenshot_2024-02-25_195740.png
loud islandBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frank coyote
#

Please if someone could help i would really appreicate that

merry hull
#

You can use client components in server component but you can't use helpers or hooks in server.

#

GetWallet runs on seever while the PublicKeyDisplay needs to run on client as it consumes use wallet hook

#

You can compose components
attend to the final part of the error

frank coyote
#

whats the correct implementation?

frank coyote
#

@merry hull ill send you some new images of exactly what i am trying to do

#

ive spent like 5 hours now on this

#

maybe i am dumb

#

All i am trying to do is just export the publicKeyString so that i can use it in the other component to fetch the users portfolio information

#

When i do this in my navbar it works fine and prints the address

merry hull
#

you can make GetWallet run on the client too for one but if you want to keep the API_KEY remain on the ckient you need some other way

maybe the solana lib you are using provides some solution

merry hull
frank coyote
#

its not

#

also theres nothing wrong with the API-KEY

merry hull
frank coyote
#

if i hard code the address into the component it works fine

#

so how do i do that

#

?

#

so why wont it work then

#

for my GetWallet component

#

i dont get it

merry hull
#

on the navbar the PublicKeyDisplay runs on client side

YOU CANNOT USE A FUNCTION ANNOTATED WITH 'use client' ON COMPONENT THAT RUNS ON THE SERVER

its straightforward

Server comp can take Client component as children thats why the navbar comp runs fine

frank coyote
#

Ok i understand what you are saying now so what is the solution of making this work then

#

i am a new dev man

#

sorry

#

i am not experienced like you

#

what modification do i have to make to the GetWallet to make it work?

#

@merry hull

#

thank you for helping me

#

i appreciate it alot

merry hull
#

there are 2 ways you can fix this
but note this first that I have not used the Morales/Solana lib you're using

here's what you can do

  1. Make sure that the GetWallet helper runs on client as you need the wallet's public key

  2. If you strictly need it to run on the server you can create a API endpoint and use that to get the balance of the user

frank coyote
#

Ok i think i will have to do this option as it does have to be a server component i believe

If you strictly need it to run on the server you can create a API endpoint and use that to get the balance of the user

#

i will give it go and see thank you so much

frank coyote
#

Still cant get it to work @merry hull