MadMax
MadMax
Explore posts from servers
TtRPC
Created by MadMax on 4/1/2024 in #❓-help
Tried to access "$types.prototype" which is not available at runtime
It works now thanks for working on this...
8 replies
TtRPC
Created by MadMax on 4/1/2024 in #❓-help
Tried to access "$types.prototype" which is not available at runtime
Please help
8 replies
TtRPC
Created by MadMax on 4/1/2024 in #❓-help
Tried to access "$types.prototype" which is not available at runtime
and this is root.ts
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;
All other files are as it is that comes from create t3 app
8 replies
TtRPC
Created by MadMax on 4/1/2024 in #❓-help
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
TtRPC
Created by MadMax on 1/21/2024 in #❓-help
How to infer query types on client?
on client
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
test has type User[] an empty array
6 replies
TtRPC
Created by MadMax on 1/21/2024 in #❓-help
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;
})
hovering over value clearly has type
(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
TtRPC
Created by MadMax on 1/21/2024 in #❓-help
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
TtRPC
Created by MadMax on 1/21/2024 in #❓-help
How to infer query types on client?
This also doesnt work
return res.value as Tenant
return res.value as Tenant
hovering over test2 shows this data is still type any
(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