MadMax
Explore posts from serversTried to access "$types.prototype" which is not available at runtime
and this is root.ts
All other files are as it is that comes from create t3 app
import { initTRPC } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";
import { db } from "@/server/db";
import { getServerSession } from "@/lib/server-session";
export const createTRPCContext = async (opts: { headers: Headers }) => {
const session = await getServerSession();
return {
session,
db,
...opts,
};
};
const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});
export const createCallerFactory = t.createCallerFactory;
export const createTRPCRouter = t.router;
export const procedure = t.procedure;
import { initTRPC } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";
import { db } from "@/server/db";
import { getServerSession } from "@/lib/server-session";
export const createTRPCContext = async (opts: { headers: Headers }) => {
const session = await getServerSession();
return {
session,
db,
...opts,
};
};
const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});
export const createCallerFactory = t.createCallerFactory;
export const createTRPCRouter = t.router;
export const procedure = t.procedure;
8 replies
Tried to access "$types.prototype" which is not available at runtime
React.tsx
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpLink, loggerLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import SuperJSON from "superjson";
import { type AppRouter } from "@/server/api/root";
const createQueryClient = () => new QueryClient();
let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
if (typeof window === "undefined") {
// Server: always make a new query client
return createQueryClient();
}
// Browser: use singleton pattern to keep the same query client
return (clientQueryClientSingleton ??= createQueryClient());
};
export const api = createTRPCReact<AppRouter>();
export function TRPCReactProvider(props: { children: React.ReactNode }) {
const queryClient = getQueryClient();
const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
httpLink({
transformer: SuperJSON,
url: getBaseUrl() + "/api/trpc",
headers: () => {
const headers = new Headers();
headers.set("x-trpc-source", "nextjs-react");
return headers;
},
}),
],
}),
);
return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}
function getBaseUrl() {
if (typeof window !== "undefined") return window.location.origin;
// if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
return `http://localhost:${process.env.PORT ?? 3000}`;
}
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpLink, loggerLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import SuperJSON from "superjson";
import { type AppRouter } from "@/server/api/root";
const createQueryClient = () => new QueryClient();
let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
if (typeof window === "undefined") {
// Server: always make a new query client
return createQueryClient();
}
// Browser: use singleton pattern to keep the same query client
return (clientQueryClientSingleton ??= createQueryClient());
};
export const api = createTRPCReact<AppRouter>();
export function TRPCReactProvider(props: { children: React.ReactNode }) {
const queryClient = getQueryClient();
const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
httpLink({
transformer: SuperJSON,
url: getBaseUrl() + "/api/trpc",
headers: () => {
const headers = new Headers();
headers.set("x-trpc-source", "nextjs-react");
return headers;
},
}),
],
}),
);
return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}
function getBaseUrl() {
if (typeof window !== "undefined") return window.location.origin;
// if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
return `http://localhost:${process.env.PORT ?? 3000}`;
}
8 replies
How to infer query types on client?
on client
test has type User[] an empty array
type tenatType = RouterOutputs["tenant"]["getUsers"] | undefined;
const test: tenatType = trpc.tenant.getUsers.useQuery().data
type tenatType = RouterOutputs["tenant"]["getUsers"] | undefined;
const test: tenatType = trpc.tenant.getUsers.useQuery().data
6 replies
How to infer query types on client?
getUsers: procedure.query(async ({ ctx }): Promise<User[]> => {
const res = await getAllUsers(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Users not found",
});
}
return res.value;
})
getUsers: procedure.query(async ({ ctx }): Promise<User[]> => {
const res = await getAllUsers(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Users not found",
});
}
return res.value;
})
(property) Result<{ name: string; email: string | null; permissions: unknown; role: string | null; id: string; createdAt: string | null; tenantId: string | null; cognitoId: string | null; }[], Error>.value: {
name: string;
email: string | null;
permissions: unknown;
role: string | null;
id: string;
createdAt: string | null;
tenantId: string | null;
cognitoId: string | null;
}[]
(property) Result<{ name: string; email: string | null; permissions: unknown; role: string | null; id: string; createdAt: string | null; tenantId: string | null; cognitoId: string | null; }[], Error>.value: {
name: string;
email: string | null;
permissions: unknown;
role: string | null;
id: string;
createdAt: string | null;
tenantId: string | null;
cognitoId: string | null;
}[]
6 replies
How to infer query types on client?
While this works I wonder why
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return {
name: res.value.name,
website: res.value.website,
email: res.value.email,
picture: res.value.picture,
};
}),
getTenant: procedure.query(async ({ ctx }) => {
const res = await getTenantById(ctx.user.tenant_id);
if (res.isError() || !res.value) {
throw new TRPCError({
code: "NOT_FOUND",
message: "Tenant not found",
});
}
return {
name: res.value.name,
website: res.value.website,
email: res.value.email,
picture: res.value.picture,
};
}),
6 replies
How to infer query types on client?
This also doesnt work
hovering over test2 shows this data is still type any
return res.value as Tenant
return res.value as Tenant
(property) getTenant: DecoratedQuery<RootConfig<{
ctx: {
user: IdToken;
};
meta: object;
errorShape: DefaultErrorShape;
transformer: typeof SuperJSON;
}>, QueryProcedure<{
input: void;
output: Tenant;
}>>
(property) getTenant: DecoratedQuery<RootConfig<{
ctx: {
user: IdToken;
};
meta: object;
errorShape: DefaultErrorShape;
transformer: typeof SuperJSON;
}>, QueryProcedure<{
input: void;
output: Tenant;
}>>
6 replies