I'm trying to get type for queries/mutations returned from trpc use hooks, but they are different
Hello, can anyone tell me please how I can get rid of ts errors when trying to accomplish what I mentioned in title?
I tried asserting as types from context from screen 1, but it throws errors too
Solution:Jump to solution
This is how I did it:
```tsx
import { AppRouter } from "../router"
import { TRPCClientErrorLike } from "@trpc/client"
import { UseTRPCQueryResult } from "@trpc/react-query/shared"...
4 Replies
Type '{ userQuery: UseTRPCQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<RouteGenericInterface, ... 6 more ..., ResolveFastifyRequestType<...>>; res: Fastify...' is not assignable to type 'AuthContextValue'.
Types of property 'userQuery' are incompatible.
Type 'UseTRPCQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<RouteGenericInterface, ... 6 more ..., ResolveFastifyRequestType<...>>; res: FastifyReply<...>; }...' is not assignable to type 'UseQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Type 'TRPCHookResult & QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<...>; res: FastifyReply<...>; }; meta: object; errorShape: DefaultE...' is not assignable to type 'UseQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Type 'TRPCHookResult & QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<...>; res: FastifyReply<...>; }; meta: object; errorShape: DefaultE...' is not assignable to type 'QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Types of property 'error' are incompatible.
Type '{ userQuery: UseTRPCQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<RouteGenericInterface, ... 6 more ..., ResolveFastifyRequestType<...>>; res: Fastify...' is not assignable to type 'AuthContextValue'.
Types of property 'userQuery' are incompatible.
Type 'UseTRPCQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<RouteGenericInterface, ... 6 more ..., ResolveFastifyRequestType<...>>; res: FastifyReply<...>; }...' is not assignable to type 'UseQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Type 'TRPCHookResult & QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<...>; res: FastifyReply<...>; }; meta: object; errorShape: DefaultE...' is not assignable to type 'UseQueryResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Type 'TRPCHookResult & QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { session: CustomSession; req: FastifyRequest<...>; res: FastifyReply<...>; }; meta: object; errorShape: DefaultE...' is not assignable to type 'QueryObserverRefetchErrorResult<{ success: boolean; user: { username: string; password: string; id: number; }; }, Error>'.
Types of property 'error' are incompatible.
Solution
This is how I did it:
And here is the same for the new
You should be able to build types for
import { AppRouter } from "../router"
import { TRPCClientErrorLike } from "@trpc/client"
import { UseTRPCQueryResult } from "@trpc/react-query/shared"
import { inferRouterOutputs } from "@trpc/server"
export type TRPCClientError = TRPCClientErrorLike<AppRouter>
export type TRPCUseQueryResult<TData> = UseTRPCQueryResult<
TData,
TRPCClientError
>
export type RouterOutput = inferRouterOutputs<AppRouter>
import { AppRouter } from "../router"
import { TRPCClientErrorLike } from "@trpc/client"
import { UseTRPCQueryResult } from "@trpc/react-query/shared"
import { inferRouterOutputs } from "@trpc/server"
export type TRPCClientError = TRPCClientErrorLike<AppRouter>
export type TRPCUseQueryResult<TData> = UseTRPCQueryResult<
TData,
TRPCClientError
>
export type RouterOutput = inferRouterOutputs<AppRouter>
interface UserContext {
user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}
const UserContext = createContext<UserContext | null>(null)
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
const user = trpc.public.user.me.useQuery()
return (
<UserContext.Provider value={{ user }}>
{children}
</UserContext.Provider>
)
}
interface UserContext {
user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}
const UserContext = createContext<UserContext | null>(null)
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
const user = trpc.public.user.me.useQuery()
return (
<UserContext.Provider value={{ user }}>
{children}
</UserContext.Provider>
)
}
tanstack-react-query integration:
import { AppRouter, RouterOutput } from "..."
import { TRPCClientErrorLike } from "@trpc/client"
import { UseQueryResult } from "@tanstack/react-query"
export { useTRPC, type RouterOutput }
export type TRPCClientError = TRPCClientErrorLike<AppRouter>
export type TRPCUseQueryResult<T> = UseQueryResult<T, TRPCClientError>
import { AppRouter, RouterOutput } from "..."
import { TRPCClientErrorLike } from "@trpc/client"
import { UseQueryResult } from "@tanstack/react-query"
export { useTRPC, type RouterOutput }
export type TRPCClientError = TRPCClientErrorLike<AppRouter>
export type TRPCUseQueryResult<T> = UseQueryResult<T, TRPCClientError>
interface UserContext {
user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
const trpc = useTRPC()
const user = useQuery(trpc.public.user.me.queryOptions())
return (
<UserContext.Provider value={{ user }}>
{children}
</UserContext.Provider>
)
}
interface UserContext {
user: TRPCUseQueryResult<RouterOutput["public"]["user"]["me"]>
}
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
const trpc = useTRPC()
const user = useQuery(trpc.public.user.me.queryOptions())
return (
<UserContext.Provider value={{ user }}>
{children}
</UserContext.Provider>
)
}
useMutation the same way. I have no examples for thatThis is fantastic @FluX thank you. this should be in the docs somewhere
Thank you very much