Mr. JokerM
tRPC•11mo ago•
6 replies
Mr. Joker

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
image.png
image.png
image.png
Solution
This is how I did it:
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>
    )
}


And here is the same for the new 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>


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


You should be able to build types for useMutation the same way. I have no examples for that
Jump to solution
Was this page helpful?