ChrisEvans Posts - Answer Overflow

ChrisEvans

•Created by ChrisEvans on 4/7/2025 in #questions

How are you supposed to handle loading states for trpc (useQuery) calls in client comps in Next?

I have a client component that calls for data via trpc. I extract isLoading from those useQuery calls and then I want to display a loading skeleton while the data is loading. However, when I follow the normal React render pattern (check isLoading -> render skeleton; check if data empty -> render null; otherwise render content), I get an error about hydration failing because inital UI does not match server-rendered UI. I think this is because the isLoading state is always false on the server. This isn't an issue in standard React (non-RSC), because you make your useQuery call before trying to render anything, so isLoading is already true before you reach that render pattern logic. What's the right way to structure this in Next so I can show my loading state without a hydration error? Here's the code:

"use client"

// imports

export function ActiveArtists() {
  const { getValue: getDeviceId } = useLocalStorage({
    key: DEVICE_ID_LOCAL_STORAGE_KEY,
    defaultValue: "",
  });

  const { data: activeGrid, isLoading: isActiveGridLoading } =
    api.grids.getActiveGrid.useQuery(
      { device_id: getDeviceId() },
      { enabled: !!getDeviceId() },
    );

  const { data: artists, isLoading: isArtistsLoading } =
    api.grids.getArtists.useQuery(
      { grid_id: Number(activeGrid?.id) ?? 0 },
      { enabled: !!activeGrid?.id },
    );

  if (isActiveGridLoading || isArtistsLoading) {
    return (
      <div className="flex items-center space-x-4">
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
      </div>
    );
  }

  if (!activeGrid?.id || !artists?.length) {
    return null;
  }

  const validArtists = artists.filter(
    (artist) => artist?.id && artist?.username,
  );

  return <ArtistList artists={validArtists} />;
}

"use client"

// imports

export function ActiveArtists() {
  const { getValue: getDeviceId } = useLocalStorage({
    key: DEVICE_ID_LOCAL_STORAGE_KEY,
    defaultValue: "",
  });

  const { data: activeGrid, isLoading: isActiveGridLoading } =
    api.grids.getActiveGrid.useQuery(
      { device_id: getDeviceId() },
      { enabled: !!getDeviceId() },
    );

  const { data: artists, isLoading: isArtistsLoading } =
    api.grids.getArtists.useQuery(
      { grid_id: Number(activeGrid?.id) ?? 0 },
      { enabled: !!activeGrid?.id },
    );

  if (isActiveGridLoading || isArtistsLoading) {
    return (
      <div className="flex items-center space-x-4">
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
        <Skeleton className={cn(avatarClasses.lg, "rounded-full")} />
      </div>
    );
  }

  if (!activeGrid?.id || !artists?.length) {
    return null;
  }

  const validArtists = artists.filter(
    (artist) => artist?.id && artist?.username,
  );

  return <ArtistList artists={validArtists} />;
}

2 replies

TTCTheo's Typesafe Cult

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

Is there a way to use useQuery in server actions?

My aim here is to get all of the properties that useQuery (via trpc) provides - loading, error, onSuccess for mutations, etc - returned from my server action so that I can reflect that in UI updates. I'm not entirely sure what the difference in use is between next server actions and trpc's server-side api, to be honest. They seem to have a lot of overlap This is my server action:

"use server";

import { api } from "~/trpc/server";

export async function createNewGrid(id: string) {
  return api.grids.create(id);
}

"use server";

import { api } from "~/trpc/server";

export async function createNewGrid(id: string) {
  return api.grids.create(id);
}

Is there a way I can get those useful properties from useQuery where I implement this? Also, as this is happening in a client component (I need state and localStorage), is there any value to making this a server action?

2 replies

TTCTheo's Typesafe Cult

•Created by ChrisEvans on 2/12/2025 in #questions

What's the difference between the `api` exported from react.tsx and the `api` from server.ts?

I'm using Next, tRPC, & prisma. In the boilerplate, there's two api objects. One is created with createTRPCReact, and the other created with createHydrationHelpers. What's the difference in what they do? In the examples on StackBlitz there's only one, and it's created with createTRPCNext: https://stackblitz.com/run?file=example-app%2Fsrc%2Fpages%2Findex.tsx,example-app%2Fsrc%2Futils%2Fapi.ts

9 replies

TTCTheo's Typesafe Cult

•Created by ChrisEvans on 2/6/2025 in #questions

Is it possible to see cache hit/skip in the terminal when using Next with tRPC in the t3 template?

There's a feature in Next where you are shown whether your API calls were sent to the server or whether they used the cached data: https://nextjs.org/docs/app/api-reference/config/next-config-js/logging. You usually get a little { cache: HIT } for example next to your API call in the terminal. However, those docs mention that this only works out of the box with fetch. Does anyone know if there's a way to set this up with tRPC?

2 replies

TTCTheo's Typesafe Cult

•Created by ChrisEvans on 1/30/2025 in #questions

Do you really need an ORM?

I'm designing a Next app with a postgres DB in supabase, and want to use tRPC so I have some methods I can share to other apps I might make in future (using React Native or something). I've got the db defined in supabase - there's a bunch of tools that make that super easy - then I can use supabase typegen to make the requisite types. Then I can create tRPC methods using those types. So what's the use in an ORM like prisma or drizzle? What is it adding?

12 replies

Gaming

Programming