`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,
      },
    },
  });

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());
}

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());

'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

.json

and

.metadata

.metadata

.metadata

.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?

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

Similar Threads

Similar Threads

Similar Threads