Next.js Discord

Discord Forum

i know that i cant mix server comp. and client but i have no idea how to fix that

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
i am storing userId in convex and i want to get user's name by getUser but i cant 
"use client";

import { api } from "@/convex/_generated/api";
import { clerkClient } from "@clerk/nextjs";
import { useQuery } from "convex/react";
import React from "react";

export default function StoriesPage() {
  const stories = useQuery(api.stories.stories);

  async function getUser(userId: string) {
    const user = await clerkClient.users.getUser(userId);
    return user.firstName;
  }
  return (
    <div className="max-w-4xl mx-auto">
      <div className="flex flex-col gap-4 max-w-xl mx-auto">
        {stories &&
          stories.map((story) => (
            <div key={story.title} className="p-6 bg-[#1b1b1b] rounded-xl">
              <h2 className="text-white font-semibold text-3xl">
                {story.title}
              </h2>
              <p className="text-white font-medium text-lg">{story.content}</p>
              <p className="text-white font-medium text-lg">
                {getUser(story.userId)}
              </p>
            </div>
          ))}
      </div>
    </div>
  );
}

61 Replies

@Dunker you can, what is problem
Asiatic LionOP
i would love to get user's name by id but i cant use await/async in client component
Asiatic LionOP
idk maybe nextjs by itself?
Dunker
no
there is no limitations
Asiatic LionOP
Dunker
this error not belongs to that code above but
Asiatic LionOP
it does
why it wouldnt?
Dunker
cuz i wrote a lot async code in pages dir so far
Asiatic LionOP
me too but i am mixing it with "USE CLIENT" > client compoennts
Dunker
also you dont need that 'use client' for this component
Asiatic LionOP
i do...
convex stuff is for client components
Dunker
this breaks everything
Asiatic LionOP
thanks :)
Dunker
no i mean this shouldnt be
Asiatic LionOP
the error is correct
i am doing something wrong
Dunker
what about this
onClick={() => getUser(story.id)}></p>
Asiatic LionOP
but i will be still using async function in client component
Dunker
cuz you are trying to render your function
Asiatic LionOP
okay
Dunker
but its not a component
Asiatic LionOP
let me test it
Dunker
i think problem is this
Asiatic LionOP
copilot's answer
Dunker
no
Asiatic LionOP
wait
but
why onclick?
Dunker
<p onClick={() => getUser(story.id)}></p>
cuz its an event and needs to be triggered by action
Asiatic LionOP
i am generating a posts and i need the author's name
i can use {story.userId} but i need to convert the userId to name using clerk
so i have a function to do that
and the function is supposed to return user's name
Dunker
yep, this breaks everything
await clerk
Asiatic LionOP
YES!
await
server action in client compoennt
thats what i am talking about
Dunker
can you share a live share link
you can wrap a client comp in server comp
but there is nothing to wrap at your code 😄
Asiatic LionOP
ill send it to dm's
Dunker
nice 😄
Asiatic LionOP
check dms
Dunker
✅
Silver
Hey, how did you end solving this I have quite the same issue 🙏
I have one server component like
async function renderCard(item: CardProps): JSX.Element {
"use server";
return <Card key={item.id} {...item} />;
}
that I want to pass to a client comp but I have the async await err
Secondly you can take a look at:
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
Silver
Hey 👋 ,
What I endup doing is 
export function InfiniteScrollCard({
    initialData,
    getData,
}: InfiniteScrollCardProps): JSX.Element {
    return (
        <div className="flex h-full flex-col gap-4 items-center justify-center pt-20 py-20">
            <InfiniteScroll
                initialData={initialData}
                getData={getData}
                renderItem={(item: CardProps) => <Card {...item} />}
            />
        </div>
    );
}

on the client side
Thanks again @Clown you are the best !
I'll take a deep look at that composition doc