TanStack Query
Query, mutation and subscription options for TanStack Query, from one package and its React adapter.
On this page
@trpc12/tanstack-query turns a client into plain TanStack options objects (queryOptions(), mutationOptions(), keys and filters), so it works with every TanStack adapter. @trpc12/tanstack-react-query re-exports it and adds a way to provide the client to components, and a subscription primitive:
| Framework | Package | Provide the client | Subscribe |
|---|---|---|---|
| React | @trpc12/tanstack-react-query | <TrpcProvider>, useTrpc() | useSubscription |
Install the core with your framework's package and TanStack's adapter, for React:
Not on npm yet
pnpm add @trpc12/trpc effect @trpc12/tanstack-react-query @tanstack/react-querynpm install @trpc12/trpc effect @trpc12/tanstack-react-query @tanstack/react-queryyarn add @trpc12/trpc effect @trpc12/tanstack-react-query @tanstack/react-querybun add @trpc12/trpc effect @trpc12/tanstack-react-query @tanstack/react-queryThe helpers
createTrpcQueryUtils({ client }) mirrors the client's router: each procedure gets the helpers for its type, and every router and procedure gets pathKey() and pathFilter(), which match everything under it.
import { function createTrpcQueryUtils<TClient extends object>(opts: CreateTrpcQueryUtilsOptions<TClient>): TrpcQueryUtils<TClient>createTrpcQueryUtils } from '@trpc12/tanstack-query';
export const const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
createTrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>(opts: CreateTrpcQueryUtilsOptions<...>): TrpcQueryUtils<...>
CreateTrpcQueryUtilsOptions<TrpcClient<{ post: { list: Procedure<{ type: "query"; ctx: Context; meta: {}; input: { limit: number; cursor?: string | undefined; }; output: { items: Post[]; nextCursor: string | undefined; }; errors: SchemaValidationError<...>; services: never; }>; byId: Procedure<...>; create: Procedure<...>; }; }, {}, undefined, LinksTypes<...>>>.client: TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>
useQuery<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, TrpcQueryKey & {
...;
}>(options: UndefinedInitialDataOptions<...>, queryClient?: QueryClient): UseQueryResult<...> (+2 overloads)
const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
byId: QueryProcedureUtils<{
id: string;
}, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, Omit<...>>
QueryProcedureUtils<{ id: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<(TrpcError<"NOT_FOUND", undefined> & { readonly defined: false; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.queryOptions<{
id: string;
title: string;
author: string | null;
createdAt: string;
}>(opts: {
input: {
id: string;
} | unique symbol;
} & ContextBag<Omit<NonNullable<{
signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {}>, "signal" | "lastEventId">> & QueryOptionsIn<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | ... 23 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}>): QueryOptionsOut<...> (+1 overload)
input: {
id: string;
} | unique symbol
id: stringid } }));
useInfiniteQuery<{
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<...> & {
readonly defined: false;
}) | ... 19 more ... | (TrpcError<...> & {
...;
})>, InfiniteData<...>, InfiniteKey<...>, string | undefined>(options: UndefinedInitialDataInfiniteOptions<...>, queryClient?: QueryClient): UseInfiniteQueryResult<...> (+2 overloads)
const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
list: QueryProcedureUtils<{
limit: number;
cursor?: string | undefined;
}, {
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, Omit<...>>
QueryProcedureUtils<{ limit: number; cursor?: string | undefined; }, { items: { id: string; title: string; author: string | null; createdAt: string; }[]; nextCursor?: string | undefined; }, NonNullable<...>, Omit<...>>.infiniteOptions<string | undefined, InfiniteData<{
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}, string | undefined>>(opts: {
input: unique symbol | ((pageParam: string | undefined) => {
limit: number;
cursor?: string | undefined;
});
} & ContextBag<Omit<NonNullable<{
signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {}>, "signal" | "lastEventId">> & InfiniteOptionsIn<{
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}, NonNullable<...>, InfiniteData<...>, string | undefined>): InfiniteOptionsOut<...>
input: unique symbol | ((pageParam: string | undefined) => {
limit: number;
cursor?: string | undefined;
})
cursor: string | undefinedcursor: string | undefined) => ({ limit: numberlimit: 10, cursor?: string | undefinedcursor }),
initialPageParam: string | undefinedinitialPageParam: var undefinedundefined,
getNextPageParam: GetNextPageParamFunction<string | undefined, {
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}>
last: {
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}
last: {
items: {
id: string;
title: string;
author: string | null;
createdAt: string;
}[];
nextCursor?: string | undefined;
}
nextCursor?: string | undefinednextCursor,
}),
);
useMutation<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, (TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
}), {
...;
}, undefined>(options: UseMutationOptions<...>, queryClient?: QueryClient): UseMutationResult<...>
const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
create: MutationProcedureUtils<{
title: string;
}, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, Omit<...>>
MutationProcedureUtils<{ title: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<(TrpcError<"NOT_FOUND", undefined> & { readonly defined: false; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.mutationOptions<undefined>(opts?: (ContextBag<Omit<NonNullable<{
signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {}>, "signal" | "lastEventId">> & MutationOptionsIn<{
title: string;
}, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<...> & {
readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
...;
})>, undefined>) | undefined): MutationOptionsOut<...>
const queryClient: QueryClientqueryClient.QueryClient.invalidateQueries<TrpcQueryKey>(filters?: InvalidateQueryFilters<TrpcQueryKey> | undefined, options?: InvalidateOptions): Promise<void>invalidateQueries(const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
PathUtils.pathFilter(filters?: QueryFiltersIn): QueryFiltersIn & {
queryKey: TrpcQueryKey;
}
useQueries<QueryOptionsOut<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}>[], UseQueryResult<...>[]>({ queries, ...options }: {
...;
}, queryClient?: QueryClient): UseQueryResult<...>[]
queries: readonly UseQueryOptionsForUseQueries<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, TrpcQueryKey & {
...;
}>[]
const ids: string[]ids.Array<string>.map<QueryOptionsOut<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}>>(callbackfn: (value: string, index: number, array: string[]) => QueryOptionsOut<...>, thisArg?: any): QueryOptionsOut<...>[]
id: stringid) => const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
byId: QueryProcedureUtils<{
id: string;
}, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, Omit<...>>
QueryProcedureUtils<{ id: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<(TrpcError<"NOT_FOUND", undefined> & { readonly defined: false; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.queryOptions<{
id: string;
title: string;
author: string | null;
createdAt: string;
}>(opts: {
input: {
id: string;
} | unique symbol;
} & ContextBag<Omit<NonNullable<{
signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {}>, "signal" | "lastEventId">> & QueryOptionsIn<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | ... 23 more ... | (TrpcError<...> & {
...;
})>, {
id: string;
title: string;
author: string | null;
createdAt: string;
}>): QueryOptionsOut<...> (+1 overload)
input: {
id: string;
} | unique symbol
id: stringid } })),
});
useMutationState<unknown, Mutation<unknown, Error, unknown, unknown>>(options?: MutationStateOptions<unknown, Mutation<unknown, Error, unknown, unknown>> | undefined, queryClient?: QueryClient): unknown[]useMutationState({
filters?: MutationFilters<unknown, Error, unknown, unknown> | undefinedfilters: const trpc: TrpcQueryUtils<TrpcClient<{
post: {
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
};
}, {}, undefined, LinksTypes<...>>>
post: TrpcQueryUtils<ClientRouter<{
list: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
limit: number;
cursor?: string | undefined;
};
output: {
items: Post[];
nextCursor: string | undefined;
};
errors: SchemaValidationError<z.ZodObject<{
limit: z.ZodNumber;
cursor: z.ZodOptional<z.ZodString>;
}, z.core.$strip>>;
services: never;
}>;
byId: Procedure<{
type: "query";
ctx: Context;
meta: {};
input: {
id: string;
};
output: Post;
errors: TrpcError<"NOT_FOUND", {
id: string;
}> | SchemaValidationError<z.ZodObject<{
id: z.ZodString;
}, z.core.$strip>>;
services: never;
}>;
create: Procedure<...>;
}, {}, undefined, LinksTypes<...>>>
create: MutationProcedureUtils<{
title: string;
}, {
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, Omit<...>>
MutationProcedureUtils<{ title: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<(TrpcError<"NOT_FOUND", undefined> & { readonly defined: false; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.mutationFilter(filters?: Omit<MutationFilters<{
id: string;
title: string;
author: string | null;
createdAt: string;
}, NonNullable<(TrpcError<"NOT_FOUND", undefined> & {
readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
readonly defined: false;
}) | ... 20 more ... | (TrpcError<...> & {
...;
})>, {
...;
}, unknown>, "mutationKey"> | undefined): MutationFilters & {
mutationKey: TrpcMutationKey;
}
status?: MutationStatus | undefinedstatus: 'pending' }),
select?: ((mutation: Mutation<unknown, Error, unknown, unknown>) => unknown) | undefinedselect: (mutation: Mutation<unknown, Error, unknown, unknown>mutation) => mutation: Mutation<unknown, Error, unknown, unknown>mutation.Mutation<unknown, Error, unknown, unknown>.state: MutationState<unknown, Error, unknown, unknown>state.MutationState<unknown, Error, unknown, unknown>.variables: unknownvariables,
});| Procedure | Helpers |
|---|---|
| query | queryOptions(), queryKey(), queryFilter(), infiniteOptions(), infiniteKey() |
| mutation | mutationOptions(), mutationKey(), mutationFilter(), and for a streamed output streamedMutationOptions() (Streamed mutations) |
| subscription | subscriptionOptions(), liveOptions(), streamedOptions() (Subscriptions) |
input: skipToken disables a query or a subscription. The options take TanStack's own options next to input (staleTime, select, onSuccess, …), and their types follow the procedure's output and errors.
Call options
Pass what links read in context, kept apart from TanStack's own options: trpc.post.byId.queryOptions({ input, context: { dedupe: false } }) (Call options).
Cancellation
Queries and infinite queries pass TanStack's signal to the call, so TanStack cancels a fetch that nothing observes any more (the component unmounted, or the input changed) and the server's signal aborts too. queryClient.cancelQueries() does the same. A cancelled query goes back to its previous state rather than caching a late result. This was v11's abortOnUnmount: true.
Structural sharing
A refetch that returns equal data keeps the old reference, Dates, Maps and Sets included, so it doesn't re-render. queryOptions() sets structuralSharing for that; it's exported for other queries.
Credits
The Vue, Solid, Svelte and Angular adapters were built to match oRPC's TanStack Query integration.
Pages under TanStack Query
- React@trpc12/tanstack-react-query: the helpers as a module singleton or through context, Suspense, useSubscription, and server components.
- Keys and filtersHow tRPC's query keys are shaped, the filters that invalidate and read them, and keyPrefix for two APIs in one QueryClient.
- SubscriptionssubscriptionOptions() for each framework's subscription primitive, shared between components, and liveOptions() and streamedOptions() in the query cache.
- Streamed mutationsA mutation that returns an async iterable fills in as it streams, with chunksOptions(), and stops on unmount or on demand; long jobs pair a mutation with a subscription.
- Hydration and offlinehydrationOptions() sends the cache to the browser with the client's serializer, and persisted mutations resume with setMutationDefaults.