Jonathan Posts - Answer Overflow

•Created by Jonathan on 2/18/2025 in #❓-help

Missing Module in TRPC Migrate

I know you just released the migration for the TRPC upgrade but I thought I would share that I got this error

❯ npx @trpc/[email protected]
node:internal/modules/cjs/loader:1408
  throw err;
  ^

Error: Cannot find module '@effect/printer-ansi/Ansi'

❯ npx @trpc/[email protected]
node:internal/modules/cjs/loader:1408
  throw err;
  ^

Error: Cannot find module '@effect/printer-ansi/Ansi'

3 replies

•Created by Jonathan on 1/24/2025 in #❓-help

How to Test TRPC

I am trying to setup testing TRPC My Init looks like this:

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";

import { auth, clerkClient } from "@clerk/nextjs/server";

// export const createTRPCContext = async (opts: { headers: Headers }) => {
export const createTRPCContext = async () => {
  // This is where you would do things like verify the user's session, etc.
  const authResult = await auth();

  return {
    clerk: authResult,    
  };
};

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 publicProcedure = t.procedure;

const isAuthed = t.middleware(async ({ next, ctx }) => {
  if (!ctx.clerk.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED", message: "Not logged in" });
  }

  const client = await clerkClient();

  const memberships = await client.users.getOrganizationMembershipList({
    userId: ctx.clerk.userId,
  });

  const activeMembership = memberships.data.find(
    (mem) => mem.organization.id === ctx.clerk.orgId,
  );

  return next({
    ctx: {      
      user: ctx.clerk.userId,
      CustomerId: activeMembership?.organization.publicMetadata?.customerId as string,
      UserId: activeMembership?.publicMetadata?.userId as string,
    },
  });
});

/** Reusable middleware that enforces users are logged in before running the procedure. */
export const protectedProcedure = t.procedure.use(isAuthed);

import { initTRPC, TRPCError } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";

import { auth, clerkClient } from "@clerk/nextjs/server";

// export const createTRPCContext = async (opts: { headers: Headers }) => {
export const createTRPCContext = async () => {
  // This is where you would do things like verify the user's session, etc.
  const authResult = await auth();

  return {
    clerk: authResult,    
  };
};

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 publicProcedure = t.procedure;

const isAuthed = t.middleware(async ({ next, ctx }) => {
  if (!ctx.clerk.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED", message: "Not logged in" });
  }

  const client = await clerkClient();

  const memberships = await client.users.getOrganizationMembershipList({
    userId: ctx.clerk.userId,
  });

  const activeMembership = memberships.data.find(
    (mem) => mem.organization.id === ctx.clerk.orgId,
  );

  return next({
    ctx: {      
      user: ctx.clerk.userId,
      CustomerId: activeMembership?.organization.publicMetadata?.customerId as string,
      UserId: activeMembership?.publicMetadata?.userId as string,
    },
  });
});

/** Reusable middleware that enforces users are logged in before running the procedure. */
export const protectedProcedure = t.procedure.use(isAuthed);

My test looks like this

import { type inferProcedureInput } from "@trpc/server";
import { expect, test } from "vitest";

import { appRouter, type AppRouter } from "@/server/routers/_app";
import { createTRPCContext } from "@/server/init";


test("example router", async () => {
    const ctx = await createTRPCContext();
    const caller = appRouter.createCaller(ctx);

    type Input = inferProcedureInput<AppRouter["entities"]["get"]>;
    const input: Input = {
        entityType: "test",
        Id: "test",
    };

    const example = await caller.entities.get(input);

    expect(example).toMatchObject({ greeting: "Hello test" });
});

import { type inferProcedureInput } from "@trpc/server";
import { expect, test } from "vitest";

import { appRouter, type AppRouter } from "@/server/routers/_app";
import { createTRPCContext } from "@/server/init";


test("example router", async () => {
    const ctx = await createTRPCContext();
    const caller = appRouter.createCaller(ctx);

    type Input = inferProcedureInput<AppRouter["entities"]["get"]>;
    const input: Input = {
        entityType: "test",
        Id: "test",
    };

    const example = await caller.entities.get(input);

    expect(example).toMatchObject({ greeting: "Hello test" });
});

All I really need in the context to test with is CustomerId and UserId but how do I build a test context that has this information?

