Jonathan Posts - Answer Overflow

Jonathan

Explore posts from servers

CC#RRailway TtRPC PPrisma TTCTheo's Typesafe Cult

•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