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