Trader Launchpad Comments - tRPC

Trader Launchpad

•Created by Trader Launchpad on 2/14/2024 in #❓-help

Thoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpc

The matcher is stock from nextjs documentation, and it runs on every route including /api and trpc calls. When I have this middleware enabled I am getting an error on the front page of t3 app, on the standard post.hello trpc call:

RequestContentLengthMismatchError: Request body length does not match content-length header

RequestContentLengthMismatchError: Request body length does not match content-length header

When I disable the middleware, this issue goes away. I believe it is due to my nextjs middleware matcher running on every request, and blocking /siwe as a publicpath if they ARE authenticated, sending them to / and something is getitng lost on the trpc side. To clarify on a page reload the middleware is hit multiple times, once on "/", once on "/siwe" which is triggered every page reload by the ClientProvider. The error only happens on the call that originated from "/siwe" Strangely if I simply move /siwe to /api/siwe, the error goes away. Also if I remove the

if (isPublicPath) {

if (isPublicPath) {

logic the error goes away. What is the correct way to setup the nextjs middleware in this situation? Should I just add /siwe as an ignored route in the middleware matcher? Should i be putting my /siwe logic in trpc routes and calling it that way (api.user.getNonce, api.user.verifyNonce. api.user.createSession, ect)?

4 replies

•Created by Trader Launchpad on 2/14/2024 in #❓-help

Thoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpc

const siweConfig = {
  getNonce: async () => {
    const res = await fetch(`/siwe`, { method: "PUT" });
    if (!res.ok) throw new Error("Failed to fetch SIWE nonce");

    return res.text();
  },
  createMessage: ({ nonce, address, chainId }) => {
    return new SiweMessage({
      nonce,
      chainId,
      address,
      version: "1",
      uri: window.location.origin,
      domain: window.location.host,
      statement: "Sign In With Ethereum to prove you control this wallet.",
    }).prepareMessage();
  },
  verifyMessage: ({ message, signature }) => {
    return fetch(`/siwe`, {
      method: "POST",
      body: JSON.stringify({ message, signature }),
      headers: { "Content-Type": "application/json" },
    }).then((res) => res.ok);
  },
  getSession: async () => {
    const res = await fetch(`/siwe`);
    if (!res.ok) throw new Error("Failed to fetch SIWE session");

    const { address, chainId } = await res.json();
    return address && chainId ? { address, chainId } : null;
  },
  signOut: () => fetch(`/siwe`, { method: "DELETE" }).then((res) => res.ok),
} satisfies SIWEConfig;

const siweConfig = {
  getNonce: async () => {
    const res = await fetch(`/siwe`, { method: "PUT" });
    if (!res.ok) throw new Error("Failed to fetch SIWE nonce");

    return res.text();
  },
  createMessage: ({ nonce, address, chainId }) => {
    return new SiweMessage({
      nonce,
      chainId,
      address,
      version: "1",
      uri: window.location.origin,
      domain: window.location.host,
      statement: "Sign In With Ethereum to prove you control this wallet.",
    }).prepareMessage();
  },
  verifyMessage: ({ message, signature }) => {
    return fetch(`/siwe`, {
      method: "POST",
      body: JSON.stringify({ message, signature }),
      headers: { "Content-Type": "application/json" },
    }).then((res) => res.ok);
  },
  getSession: async () => {
    const res = await fetch(`/siwe`);
    if (!res.ok) throw new Error("Failed to fetch SIWE session");

    const { address, chainId } = await res.json();
    return address && chainId ? { address, chainId } : null;
  },
  signOut: () => fetch(`/siwe`, { method: "DELETE" }).then((res) => res.ok),
} satisfies SIWEConfig;

Then i have setup a custom nextjs middleware that checks the cookie, and redirects based on authenticated or unauthenticated status:

const PUBLIC_PATHS = ["/register", "/login", "/reset-password", "/siwe"];
...
const session = await Session.fromRequest(request);
 if (session.address) {
    // User is authenticated
    console.log("Authenticated");
    if (isPublicPath) {
      // Redirect authenticated users away from public paths to the home page
      url.pathname = "/";
      return NextResponse.redirect(url);
    }
...
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

const PUBLIC_PATHS = ["/register", "/login", "/reset-password", "/siwe"];
...
const session = await Session.fromRequest(request);
 if (session.address) {
    // User is authenticated
    console.log("Authenticated");
    if (isPublicPath) {
      // Redirect authenticated users away from public paths to the home page
      url.pathname = "/";
      return NextResponse.redirect(url);
    }
...
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

4 replies

•Created by Trader Launchpad on 11/9/2023 in #❓-help

[How To?] Create a record in database on form submission...

removed the uuid database column and all works as expected. Its some error im my implementation of uuids in sqlite, not a trpc issue. if anyone has a method for storing uuids in a cloudflare d1 database, sqlite, let me know

5 replies

•Created by Trader Launchpad on 11/9/2023 in #❓-help

[How To?] Create a record in database on form submission...

Actually, looking now i can see an error:

 uuid3.replace is not a function

 uuid3.replace is not a function

on the trpc call. I have a uuid field I created that is supposed to work with sqlite. Ill remove it and try to insert a record just using basic id and report back. If anyone has an implementation of binary uuids in sqlite id love to see it.

5 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

i accepted a solution to my og problem that this thread was titled after. I am still trying to address the issue with BigInts

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

as an update I added:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(BigInt.prototype as any).toJSON = function () {
  return Number(this);
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(BigInt.prototype as any).toJSON = function () {
  return Number(this);
};

to the top of my coursecomponent file and it seems to have fixed the error Reference: https://github.com/prisma/studio/issues/614#issuecomment-1186637811

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

if i change to:

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID,
    {
      enabled: !!currentItem?.ID,
    },
  );

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID,
    {
      enabled: !!currentItem?.ID,
    },
  );

I get inline error:

No overload matches this call.
  Overload 1 of 2, '(input: bigint, opts: DefinedUseTRPCQueryOptions<"lesson.videoUri", bigint, wp_postmeta | null, wp_postmeta | null, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<...>; }; meta: object; errorShape: DefaultErrorShape; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: typeof unsetMarker; }, wp_postmeta | null>>>): DefinedUseTRPCQueryResult<...>', gave the following error.
    Argument of type 'bigint | undefined' is not assignable to parameter of type 'bigint'.
      Type 'undefined' is not assignable to type 'bigint'.
  Overload 2 of 2, '(input: bigint, opts?: UseTRPCQueryOptions<"lesson.videoUri", bigint, wp_postmeta | null, wp_postmeta | null, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<...>; }; meta: object; errorShape: DefaultErrorShape; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: typeof unsetMarker; }, wp_postmeta | null>>> | undefined): UseTRPCQueryResult<...>', gave the following error.
    Argument of type 'bigint | undefined' is not assignable to parameter of type 'bigint'.
      Type 'undefined' is not assignable to type 'bigint'.ts(2769)

No overload matches this call.
  Overload 1 of 2, '(input: bigint, opts: DefinedUseTRPCQueryOptions<"lesson.videoUri", bigint, wp_postmeta | null, wp_postmeta | null, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<...>; }; meta: object; errorShape: DefaultErrorShape; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: typeof unsetMarker; }, wp_postmeta | null>>>): DefinedUseTRPCQueryResult<...>', gave the following error.
    Argument of type 'bigint | undefined' is not assignable to parameter of type 'bigint'.
      Type 'undefined' is not assignable to type 'bigint'.
  Overload 2 of 2, '(input: bigint, opts?: UseTRPCQueryOptions<"lesson.videoUri", bigint, wp_postmeta | null, wp_postmeta | null, TRPCClientErrorLike<BuildProcedure<"query", { _config: RootConfig<{ ctx: { auth: SignedInAuthObject | SignedOutAuthObject; prisma: PrismaClient<...>; }; meta: object; errorShape: DefaultErrorShape; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: typeof unsetMarker; }, wp_postmeta | null>>> | undefined): UseTRPCQueryResult<...>', gave the following error.
    Argument of type 'bigint | undefined' is not assignable to parameter of type 'bigint'.
      Type 'undefined' is not assignable to type 'bigint'.ts(2769)

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

if I change component query to:

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID as bigint,
    {
      enabled: !!currentItem?.ID,
    },
  );

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID as bigint,
    {
      enabled: !!currentItem?.ID,
    },
  );

the inline error goes away but i am still getting the serialization console error

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

i am getting inline error:

Conversion of type 'bigint | undefined' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'bigint' is not comparable to type 'string'.

Conversion of type 'bigint | undefined' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'bigint' is not comparable to type 'string'.

and console error:

TypeError: Do not know how to serialize a BigInt

TypeError: Do not know how to serialize a BigInt

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

ok i changed all packages to ^10.27.1" ran pnpm i changed lesson router back to z.bigint

videoUri: publicProcedure.input(z.bigint()).query(({ ctx, input }) => {
    return ctx.prisma.wp_postmeta.findFirst({
      where: {
        post_id: input, // Change the post_id value here
        meta_key: "app_video_uri", // Replace "video_uri" with the actual meta_key for the meta_value you want to retrieve
      },
    });
  })

videoUri: publicProcedure.input(z.bigint()).query(({ ctx, input }) => {
    return ctx.prisma.wp_postmeta.findFirst({
      where: {
        post_id: input, // Change the post_id value here
        meta_key: "app_video_uri", // Replace "video_uri" with the actual meta_key for the meta_value you want to retrieve
      },
    });
  })

i changed the component query to what you suggested:

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID as string,
    {
      enabled: !!currentItem?.ID,
    },
  );

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(
    currentItem?.ID as string,
    {
      enabled: !!currentItem?.ID,
    },
  );

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

