funki Posts

funki

•Created by funki on 9/23/2024 in #❓-help

Why not create queryClient and trpcClient outside of React?

From the docs: https://trpc.io/docs/client/react/setup#4-add-trpc-providers Relevant excerpt:

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

export function App() {
  const [queryClient] = useState(() => new QueryClient())
  const [trpcClient] = useState(() =>
    trpc.createClient({ /* ... */ }),
  )

  // ...

What are the downsides to moving these two clients outside the component? Does it break hot reloading or something? E.g.

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

const queryClient = new QueryClient()
const trpcClient = trpc.createClient({ /* ... */ })

export function App() {
  // ...

4 replies

TtRPC

•Created by funki on 6/21/2024 in #❓-help

Why are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?

From https://trpc.io/docs/client/react/setup:

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({ ... }),
  );
  // ...

if these two are "made stable" through useState() and since they should exist only once per SPA (like a singleton), why not just put them outside the component? is this related to HMR?

25 replies

TtRPC

•Created by funki on 12/26/2023 in #❓-help

How can i use inferprocedureoutput?

I'd like to write this code type-safely:

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

const handleQuery = (query: /* ? */) => {}

const MyComponent = () => {
  const query = trpc.foo.useQuery()
  handleQuery(query)
  // ...
}

I'm pretty sure i need to use inferProcedureOutput but i couldn't figure out what to pass. I can never access query.isLoading for example.

4 replies

TtRPC

•Created by funki on 11/17/2023 in #❓-help

Globally handle specific Error type on backend

Hi, i have a lot of code that's used for both backend and frontend. That's why i'm not throwing TRPCErrors but custom errors instead. They indicate that the error message should be sent to the client if it arises on the backend (on the frontend this obviously doesn't matter). Can i set up the tRPC server side in a way where it will catch all errors so i can do something like this?

if (error instanceof DispatchableError) {
  throw new TRPCError({
    code: "BAD_REQUEST",
    message: error.message,
  });
} else {
  throw new TRPCError({
    code: "INTERNAL_SERVER_ERROR",
    message: "Sorry, something went wrong"
  })
}

if (error instanceof DispatchableError) {
  throw new TRPCError({
    code: "BAD_REQUEST",
    message: error.message,
  });
} else {
  throw new TRPCError({
    code: "INTERNAL_SERVER_ERROR",
    message: "Sorry, something went wrong"
  })
}

7 replies

TtRPC

•Created by funki on 9/12/2023 in #❓-help

404 TRPCError: no query procedure on path

Hi, this is my entire standalone tRPC server:

import { initTRPC } from "@trpc/server";
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

const t = initTRPC.create();
const appRouter = t.router({
    foo: t.procedure.query(() => "hi"),
});

const server = createHTTPServer({
    middleware: cors(),
    router: appRouter,
});

export type AppRouter = typeof appRouter;

server.listen(3000);

import { initTRPC } from "@trpc/server";
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

const t = initTRPC.create();
const appRouter = t.router({
    foo: t.procedure.query(() => "hi"),
});

const server = createHTTPServer({
    middleware: cors(),
    router: appRouter,
});

export type AppRouter = typeof appRouter;

server.listen(3000);

and here is my tRPC client:

const trpcClient = trpc.createClient({
    links: [
        httpBatchLink({
            url: "http://localhost:3000/trpc"
        }),
    ],
});

const trpcClient = trpc.createClient({
    links: [
        httpBatchLink({
            url: "http://localhost:3000/trpc"
        }),
    ],
});

but when i use it with trpc.foo.useQuery(), this the response:

{
    "error": {
        "message": "No \"query\"-procedure on path \"trpc/foo\"",
        "code": -32004,
        "data": {
            "code": "NOT_FOUND",
            "httpStatus": 404,
            "stack": "TRPCError: No \"query\"-procedure on path \"trpc/foo\"\n    at new TRPCError (/somepath/node_modules/@trpc/server/dist/TRPCError-6a1653a4.mjs:52:12)\n    at callProcedure
                  [...]
        }
    }
}

{
    "error": {
        "message": "No \"query\"-procedure on path \"trpc/foo\"",
        "code": -32004,
        "data": {
            "code": "NOT_FOUND",
            "httpStatus": 404,
            "stack": "TRPCError: No \"query\"-procedure on path \"trpc/foo\"\n    at new TRPCError (/somepath/node_modules/@trpc/server/dist/TRPCError-6a1653a4.mjs:52:12)\n    at callProcedure
                  [...]
        }
    }
}

What am i doing wrong? I already tried removing /trpc from the url that the client uses which also resulted in 404.

18 replies

TtRPC

•Created by funki on 5/14/2023 in #❓-help

Why does this starter with Prisma have it's own postinstall script?

Prisma has it's own postinstall hook/script: https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#generating-prisma-client-in-the-postinstall-hook-of-prismaclient The starter's package.json that also has that hook/script: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/420be5a7916f4d91ae2307f484ce38c1f5c6c67c/package.json#L33

4 replies

TtRPC

•Created by funki on 4/28/2023 in #❓-help

next-prisma-websockets-starter seeds twice on 'pnpm dx'

Hi, i'm using this starter template for my app. The dx script from package.json runs both prisma migrate as well as prisma seed and the former seems to run the seeder as well, causing data to exist twice in the database after running dx. Link to line in package.json: https://github.com/trpc/examples-next-prisma-websockets-starter/blob/db3a7794caa8d024f7115ce1f767d84c0172dd93/package.json#L21

2 replies