Jonathan Posts - Answer Overflow

Jonathan

Explore posts from servers

CC#DDeno RRailway RRefine TtRPC PPrisma TTCTheo's Typesafe Cult

•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

RRefine

•Created by genetic-orange 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

RRefine

•Created by afraid-scarlet 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

RRefine

•Created by xenial-black on 8/6/2024 in #ask-any-question

Expo Router integration

Is there Expo Router integration?

4 replies

RRefine

•Created by optimistic-gold 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

RRefine

•Created by cloudy-cyan 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

RRefine

•Created by graceful-beige 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

PPrisma

•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

PPrisma

•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

TtRPC

•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

TtRPC

•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

TtRPC

•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

TtRPC

•Created by Jonathan on 11/22/2023 in #❓-help

useQuery never returning or hitting API

I have something off in my configuration, i copied most of the files from the ❯ npm create t3-app@latest example app to add to an exisitng app. I am trying to call the simple post.hello and i tis working on the server. but when I call it on the client side like:

const postResult = api.post.hello.useQuery({text:'Hello'});

const postResult = api.post.hello.useQuery({text:'Hello'});

It never hits the api or gets out of the loading state, what am I missing?

2 replies

TtRPC

•Created by Jonathan on 11/22/2023 in #❓-help

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutation

I am trying to setup a new project and doing my first client side query and getting this error:

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.

Type 'QueryClient' is missing the following properties from type 'QueryClient': queryCache, mutationCache, logger, defaultOptions, and 4 more.

This is my react.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
            };
          },
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";


import { getUrl, transformer } from "./shared";
import { type AppRouter } from "@/server/api/root";

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: {
  children: React.ReactNode;
  cookies: string;
}) {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() =>
    api.createClient({
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        unstable_httpBatchStreamLink({
          url: getUrl(),
          headers() {
            return {
              cookie: props.cookies,
              "x-trpc-source": "react",
            };
          },
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <api.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
      </api.Provider>
    </QueryClientProvider>
  );
}

it is complaining at :

      <api.Provider client={trpcClient} queryClient={queryClient}>

      <api.Provider client={trpcClient} queryClient={queryClient}>

And this is my root layout:

import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
  title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await GetUser(cookies());

  return (
    <html lang="en bg-gray-100">
      <body className={inter.className + ' bg-gray-100'}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <FlowbiteContext>
            <Header user={user} />
            {children}
          </FlowbiteContext>
        </TRPCReactProvider>
      </body>
    </html>
  );
}

import "./globals.css";
import type { Metadata } from "next";
import FlowbiteContext from "@/app/context/FlowbiteContext";
import Header from "@/components/header/header";
import { GetUser } from "@/utils/GetUser";
import { Inter } from "next/font/google";
import { cookies } from "next/headers";
import { TRPCReactProvider } from "@/trpc/react";


export const metadata: Metadata = {
  title: "MyApp",
};

const inter = Inter({ subsets: ["latin"] });

export default async function DefaultLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await GetUser(cookies());

  return (
    <html lang="en bg-gray-100">
      <body className={inter.className + ' bg-gray-100'}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <FlowbiteContext>
            <Header user={user} />
            {children}
          </FlowbiteContext>
        </TRPCReactProvider>
      </body>
    </html>
  );
}

What am I missing? The server side piece is working when querying from next.

6 replies

TtRPC

•Created by Jonathan on 11/6/2023 in #❓-help

Specify invalid queries from the server?

I have a TRPC app that I am writing and there are times I would like to invalidate queries on the client from a mutation on the server. I am not talking web sockets or anything like that, but just a standard way to invalidate multiple queries from the server just as part of the return from a mutation Is that possible?

2 replies

Gaming

Programming