Skip to content
tRPC

useQuery()

On this page

useQuery is the primary hook for data fetching, it works similarly to @tanstack/react-query's useQuery, but with some trpc specific options and additional features like streaming.

Signature

declare function function useQuery(input: TInput | SkipToken, opts?: UseTRPCQueryOptions): voiduseQuery(
  input: unknowninput: type TInput = unknownTInput | type SkipToken = symbolSkipToken,
  opts: UseTRPCQueryOptions | undefinedopts?: UseTRPCQueryOptions,
): void;

interface UseTRPCQueryOptions
  extends UseQueryOptions {
  
UseTRPCQueryOptions.trpc: {
    ssr?: boolean;
    abortOnUnmount?: boolean;
    context?: Record<string, unknown>;
}
trpc: {
    ssr?: boolean | undefinedssr?: boolean;
    abortOnUnmount?: boolean | undefinedabortOnUnmount?: boolean;
    context?: Record<string, unknown> | undefinedcontext?: type Record<K extends keyof any, T> = { [P in K]: T; }Record<string, unknown>;
  }
}

Since UseTRPCQueryOptions extends @tanstack/react-query's UseQueryOptions, you can use any of their options here such as enabled, refetchOnWindowFocus, etc. We also have some trpc specific options that let you opt in or out of certain behaviors on a per-procedure level:

  • trpc.ssr: If you have ssr: true in your global config, you can set this to false to disable ssr for this particular query. Note that this does not work the other way around, i.e., you can not enable ssr on a procedure if your global config is set to false.
  • trpc.abortOnUnmount: Override the global config and opt in or out of aborting queries on unmount.
  • trpc.context: Add extra meta data that could be used in Links.

You'll notice that you get autocompletion on the input based on what you have set in your input schema on your backend.

Example usage

Backend code
server/routers/_app.ts
import { const initTRPC: TRPCBuilder<object, object>initTRPC } from '@trpc/server';
import { import zz } from 'zod';

export const 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t = const initTRPC: TRPCBuilder<object, object>initTRPC.
TRPCBuilder<object, object>.create<RuntimeConfigOptions<object, object>>(opts?: RuntimeConfigOptions<object, object> | undefined): TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
create();

