Theo's Typesafe Cult•11mo ago

Making all my components 'use client' while maintaining protectedProcedures

Hi. I'm using the full T3 stack with prisma, next auth, and nextjs with the app router. I want to simplify my developer experience while i learn the ropes by make all my components a 'use client' component. However - I'll be using live data so I'll be using protectedProcedures throughout my app. My question is, is there an equivalent to getServerAuthSession() for checking the session status on the client side? For example, I want to add 'use client' to the top of this file and change the api import to '@/trpc/react' so I can add interactivity directly inside the component without trying to figure out how to do the it the server rendered way. //page.tsx (server component)

//imports go here

const Page = () => {
  return (
    <main className="flex h-screen justify-center">
      <div className="h-full w-full max-w-md border-x border-slate-400">
        <div>Todos:</div>
        <Todos />
      </div>
    </main>
  );
};

export default Page;

const Todos = async () => {
  const session = await getServerAuthSession();
  if (!session?.user) return <div>Sign in to see your todos</div>;

  const todos = await api.todo.getTodos.query();

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id} className="w-full">
          <TodoItem id={todo.id} />
        </div>
      ))}
    </div>
  );
};

//imports go here

const Page = () => {
  return (
    <main className="flex h-screen justify-center">
      <div className="h-full w-full max-w-md border-x border-slate-400">
        <div>Todos:</div>
        <Todos />
      </div>
    </main>
  );
};

export default Page;

const Todos = async () => {
  const session = await getServerAuthSession();
  if (!session?.user) return <div>Sign in to see your todos</div>;

  const todos = await api.todo.getTodos.query();

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id} className="w-full">
          <TodoItem id={todo.id} />
        </div>
      ))}
    </div>
  );
};

//todo-item.tsx (client component)

"use client";
//imports go here

export const TodoItem = ({ id }: { id: string }) => {
  const todo = api.todo.getTodoById.useQuery({ id: id });

  return (
    <div className="m-4 flex items-center justify-between">
      <div className="flex gap-2">
        <Checkbox
          id="title"
          onCheckedChange={() => {
            console.log(`change: ${id}`);
          }}
        />
        <Label htmlFor="title">{todo.data?.title}</Label>
      </div>
      <Button asChild>
        <Link href={`/todo/${id}`}>Edit</Link>
      </Button>
    </div>
  );
};

"use client";
//imports go here

export const TodoItem = ({ id }: { id: string }) => {
  const todo = api.todo.getTodoById.useQuery({ id: id });

  return (
    <div className="m-4 flex items-center justify-between">
      <div className="flex gap-2">
        <Checkbox
          id="title"
          onCheckedChange={() => {
            console.log(`change: ${id}`);
          }}
        />
        <Label htmlFor="title">{todo.data?.title}</Label>
      </div>
      <Button asChild>
        <Link href={`/todo/${id}`}>Edit</Link>
      </Button>
    </div>
  );
};

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Making all my components 'use client' while maintaining protectedProcedures