canastro Posts - Answer Overflow

canastro

Explore posts from servers

•Created by canastro on 4/18/2025 in #❓-help

`useSuspenseQuery` returns unexpected `.json` and `.metadata` (SuperJSON)

I'm following the docs here: https://trpc.io/docs/client/tanstack-react-query/server-components I have this query client builder:

export const makeQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

export const makeQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

I have this prefetch:

const getQueryClient = React.cache(makeQueryClient);
export const createTRPC = async (slug?: string) => {
    const headersList = await headers();
    const ctx = await createContext(headersList, slug);
    
    return createTRPCOptionsProxy({
        ctx,
        router: appRouter,
        queryClient: getQueryClient(),
    });
};

...

function async MyComponent() {
  const trpc = await createTRPC(slug);
  void prefetch(trpc.story.listByPublication.queryOptions());
}

const getQueryClient = React.cache(makeQueryClient);
export const createTRPC = async (slug?: string) => {
    const headersList = await headers();
    const ctx = await createContext(headersList, slug);
    
    return createTRPCOptionsProxy({
        ctx,
        router: appRouter,
        queryClient: getQueryClient(),
    });
};

...

function async MyComponent() {
  const trpc = await createTRPC(slug);
  void prefetch(trpc.story.listByPublication.queryOptions());
}

And when, on my client component, I use a suspense query:

'use client';

export default function MyClientComponent(props: { slug: string }) {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.story.listByPublication.queryOptions());

'use client';

export default function MyClientComponent(props: { slug: string }) {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.story.listByPublication.queryOptions());

I receive an object with .json and .metadata which seem to be be stuff from superJSON, but that are not properly typed. I haven't seen this in previous versions... it looked like the values were properly deserialized before being returned, but now I seem to receive the raw superjson value.... am I missing something?

4 replies

TTCTheo's Typesafe Cult

•Created by canastro on 5/6/2024 in #questions

T3 - pass current tenant slug into TRPC context

I'm trying to create a Saas product with T3 and I need to have the tenant slug in the TRPC context so that I can try to do the operations in the correct tenant. I was able to use headers from the react client to pass in the slug, but I don't know a good way to solve this for server components. Does anyone have a good example or can provide some guidance for this?

14 replies

Gaming

Programming