ippo Posts - Answer Overflow

ippo

Explore posts from servers

RReactiflux CC#DIAdiscord.js - Imagine an app TtRPC TTCTheo's Typesafe Cult DTDrizzle Team

•Created by ippo on 8/22/2023 in #questions

fetch failed - error on npm start on production

I rebuild my next.js app with the npm run build command and I started it with npm start now I get this error:

<< query #1 post.hello {
  input: { text: 'from tRPC server!' },
  result: transformResult_9a244fe7_TRPCClientError: fetch failed
      at transformResult_9a244fe7_TRPCClientError.from (/Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:340:16)
      at /Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:791:89
      at runNextTicks (node:internal/process/task_queues:60:5)
      at listOnTimeout (node:internal/timers:533:9)
      at process.processTimers (node:internal/timers:507:7) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11118:11)
        at runNextTicks (node:internal/process/task_queues:60:5)
        at listOnTimeout (node:internal/timers:533:9)
        at process.processTimers (node:internal/timers:507:7) {
      cause: [InvalidArgumentError]
    }
  },
  elapsedMs: 8,
  context: {}
}
(node:19274) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
transformResult_9a244fe7_TRPCClientError: fetch failed
    at transformResult_9a244fe7_TRPCClientError.from (/Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:340:16)
    at /Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:791:89
.......
.......
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '4145997467'

<< query #1 post.hello {
  input: { text: 'from tRPC server!' },
  result: transformResult_9a244fe7_TRPCClientError: fetch failed
      at transformResult_9a244fe7_TRPCClientError.from (/Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:340:16)
      at /Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:791:89
      at runNextTicks (node:internal/process/task_queues:60:5)
      at listOnTimeout (node:internal/timers:533:9)
      at process.processTimers (node:internal/timers:507:7) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: fetch failed
        at Object.fetch (node:internal/deps/undici/undici:11118:11)
        at runNextTicks (node:internal/process/task_queues:60:5)
        at listOnTimeout (node:internal/timers:533:9)
        at process.processTimers (node:internal/timers:507:7) {
      cause: [InvalidArgumentError]
    }
  },
  elapsedMs: 8,
  context: {}
}
(node:19274) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
transformResult_9a244fe7_TRPCClientError: fetch failed
    at transformResult_9a244fe7_TRPCClientError.from (/Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:340:16)
    at /Users/ippo/tRPC-TEST/t3-next13-app/.next/server/chunks/376.js:791:89
.......
.......
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '4145997467'

3 replies

TTCTheo's Typesafe Cult

•Created by ippo on 8/21/2023 in #questions

.env - adding global environment variable files

the default T3 project comes with an .env and .env.example file, but where is it defined what is picked and what is left? I would like to have a .development.env and a .test.env and tell my ".env-injector" what to pick, depending on the NODE_ENV. For my other projects, I am using dotenv, where I can configure what file should be picked depending on the NODE_ENV but how do you define and configure that in a T3 project?

3 replies

TTCTheo's Typesafe Cult

•Created by ippo on 8/16/2023 in #questions

T3 BETA - how to query on client side?

I am using [email protected] with nexjs 13. How can I make a query or a mutation on a client component? There is no /utils folder for client side queries/mutation hooks.

9 replies

TTCTheo's Typesafe Cult

•Created by ippo on 8/14/2023 in #questions

Simple SSR + Hydration with tRPC and Next.js 13

I would like to see a simple example, where on server side all users are queried and the view with all these users are served. (Something like <Table data={users} />) I also want the option to search users by name but it should hydrate the view, so I want only get JSON from the server and re-render the view. I do not know how to do that, since I have components that require "use client" Hope it is clear what I am looking for 😊

5 replies

TTCTheo's Typesafe Cult

•Created by ippo on 6/11/2023 in #questions

Tailwind - className did not match

I get this warning all the time:

Warning: Prop `className` did not match.
Server: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52 flex flex-col bg-slate-700 text-slate-300"
Client: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52  flex flex-col bg-slate-700 text-slate-300"