4 replies

•Created by Jonathan on 1/23/2025 in #help-and-questions

Using Prisma with Azure SQL Hyperscale

Is anyone using Prisma with Azure SQL Hyperscale? I am running into an issue that when the sql azure scales up or down there is a massive slow down in the application and errors from disconnections of the connection pooling. I am curious how others may have solved this. In .NET's EF they had automatic retry logic but is there an equavaliant in Prisma?

4 replies

•Created by Jonathan on 12/14/2024 in #help-and-questions

db Pull not pulling schemas

When I am doing a prisma db pull in a file that I have about 10 schemas defined in the schema file

datasource db {
  provider = "sqlserver"
  url      = env("DATABASE_URL")
  schemas  = [... 10 schemas here]
}

datasource db {
  provider = "sqlserver"
  url      = env("DATABASE_URL")
  schemas  = [... 10 schemas here]
}

It seems that it just skips several of the schemas after the first about few, is there a limit of the number of schemas that can be pulled?

5 replies

DDeno

•Created by Jonathan on 10/16/2024 in #help

Setting up Deno 2.0 with Fresh and TypeORM

I am trying to setup my first deno project ever using Fresh and TypeORM. I have setup 2 files A data.ts

import { DataSource } from "npm:typeorm";
import { User } from "../modules/auth/user.model.ts";

const dataSource = new DataSource({
    type: "mssql",
    url: Deno.env.get("DATABASE_URL"),
    entities: [User],
});

export default dataSource;

import { DataSource } from "npm:typeorm";
import { User } from "../modules/auth/user.model.ts";

const dataSource = new DataSource({
    type: "mssql",
    url: Deno.env.get("DATABASE_URL"),
    entities: [User],
});

export default dataSource;

And a user.model.ts

import { Column, Entity, PrimaryColumn } from "npm:typeorm";

@Entity({ name: "User" })
export class User {
    @PrimaryColumn()
    id: string;

    @Column()
    email: string;

}

import { Column, Entity, PrimaryColumn } from "npm:typeorm";

@Entity({ name: "User" })
export class User {
    @PrimaryColumn()
    id: string;

    @Column()
    email: string;

}

I am getting a few errors in the user.model.ts , I am not sure if I am importing type orm correctly.

Unable to resolve signature of property decorator when called as an expression.

Unable to resolve signature of property decorator when called as an expression.

I am also not sure how to properly install the mssql properly for deno, do I do that in the deno.json? If so how? And last, I am getting an error of an uncaught promise in Reflect.getMetadata. How do I get around this?

4 replies

•Created by deep-jade on 9/4/2024 in #ask-any-question

Closing modal after save, gives warning that you are leaving the page.

I have a modal like this:

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",

  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);

      close();
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

  const navigateToList = () => {
    go({
      to: searchParams.get("to") ?? getToPath({ action: "list" }) ?? "",
      query: { to: undefined },
      options: { keepQuery: true },
      type: "replace",
    });
  };

  return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import { useGetToPath, useGo } from "@refinedev/core";
import { useSearchParams } from "react-router-dom";