export const 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter = 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.
TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
router({
  // Create procedure at path 'hello'
  
hello: QueryProcedure<{
    input: {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>
hello: 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure
    // using zod schema to validate and infer input values
    .
ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodOptional<z.ZodNullable<z.ZodObject<{
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
}, z.core.$strip>>>>(schema: z.ZodOptional<z.ZodNullable<z.ZodObject<{
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
}, z.core.$strip>>>): ProcedureBuilder<object, object, object, {
    text?: string | null | undefined;
} | null | undefined, {
    text?: string | null | undefined;
} | null | undefined, UnsetMarker, UnsetMarker, false, DefaultErrorShape>
input(
      import zz
        .
function object<{
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
}>(shape?: {
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueInvalidType<unknown> | z.core.$ZodIssueUnrecognizedKeys>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
}, z.core.$strip>
object({
          text: z.ZodOptional<z.ZodNullable<z.ZodString>>text: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string().ZodType<any, any, $ZodStringInternals<string>>.nullish(): z.ZodOptional<z.ZodNullable<z.ZodString>>nullish(),
        })
        .
ZodType<any, any, $ZodObjectInternals<{ text: ZodOptional<ZodNullable<ZodString>>; }, $strip>>.nullish(): z.ZodOptional<z.ZodNullable<z.ZodObject<{
    text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
}, z.core.$strip>>>
nullish(),
    )
    .
ProcedureBuilder<object, object, object, { text?: string | null | undefined; } | null | undefined, { text?: string | null | undefined; } | null | undefined, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    greeting: string;
}>(resolver: ProcedureResolver<object, object, object, {
    text?: string | null | undefined;
} | null | undefined, UnsetMarker, {
    greeting: string;
}>): QueryProcedure<{
    input: {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>
query((
opts: ProcedureResolverOptions<object, object, object, {
    text?: string | null | undefined;
} | null | undefined>
opts) => {
      return {
        greeting: stringgreeting: `hello ${
opts: ProcedureResolverOptions<object, object, object, {
    text?: string | null | undefined;
} | null | undefined>
opts.
ProcedureResolverOptions<object, object, object, { text?: string | null | undefined; } | null | undefined>.input: {
    text?: string | null | undefined;
} | null | undefined
input?.text?: string | null | undefinedtext ?? 'world'}`,
      };
    }),
});

export type 
type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>
AppRouter = typeof 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter;
components/MyComponent.tsx
import { 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc } from '../utils/trpc';

export function function MyComponent(): React.JSX.ElementMyComponent() {
  // input is optional, so we don't have to pass second argument
  const 
const helloNoArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloNoArgs = 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc.
hello: DecoratedQuery<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>
hello.
useQuery: ProcedureUseQuery
<{
    greeting: string;
}, {
    greeting: string;
}>(input: void | {
    text?: string | null | undefined;
} | unique symbol | null | undefined, opts?: UseTRPCQueryOptions<{
    greeting: string;
}, {
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    greeting: string;
}> | undefined) => UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)
useQuery();
  const 
const helloWithArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloWithArgs = 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    hello: QueryProcedure<{
        input: {
            text?: string | null | undefined;
        } | null | undefined;
        output: {
            greeting: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc.
hello: DecoratedQuery<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>
hello.
useQuery: ProcedureUseQuery
<{
    greeting: string;
}, {
    greeting: string;
}>(input: void | {
    text?: string | null | undefined;
} | unique symbol | null | undefined, opts?: UseTRPCQueryOptions<{
    greeting: string;
}, {
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    greeting: string;
}> | undefined) => UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)
useQuery({ text?: string | null | undefinedtext: 'client' });

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>Hello World Example</React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
          helloNoArgs ({
const helloNoArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloNoArgs.status: "error" | "success" | "pending"status}):{' '}
          <React.JSX.IntrinsicElements.pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>pre>{var JSON: JSONJSON.JSON.stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string (+1 overload)stringify(
const helloNoArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloNoArgs.
data: {
    greeting: string;
} | undefined
data, null, 2)}</React.JSX.IntrinsicElements.pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>pre>
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
          helloWithArgs ({
const helloWithArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloWithArgs.status: "error" | "success" | "pending"status}):{' '}
          <React.JSX.IntrinsicElements.pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>pre>{var JSON: JSONJSON.JSON.stringify(value: any, replacer?: (number | string)[] | null, space?: string | number): string (+1 overload)stringify(
const helloWithArgs: UseTRPCQueryResult<{
    greeting: string;
}, TRPCClientErrorLike<{
    input: void | {
        text?: string | null | undefined;
    } | null | undefined;
    output: {
        greeting: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
helloWithArgs.
data: {
    greeting: string;
} | undefined
data, null, 2)}</React.JSX.IntrinsicElements.pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>pre>
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

Streaming responses using async generators

When returning an async generator in a query, you will:

  • Get the results of the iterator in the data-property as an array which updates as the response comes in
  • The status will be success as soon as the first chunk is received.
  • The fetchStatus property which will be fetching until the last chunk is received.

Example

server/routers/_app.ts
import { const initTRPC: TRPCBuilder<object, object>initTRPC } from '@trpc/server';

const 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t = const initTRPC: TRPCBuilder<object, object>initTRPC.
TRPCBuilder<object, object>.create<RuntimeConfigOptions<object, object>>(opts?: RuntimeConfigOptions<object, object> | undefined): TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
create();

const 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter = 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.
TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
router({
  
iterable: QueryProcedure<{
    input: void;
    output: AsyncGenerator<number, void, unknown>;
    meta: object;
    errorShape: DefaultErrorShape;
}>
iterable: 
const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>
t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure.
ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<AsyncGenerator<number, void, unknown>>(resolver: ProcedureResolver<object, object, object, UnsetMarker, UnsetMarker, AsyncGenerator<number, void, unknown>>): QueryProcedure<{
    input: void;
    output: AsyncGenerator<number, void, unknown>;
    meta: object;
    errorShape: DefaultErrorShape;
}>
query(async function* () {
    for (let let i: numberi = 0; let i: numberi < 3; let i: numberi++) {
      await new 
var Promise: PromiseConstructor
new <unknown>(executor: (resolve: (value: unknown) => void, reject: (reason?: any) => void) => void) => Promise<unknown>
Promise((resolve: (value: unknown) => voidresolve) => function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): numbersetTimeout(resolve: (value: unknown) => voidresolve, 500));
      yield let i: numberi;
    }
  }),
});

export type 
type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>> & DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>
AppRouter = typeof 
const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
appRouter;
components/MyComponent.tsx
import React, { const Fragment: React.ExoticComponent<React.FragmentProps>Fragment } from 'react';
import { 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc } from '../utils/trpc';

export function function MyComponent(): React.JSX.ElementMyComponent() {
  const 
const result: UseTRPCQueryResult<AsyncIterable<number, never, unknown>, TRPCClientErrorLike<{
    input: void;
    output: AsyncIterable<number, never, unknown>;
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
result = 
const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    iterable: QueryProcedure<{
        input: void;
        output: AsyncGenerator<number, void, unknown>;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>
trpc.
iterable: DecoratedQuery<{
    input: void;
    output: AsyncIterable<number, never, unknown>;
    transformer: false;
    errorShape: DefaultErrorShape;
}>
iterable.
useQuery: ProcedureUseQuery
<AsyncIterable<number, never, unknown>, AsyncIterable<number, never, unknown>>(input: void | unique symbol, opts?: UseTRPCQueryOptions<AsyncIterable<number, never, unknown>, AsyncIterable<number, never, unknown>, TRPCClientErrorLike<{
    input: void;
    output: AsyncIterable<number, never, unknown>;
    transformer: false;
    errorShape: DefaultErrorShape;
}>, AsyncIterable<number, never, unknown>> | undefined) => UseTRPCQueryResult<AsyncIterable<number, never, unknown>, TRPCClientErrorLike<...>> (+1 overload)
useQuery();

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      {
const result: UseTRPCQueryResult<AsyncIterable<number, never, unknown>, TRPCClientErrorLike<{
    input: void;
    output: AsyncIterable<number, never, unknown>;
    transformer: false;
    errorShape: DefaultErrorShape;
}>>
result.data: number[] | undefineddata?.Array<number>.map<U>(callbackfn: (value: number, index: number, array: number[]) => U, thisArg?: any): U[]map((chunk: numberchunk, index: numberindex) => (
        <const Fragment: React.ExoticComponent<React.FragmentProps>Fragment React.Attributes.key?: React.Key | null | undefinedkey={index: numberindex}>{chunk: numberchunk}</const Fragment: React.ExoticComponent<React.FragmentProps>Fragment>
      ))}
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

result properties while streaming:

statusfetchStatusdata
'pending''fetching'undefined
'success''fetching'[]
'success''fetching'[0]
'success''fetching'[0, 1]
'success''fetching'[0, 1, 2]
'success''idle'[0, 1, 2]