Warning: Prop `className` did not match.
Server: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52 flex flex-col bg-slate-700 text-slate-300"
Client: "fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 w-52  flex flex-col bg-slate-700 text-slate-300"

this is the code I am using:

function SideBar(): JSX.Element {
  const [open, setOpen] = useState(true);

  return (
    <div
      className={`fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 ${open ? 'w-52 ' : 'w-2'} flex flex-col bg-slate-700 text-slate-300`}
    >
    // ...

function SideBar(): JSX.Element {
  const [open, setOpen] = useState(true);

  return (
    <div
      className={`fixed top-0 left-0 h-screen m-0 ease-in-out duration-300 ${open ? 'w-52 ' : 'w-2'} flex flex-col bg-slate-700 text-slate-300`}
    >
    // ...

what do I have to do to not get this warning?

4 replies

TTCTheo's Typesafe Cult

•Created by ippo on 6/5/2023 in #questions

Query tRPC the right way

If you use graphql, you can precisely query what you exactly need and avoid over fetching, so you can do something like this:

user {
  id
  username
  avatar
}

user {
  id
  username
  avatar
  email
  updatedAt
}

user {
  id
  username
  avatar
}

user {
  id
  username
  avatar
  email
  updatedAt
}

how would you design that in tRPC? do you have to implement an interface like this?

getUser({
  select: ["id", "avatar", "username"],
  orderBy: "ASC"
})

getUser({
  select: ["id", "avatar", "username"],
  orderBy: "ASC"
})

and what is if you want to query related stuff, like the user and its pets and from the pets you just want the ids but in other cases the names and ids of the pets

22 replies

TTCTheo's Typesafe Cult

•Created by ippo on 5/22/2023 in #questions

tRPC - Express - Next.js boilerplate

Is there a tRPC boilerplate, that lives in an express.js context that allows you to use all express middlewares from npm, with an already set next.js server, with a folder structure like create-t3-app?

7 replies

TTCTheo's Typesafe Cult

•Created by ippo on 5/22/2023 in #questions

How to use installed middlewares in tRPC?

There are a lot of middlewares from npm that I am using like helmet, session and so on. What is the recommended way adding these middlewares in my tRPC app? can you show a simple example?

16 replies

TTCTheo's Typesafe Cult

•Created by ippo on 4/28/2023 in #questions

cookie session - express-session with tRPC

Does anybody use express-session with tRPC? What is the best solution to use cookie sessions with tRPC? (using redis as a storage)

39 replies

TTCTheo's Typesafe Cult

•Created by ippo on 4/27/2023 in #questions

flexible tRPC - is it as flexible as GraphQL?

airbnb and graphql had the problem to have scalable APIs that can grow, are flexible and are backward compatible graphQL solves this problem, so lets say we have something like this:

persons {
  id
  firstName
  lastName
  email
  pets {
    id
    name
  }
}

persons {
  id
  firstName
  lastName
  email
  pets {
    id
    name
  }
}

now I can grow add other relations to my persons, without breaking my code, so persons can have addresses, bank accounts, children, cars, bought products how does tRPC grow that way how does tRPC is telling you how to have flexible interface?

42 replies

TTCTheo's Typesafe Cult

•Created by ippo on 3/15/2023 in #questions

tRCP beginner questions

I am very new to tRPC and it is too good to by true but there are some general and basics questions I have: 1. tRCP couples the client and the server together, does this mean that you can not consume a tRCP server/endpoint with different clients that you develop separately but with the same type experience? 2. are there tRCP server implementations for other languages? (Rust, Python) 3. does tRCP offers a pattern to query children the way you want or with a separate query? 4. does tRCP offers a pattern or a default way to solve the n + 1 problem? 5. is it true that if you have a tRCP project does not scale well, and that you sooner or later will migrate to graphQL? 6. are you able to select only fields you like and nothing more? 7. what protocol does tRPC uses underneath? I mean can curl tRPC or can you use POSTMAN to test it? Does it use REST in the background? 8. is it normal/by design that T3 forces you to join client server and client code to one single server? is it possible to split these two, with T3, and have the client and the server as two different servers? If not why?

7 replies

Gaming

Programming