Manqo Comments - Answer Overflow

Manqo

Explore posts from servers

•Created by Manqo on 3/23/2025 in #questions

Fetching User Session Data on the Client Side with useSession

Thanks from your response, what if we use TRPC and get the useSession from there like this app/utils/userClient.ts:

export function useSession() {
  const { data, isLoading } = api.user.getSession.useQuery();
  return {
    session: data,
    status: isLoading ? 'loading' : data ? 'authenticated' : 'unauthenticated'
  };
}

export function useSession() {
  const { data, isLoading } = api.user.getSession.useQuery();
  return {
    session: data,
    status: isLoading ? 'loading' : data ? 'authenticated' : 'unauthenticated'
  };
}

server/api/routers/user.ts:

    getSession: protectedProcedure.query(async ({ ctx }) => {
      return ctx.session;
    }),

    getSession: protectedProcedure.query(async ({ ctx }) => {
      return ctx.session;
    }),

app/_component_dashboard-content.tsx:

export default function DashboardContent() {
  // Get data from tRPC (server-prefetched)
  const { data: userResumes, isLoading: resumesLoading } = api.resume.getUserResumes.useQuery();
  const { data: userCoverLetters, isLoading: coverLettersLoading } = api.coverLetter.getUserCoverLetters.useQuery();
  const { data: subscriptionPlan, isLoading: subscriptionLoading } = api.user.getSubscriptionPlan.useQuery({});
  const { session } = useSession();

  if (resumesLoading || coverLettersLoading || subscriptionLoading) {
    return <LoadingSpinner />;
  }
  return (
    <DocumentTabs
      userResumes={userResumes || []}
      userCoverLetters={userCoverLetters || []}
      user={session?.user}
      subscriptionPlan={subscriptionPlan}
    />
  );
}

export default function DashboardContent() {
  // Get data from tRPC (server-prefetched)
  const { data: userResumes, isLoading: resumesLoading } = api.resume.getUserResumes.useQuery();
  const { data: userCoverLetters, isLoading: coverLettersLoading } = api.coverLetter.getUserCoverLetters.useQuery();
  const { data: subscriptionPlan, isLoading: subscriptionLoading } = api.user.getSubscriptionPlan.useQuery({});
  const { session } = useSession();

  if (resumesLoading || coverLettersLoading || subscriptionLoading) {
    return <LoadingSpinner />;
  }
  return (
    <DocumentTabs
      userResumes={userResumes || []}
      userCoverLetters={userCoverLetters || []}
      user={session?.user}
      subscriptionPlan={subscriptionPlan}
    />
  );
}

Could u fetch the current logged user like this?

20 replies

TTCTheo's Typesafe Cult

•Created by Manqo on 3/12/2025 in #questions

Handling Async Params and Suspense Queries in a T3 Stack Next.js App

I have also tried it without the use of react:

import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";

interface StoryPageProps {
  params: {
    storyId: string;
  };
}

export default function StoryPage({ params }: StoryPageProps) {
  const [story] = api.story.getById.useSuspenseQuery({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}

import { notFound } from "next/navigation";
import { api } from "@/trpc/react";
import StoryDisplay from "@/app/_components/StoryDisplay";

interface StoryPageProps {
  params: {
    storyId: string;
  };
}

export default function StoryPage({ params }: StoryPageProps) {
  const [story] = api.story.getById.useSuspenseQuery({ id: params.storyId });
  
  if (!story) {
    notFound();
  }
  
  return <StoryDisplay story={story} />;
}

But for some reason the id is undefined?

5 replies

Gaming

Programming