MadMax Comments

MadMax

Posts Comments

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