10.27.1?

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

should i use latest or a specifc version?

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

im using "@trpc/client": "^10.1.0", "@trpc/server": "^10.1.0",

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

hmmm...ill look into making sure superjson is set up peoperly then, but its using the default setup for packages/api from t3-turbo: I have "superjson": "^1.9.1", in package.json its added to packages/api/src/trpc.ts

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

so i have half the issue fixed, which was triggering the query based on the currently selected item. Now I seem to just be having an issue with bigint

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

if i change lessonRouter to:

 videoUri: publicProcedure.input(z.number()).query(({ ctx, input }) => {
    return ctx.prisma.wp_postmeta.findFirst({
      where: {
        post_id: input, // Change the post_id value here
        meta_key: "app_video_uri", // Replace "video_uri" with the actual meta_key for the meta_value you want to retrieve
      },
    });

 videoUri: publicProcedure.input(z.number()).query(({ ctx, input }) => {
    return ctx.prisma.wp_postmeta.findFirst({
      where: {
        post_id: input, // Change the post_id value here
        meta_key: "app_video_uri", // Replace "video_uri" with the actual meta_key for the meta_value you want to retrieve
      },
    });

so number rather than bigint, and then change the videoUri query with a hardcoded number

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(621, {
    enabled: !!currentItem,
  });

const { data: videoData, error } = trpc.lesson.videoUri.useQuery(621, {
    enabled: !!currentItem,
  });

I can get the proper videoUri in a console.log on the screen

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

since it goes trpc->prisma->db

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

so where is the actual issue? in the trpc or prisma part?

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

if i try to use z.BigInt i get an error: "Property 'BigInt' does not exist on type"

55 replies

•Created by Trader Launchpad on 5/22/2023 in #❓-help

[How To] Properly use trpc UseQuery based on currently selected item

does that matter?

55 replies