Theo's Typesafe Cult•2y ago

tRPC useQuery ReturnType

Working on a custom auth provider (just wanted to do all the stuff myself, learn the flow, ya know) and trying to get the result of a trpc useQuery passed through context. I can't seem to figure out how to type the context, as the data always comes out as unknown.

import { procedure, router } from "../t";

export const auth = router({
  session: procedure.query(() => null),
});

import { procedure, router } from "../t";

export const auth = router({
  session: procedure.query(() => null),
});

import { createContext, useContext } from "react";

import { type Uninitialized, uninitialized } from "client/react/context";
import trpc from "client/trpc";

type SessionContext = Pick<ReturnType<typeof trpc.auth.session.useQuery>, "data" | "status">;
// hovering in VSCode gives me:
// type SessionContext = {
//    data: unknown;
//    status: "error" | "success" | "loading";
//}
const sessionContext = createContext<SessionContext | Uninitialized>(uninitialized);

export const useSession = () => {
  const session = useContext(sessionContext);
  if (session === uninitialized) throw new Error("useSession Must Be Used Within A SessionProvider");
  return session; 
}

export type SessionProviderProps = {
  children: React.ReactNode;
};
export const SessionProviderProvider = ({ children }: SessionProviderProps) => {
  const { data, status } = trpc.auth.session.useQuery();
  //      ^^^^ correctly typed as null (placeholder)

  return (
    <sessionContext.Provider value={{ data, status }}>{children}</sessionContext.Provider>
                                   // ^^^^ not correctly typed (unknown)
  )
}

import { createContext, useContext } from "react";

import { type Uninitialized, uninitialized } from "client/react/context";
import trpc from "client/trpc";

type SessionContext = Pick<ReturnType<typeof trpc.auth.session.useQuery>, "data" | "status">;
// hovering in VSCode gives me:
// type SessionContext = {
//    data: unknown;
//    status: "error" | "success" | "loading";
//}
const sessionContext = createContext<SessionContext | Uninitialized>(uninitialized);

export const useSession = () => {
  const session = useContext(sessionContext);
  if (session === uninitialized) throw new Error("useSession Must Be Used Within A SessionProvider");
  return session; 
}

export type SessionProviderProps = {
  children: React.ReactNode;
};
export const SessionProviderProvider = ({ children }: SessionProviderProps) => {
  const { data, status } = trpc.auth.session.useQuery();
  //      ^^^^ correctly typed as null (placeholder)

  return (
    <sessionContext.Provider value={{ data, status }}>{children}</sessionContext.Provider>
                                   // ^^^^ not correctly typed (unknown)
  )
}

6 Replies

cje•2y ago

https://trpc.io/docs/infer-types#inference-helpers

Inferring Types | tRPC

It is often useful to wrap functionality of your @trpc/client or @trpc/react-query api within other functions. For this purpose, it's necessary to be able to infer input types and output types generated by your @trpc/server router.

ryanagillie•2y ago

this just gives me the actual return type, not the useQuery result call (which I want for some of the other rqc specific stuff, like status)

cje•2y ago

oh you can't get the type of an entire useQuery Alex explained why a while ago, cant remember exactly but basically it's not coming anytime soon

Unknown User•2y ago

Message Not Public

ryanagillie•2y ago

argh, used to be in v9 😢 yeah this doesn't work. Really needs a cast to a QueryResult while also keeping the data / error types. WAIT Actually it kinda did work?

export type SessionContext = Pick<UseQueryResult<inferRouterOutputs<AppRouter>["auth"]["session"]>,"data" | "status">;

export type SessionContext = Pick<UseQueryResult<inferRouterOutputs<AppRouter>["auth"]["session"]>,"data" | "status">;

this is about as close as I can get need some way to type error This is just dumb because I'm recreating the error by hand lol

Unknown User•2y ago

Message Not Public

Gaming

Programming

tRPC useQuery ReturnType