export const SourceCreate = () => {

  const getToPath = useGetToPath();
  const [searchParams] = useSearchParams();
  const go = useGo();

  const { modalProps, formProps, onFinish, close, form } = useModalForm<any>({
    action: "create",
    resource: "sources",
    defaultVisible: true,
    redirect: false,
    mutationMode: "pessimistic",

  });

  const handleFinish = async (values: any) => {
    try {
      await onFinish(values);

      close();
      navigateToList();
    } catch (error) {
      console.error(error);
    }
  };

  const navigateToList = () => {
    go({
      to: searchParams.get("to") ?? getToPath({ action: "list" }) ?? "",
      query: { to: undefined },
      options: { keepQuery: true },
      type: "replace",
    });
  };

  return (
    <Modal
      {...modalProps}
      title="Create Source"
      onCancel={() => {
        close();
        navigateToList();
      }}
    >
      <Form
        {...formProps}
        layout="vertical"
        onFinish={handleFinish}
      >
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

When I hit save, it is giving the "Are you sure you want to leave? You have unsaved changes." alert despite actually saving.

6 replies

•Created by rival-black on 8/11/2024 in #ask-any-question

Enabling Sorting on Antd Table

How do you set Antd sorting on a table? We are using Antd with Supabase and refine.

13 replies

•Created by stormy-gold on 8/6/2024 in #ask-any-question

Expo Router integration

Is there Expo Router integration?

4 replies

•Created by fair-rose on 8/6/2024 in #ask-any-question

Better Error notifications on Supabase Provider

How can I get a more user friendly message from supabase database provider for things like a unique constraint error message? For example I get this message now:

duplicate key value violates unique constraint

duplicate key value violates unique constraint

But would be nice to give something specific to the field or at least friendly to the user.

16 replies

•Created by modern-teal on 8/5/2024 in #ask-any-question

How to Change Page Title From Refine

I am using the CRM example as a starting point but I can't find how to change the Page title from having "Refine" in it. It is using the DocumentTitleHandler but I can't seem to figure out how to change it to our app name.

5 replies

•Created by adverse-sapphire on 8/2/2024 in #ask-any-question

Starting a new Project with Refine, picking React or Next

I am starting a new project and planning on using Refine. It is a classic CRUD app with hundreds of types of datasources. I am also planning on a react-native app also. My question is this, would you start a new project with React-Vite and monolith so that you can share data sources between the react-native and react app. I have considered NextJS and have a version in NextJS. But I end up highly relying on client side code in the NextJS app. So my question is this: - If the long term goal is to have a react and expo based app, is it worth having a mono-repo with a traditional react and expo app? I am just thinking this may seem more consistent between the expo and react apps vs an expo and nextjs app. Thoughts?

5 replies

•Created by Jonathan on 6/24/2024 in #help-and-questions

Ensuring Filtering if variable is undefined

I have an application that is a multi-tenant app where we always filter by TenantId , so for example we do queries like this:

 var contacts = await db.contacts.findMany({
        where: {
            tenantId: tenantId,
        }
    });

 var contacts = await db.contacts.findMany({
        where: {
            tenantId: tenantId,
        }
    });

While obviously I need to check the tenantId but from a general question, when a a variable sometimes is undefined, it completely ignores that part of query. Some of this is just the nature of how JS objects are built. But I am curious if there is a way to guarantee that the where statement never ignores a variable. I think this is where most query builder alternatives handle by passing variables into a method.
Basically I am curious if there is ways to guarantee that no filter leaks because of a value being undefined.

6 replies

•Created by Jonathan on 6/12/2024 in #help-and-questions

Connection Pooling issues with Azure SQL

I continue to see issues in our error logs in production with prisma using Azure SQL:

Timed out fetching a new connection from the connection pool. More info: http://pris.ly/d/connection-pool (Current connection pool timeout: 10, connection limit: 3)

Timed out fetching a new connection from the connection pool. More info: http://pris.ly/d/connection-pool (Current connection pool timeout: 10, connection limit: 3)

The connection string looks like this:

sqlserver://<server>.database.windows.net:1433;database=<dbname>;user=<username>;password=<password>;encrypt=true;trustServerCertificate=true;

sqlserver://<server>.database.windows.net:1433;database=<dbname>;user=<username>;password=<password>;encrypt=true;trustServerCertificate=true;

This is in a nextjs app that we are using it.

8 replies

•Created by Jonathan on 5/16/2024 in #❓-help

TRPC completely broke

I have a project I haven't touched in only about a week, it was working and now every request over TRPC is broke. I have tried everything I can think of and I get responses like the attachment Here is part of my package.json

    "@t3-oss/env-nextjs": "^0.8.0",
    "@tanstack/react-query": "^5.36.2",
    "@trpc/client": "^10.45.2",
    "@trpc/next": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@trpc/server": "^10.45.2",

    "@t3-oss/env-nextjs": "^0.8.0",
    "@tanstack/react-query": "^5.36.2",
    "@trpc/client": "^10.45.2",
    "@trpc/next": "^10.45.2",
    "@trpc/react-query": "^10.45.2",
    "@trpc/server": "^10.45.2",

Everything related to api requests throw an error, but if it is on the server the db is running fine and such. This was an app that was created with the T3 Stack. I am out of ideas, anywhere I might should look?

5 replies

CC#

•Created by Jonathan on 5/6/2024 in #help

Error Accessing a User in Blazor

I am trying to setup my first Blazor project after being away from dotnet for a while to chase the javsacript world and I am completely stuck on something simple. I have created a new blazor app with the template and enabled Individual Accounts for auth. I am simply trying to get the current user information for the home screen and I get an error :

 Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'G1M-mKG0EKFb3eev_tf-_Mksjrr5QqWRiMMBvnuRCh4'.
      System.ObjectDisposedException: Cannot access a disposed object.

 Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'G1M-mKG0EKFb3eev_tf-_Mksjrr5QqWRiMMBvnuRCh4'.
      System.ObjectDisposedException: Cannot access a disposed object.

The browser console has the error:

[Error] WebSocket connection to 'ws://localhost:5240/_blazor?id=RIqaRL19VNie_L68N5CkRg' failed: The operation couldn’t be completed. Socket is not connected

[Error] WebSocket connection to 'ws://localhost:5240/_blazor?id=RIqaRL19VNie_L68N5CkRg' failed: The operation couldn’t be completed. Socket is not connected

I have tried to do everything I can find about this. I have tried changing render modes, etc. I am at a complete loss. The home page is simply this (which I based on the sample account pages)

@page "/"
@using ExampleIssues.Components.Account
@using ExampleIssues.Data
@inject IdentityUserAccessor UserAccessor

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

@if (user != null)
{
    <div>User here: @user.UserName</div>
}
else
{
    <div>User Not found</div>
}

@code {
    
    private ApplicationUser user = default!;
    
    [CascadingParameter] private HttpContext HttpContext { get; set; } = default!;
    protected override async Task OnInitializedAsync()
    {
        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
    }
}

@page "/"
@using ExampleIssues.Components.Account
@using ExampleIssues.Data
@inject IdentityUserAccessor UserAccessor

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

@if (user != null)
{
    <div>User here: @user.UserName</div>
}
else
{
    <div>User Not found</div>
}

@code {
    
    private ApplicationUser user = default!;
    
    [CascadingParameter] private HttpContext HttpContext { get; set; } = default!;
    protected override async Task OnInitializedAsync()
    {
        user = await UserAccessor.GetRequiredUserAsync(HttpContext);
    }
}

I have put the entire repo here: https://github.com/jmarbutt/ExampleIssues/tree/main/ExampleIssues

26 replies

TTCTheo's Typesafe Cult

•Created by Jonathan on 2/4/2024 in #questions

T3 Stack with React Native and Multiple NextJS with Turbo & Clerk

So I am building a project that has 3 distinct NextJS applications, 1 react native application. I have set up a project with a simple structure like this:

- apps
---NextApp1
---NextApp2
---NextApp3
---ReactNativeApp
- packages
---ui (shared web components
---data (prisma basically)

- apps
---NextApp1
---NextApp2
---NextApp3
---ReactNativeApp
- packages
---ui (shared web components
---data (prisma basically)

I created all 3 of the next apps with create-t3-app and they are working great and are pretty isolated TRPC instances. So they each have their own routers and such which I could consolidate. But my question is what is the best pattern for introducing the ReactNativeApp into the equation. It will basically need to use the same TRPC service as NextApp1 for example. So here are my actual questions: - Should I move the routes for NextApp1 into a shared packages/common or some other package name? - When I do that, what do I need to change in the NextApp1 to handle this? - Would I just move the react.tsx and shared.tsx into the shared package? - I am using Clerk, how do I ensure it is getting passed into TRPC in the react native code? Is there a good example out there of all this?

6 replies

•Created by Jonathan on 1/30/2024 in #❓-help

T3 Stack TRPC used in Server Actions

Is there issues using the server calls of TRPC in a nextjs server action? I am seeing weird issues when running it in production that don't happen when running it local. I am trying to narrow it down but looking for a high level of "this shouldn't be an issue", or this could be an issue. I think it may be related to my user context depending on cookies, the more I have looked everything that is not in server actions seems to work but server actions seem to be flakey in production.

2 replies

•Created by Jonathan on 12/30/2023 in #❓-help

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

I am getting this error when deployed but not when running locally.

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

TRPCClientError: JSON Parse error: Single quotes (') are not allowed in JSON

Any idea on how to narrow this down?

4 replies