deforestor Posts - Answer Overflow

Topics

deforestor

TTCTheo's Typesafe Cult

•Created by deforestor on 9/3/2024 in #questions

Next 14 (app/router) is extremely slow (on dev) + tRPC + Turbopack

This is an issue we've been having in our App for a long time, and after months of suffering, I finally have the answers and the solutions, so I will provide bullet points here for anyone else who suffers with it now or in the future. Problem: Developing with Next 14 has became extremely slow when mixing up with tRPC. The reason: tRPC is actually not the issue at all, the way we are encouraged to use it kinda is. What I mean is, with tRPC we feel very comfortable to call the queries inside the components and have those fully contained components. But if you watched this video https://www.youtube.com/watch?v=lcLbYictX3k, you know why that may just be a terrible idea. Fully contained components cause the fetch Waterfall problem, which causes re-render and fetches to happen again. This issue extremely visible on components that require certain permissions to render, you'll probably notice pages with those components will be the slower ones. The problem with Turbopack: I've noticed that the slowness is even worse with turbo, even if the compilation time is about 10x faster. I don't understand the turbo magic completely, but I noticed is causes all fetches to be slightly slower, but when you mix it with the Waterfalling, this "slightly" slower becomes exponentially slower. Developing with turbo + tRPC + App Router was impossible. tRPC + app Router: Pages inside app/router that use many of these components that fetch data with tRPC are extremely slow. But if you rewrite that page to fully use app router, or you query all your data on the page, you'll notice extremely improvements on speed

5 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 8/18/2024 in #questions

Coding on Snapdragon X Elite

Anyone using the new Surface Laptop 7 for coding? I don't want to get a Mac because, for the same specs, it's over 50% more expensive, so it's not an option for me

3 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 6/13/2024 in #questions

Vercel Build out of memory

No description

24 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 5/2/2024 in #questions

TRPC error handling (on client) is confusing

No description

4 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 4/26/2024 in #questions

The In App vs NextAuth problem

If you open the app link from a mobile app (like discord/telegram) and it opens in the in-app browser instead of the default browser, the Sign up will fail. Does anyone recommend any way to deal with this? I'm not sure if NextAuth has an option to allow built-in browsers, but I couldn't find anything. My other idea was to prompt the user to open the default browser instead, but this sucks

5 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 2/8/2024 in #questions

Ways to purposely cause latency with T3? (For test purposes)

Using chrome's network throttle is actually useless because it only lags the first render (white screen), but the rest of the stuff are fast. If trpc doesn't have a way to simply do this, I'll just find a way with docker

4 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 1/11/2024 in #questions

Zustand leaking state

No description

5 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 10/26/2023 in #questions

Prisma JsonValue with TypeScript

So, we're having a problem in which we want to define a field in a modal that has some properties within it, but we DO NOT want it to be a relationship. The problem is that I haven't found any great way to properly type a JsonValue with prisma. Does anybody know a solution for this? Example:

model User {
 id String
 name String
 age number
 customInfo JsonValue
}

// the expected type for customInfo :
CustomInfo {
 twitter String?
 linkedin String?
}

model User {
 id String
 name String
 age number
 customInfo JsonValue
}

// the expected type for customInfo :
CustomInfo {
 twitter String?
 linkedin String?
}

This is just an example, but in our case, the "customInfo" CANNOT be inside the same model or another model

4 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 7/8/2023 in #questions

getServerAuthSession returning null in production

I have absolutely no clue how that is happening because I've implemented the same solution in another app before and it works perfectly, but for some reason, this code only words in localhost:

export const authenticatedServerSideProps: GetServerSideProps<{
  session: Session | null;
}> = async (ctx) => {
  const session = await getSession(ctx);

  if (!session || !session.user.id) {
    return {
      redirect: {
        destination: "/events",
        permanent: false,
      },
    };
  }

  return {
    props: {
      session,
    },
  };
};

export const authenticatedServerSideProps: GetServerSideProps<{
  session: Session | null;
}> = async (ctx) => {
  const session = await getSession(ctx);

  if (!session || !session.user.id) {
    return {
      redirect: {
        destination: "/events",
        permanent: false,
      },
    };
  }

  return {
    props: {
      session,
    },
  };
};

10 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 7/3/2023 in #questions

Is there any way to signal a Server Component to refetch?

