tRPC•2mo ago

transfer class instances

The AI SDK uses the Chat class as the abstraction that one is supposed to share: https://ai-sdk.dev/cookbook/next/use-shared-chat-context

the useChat hook needs the same reference in order to not rerender: https://github.com/vercel/ai/blob/e15b5458f1aaced8ea854823044ea3d125dcaac8/packages/react/src/use-chat.ts#L67

My current soultion is to wrap trpc with a "normal" useQuery

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

export function useChatInstanceQuery(chatId?: string) {
  const trpc = useTRPC();
  const getToken = useGetToken();
  const queryClient = useQueryClient();

  const query = useQuery({
    queryKey: ["chats", chatId],
    staleTime: Infinity,
    queryFn: chatId
      ? async () => {
          const messages = await queryClient.fetchQuery(
            trpc.getChatHistory.queryOptions({ chatId }),
          );

          const chat = createChat({ chatId, getToken, messages });
          return chat;
        }
      : skipToken,
  });
  return query;
}

Is there another (better?) way?

i thought about adding conditional logic in the transformer that checks for

`instanceof Chat

`instanceof Chat

on the backend I am unsure how to do this client side and if this a good approach in generel.

Share useChat State Across Components

Learn how to share a chat instance across multiple components with useChat and easily reset the chat.

GitHub

ai/packages/react/src/use-chat.ts at e15b5458f1aaced8ea854823044ea3...

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents - vercel/ai

Nick•11/14/25, 3:15 PM

Would this be solved with superjson?

import { Decimal } from 'decimal.js';

SuperJSON.registerCustom<Decimal, string>(
  {
    isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
    serialize: v => v.toJSON(),
    deserialize: v => new Decimal(v),
  },
  'decimal.js'
);

import { Decimal } from 'decimal.js';

SuperJSON.registerCustom<Decimal, string>(
  {
    isApplicable: (v): v is Decimal => Decimal.isDecimal(v),
    serialize: v => v.toJSON(),
    deserialize: v => new Decimal(v),
  },
  'decimal.js'
);

Nick•11/14/25, 3:15 PM

https://github.com/flightcontrolhq/superjson

BrainlaqOP•11/16/25, 12:55 PM

Thanks a lot for the response.

Yes this seems to work but I realized that the tilte is not accurate.

WIth this I have to create a react Chat instance on the server just and manually get the values out of it in the custom serialization.

What I actually want is to return JSON from the backend but have a stable chat instance in the frontend.

This might be out of the scope of trpc as I want to receive something different in the frontend then what the backend actually send.

Nick•11/16/25, 12:56 PM

Yes and it might be slightly off the beaten track with AI SDK as they have helpers to move data from client to server and vice versa but all their examples are over plain http, so it will take some figuring out. I would look at how they recommend doing it and adapt from there