I'm learning about the Server Components and I came across a scenario that I'm not entirely sure how to fix. It's from this repository: https://github.com/vercel-labs/ai-chatbot, but the bottom line is that there's a Server Component that calls the server action getChats once the page loads, but I need to make this behavior happen again, like trigger a refetch once at least a message has been sent. My question is: is it possible to trigger a Server Component to refetch/revalidate? I saw the revalidating docs, but I couldn't find an answer to make an specific component to do it, only the whole page.

51 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 6/29/2023 in #questions

Request and update as the server comes along

So, I have a scenario in which I have a list of currencies, like ["USD", "EUR", "BRL"] etc, that has a dynamic size. My problem is that the API only allows for 5 calls per minute, so I need a 20s interval just to be safe. Now, requesting every 20s is easy, but I can't wrap my head around how to have a React Query set up so I read from this array of currencies, and return one by one so I can render it in real time on the client. And then restart the cycle. I've thought of many workarounds, but nothing that seems like a perfect solution. Does anyone have any idea on how I could do this?

14 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 6/22/2023 in #questions

Modifying docs on an Open Source project

So, I've never really messed around with the docs part of Next, and I'm trying to understand how things working looking at https://github.com/vercel-labs/ai I think I lack fundamental understanding of building tools/libraries like this, so my question is: I cloned the repository and ran it as dev, but then I realized I have no idea on how to, or even if possible, to access the documentation locally. I tried localhost:3000/docs but it's a 404 Like I said, I lack understanding of this, but if anyone could help me see what I'm doing wrong, it'd help

3 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 6/6/2023 in #questions

Should you avoid having the queries inside Components?

Kind of a silly question, but if I don't do that, when I have a frailly complex page with lots of queries, the file looks pretty convoluted. And I'm not sure if I should be tying my components to queries, that kind of makes them less generic?

91 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 5/30/2023 in #questions

Conditional render, why can't it be done?

15 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 5/12/2023 in #questions

Mutate instantly returning success instead of isLoading

7 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 5/2/2023 in #questions

tRPC won't work in Production

For some reason, tRPC won't work in production. I have the schema updated in the main branch, on PlanetScale, and I know because I can see the most recent data. Logging in also works. But nothing else does. The error doesn't tell me anything, and everything works fine in a local environment, even if I connect to the main database. I think this is a Vercel problem, but I don't even know where to start debugging it

6 replies

TTCTheo's Typesafe Cult

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

PlanetScale workflow confuses me

So, I'm not even sure if I should be doing this, but I'm working with a few people on a T3 project and we chose to use PlanetScale (free tier) due to the simplicity. However, as we modify the database, we realize how the workflow doesn't seem to make sense, so we have been wondering if we're doing anything wrong. As we are using it free for now, we only have one Dev branch, so we all work on it and deploy the changes. But the thing is, if person A is working on the schema with, let's say, the table Clients, and the person B works on a schema without that table, what happens is that when person B does the npx prisma db push, they'll override the version with the table and everything will crash. To mitigate that, we do npx prisma db pull before the push aaand.. that's where the problem is. Since it's the same branch, we can't really "merge" the differences, so when the person A does a pull, it would erase the Clients table either way.

28 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 3/3/2023 in #questions

States don't update after Post

10 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 3/1/2023 in #questions

Confused on Prisma's where clause: OR and AND

I'm trying to write a query that queries the repositories that aren't hidden for everyone, but for the logged user, it also queries the hidden ones. I think the SQL for that would be something like: SELECT * FROM Repository r WHERE r.hidden = false OR (r.hidden = true AND r.userId = ctx.session.user.id) which is very simple, but for some reason, I can't get this to work on my procedure at all:

getAllBumpedRepos: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.repository.findMany({
      include: { techs: true },
      where: {
        hidden: false,
        OR: {
          hidden: false,
          AND: { hidden: true, userId: ctx.session?.user.id },
        },
      },
    });
  }),

getAllBumpedRepos: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.repository.findMany({
      include: { techs: true },
      where: {
        hidden: false,
        OR: {
          hidden: false,
          AND: { hidden: true, userId: ctx.session?.user.id },
        },
      },
    });
  }),

13 replies

TTCTheo's Typesafe Cult

•Created by deforestor on 2/19/2023 in #questions

NextAuth - User stays logged in after token is expired

5 replies