Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Next.js Headless CMS for Markdown with MathType support?

I wanna build a blog based on Markdown content based on a headless CMS (using Next.js under the hood). So for this I thought TinaCMS is the right fit. But TinaCMS doesn't support to handle math equations like in the example below. And it doesn't support it in the editor, but also not in the representation. Am I doing something wrong, or is there another Markdown-based CMS that supports this? ``` $$ \eqalign{ (a+b)^2 &= (a+b)(a+b) \...

Using passport-steam and supabase auth in nextjs.

My idea is to let people sign in with discord using supabase. After a successful log in they have a option to "link" their discord account with steam. After the linking process their steam-id should be inserted into the supabase profiles table. Supabase does not have steam as a official authentication provider so i'm using passport-steam for the steam part. The passport-steam strategy looks like this: const SteamStrategy = passportSteam.Strategy; ...

Type safety in apollo server

Big fan of t3/trpc but work uses apollo server. Is there any way to incorporate end to end type safety in apollo server?

Eslint problem

How can I fix that?
const tier = api.user.getTier.useQuery(`${user.user?.emailAddresses[0]?.emailAddress}`);
const tokens = api.user.getTokens.useQuery(`${user.user?.emailAddresses[0]?.emailAddress}`);
const tier = api.user.getTier.useQuery(`${user.user?.emailAddresses[0]?.emailAddress}`);
const tokens = api.user.getTokens.useQuery(`${user.user?.emailAddresses[0]?.emailAddress}`);
...

Client-Side Fetching with React-Query

Hi guys! so I have an external api that I needed to consume on the client-side. I assume that I don't need to setup anything since trpc already included react-query as a dependency so what I did was just imported useQuery from @tanstack/react-query and use: ```const { data, isLoading } = useQuery({ queryKey: ["data"], queryFn: queryFunction,...

Best practices/tools for generating OpenAPI and documentation

I'm doing a spike on refactoring some services and looking to add a build script/step that auto-gens the OpenAPI documentation (ideally plus static sites) for the front-end team to consume. The back-end is in C# for reference, and thankfully the .JSON spec gen has been handled through NSwag. What I'm looking for now is clean MD files and hopefully a static site generator. So far I've found tools like https://github.com/Mermade/widdershins (or https://www.npmjs.com/package/openapi-to-md) and https://github.com/slatedocs/slate that cross most of the goalposts, my concern right now is that there isn't a lot of active maintenance on some of these projects, and some of the documentation leaves a bit to be desired....

Error on Router

```ts import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); ...
Solution:
```tsx import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; export const postsCreateUser = createTRPCRouter({ checkUser: publicProcedure.input(z.string()).query(async ({ ctx, input }) => {...

What are the most popular social medias amongs IT proffesionals?

I'm creating an app and I would like to include all of the most popular platforms. This includes: recruiters, programmers, UX/UI and any other IT profession My curent list: - Facebook...

VSCode Performance issue for prettier

Hello everyone, I have created an app using create-t3-app, but I am experiencing slow performance in my VSCode when working with this codebase. For example, when I right-click and click "Format Code" with Prettier, it often takes more than 60 seconds to complete. Other functionalities such as GitHub copilot suggestions, Git tree diff checks, and code suggestions are also slow, and some Prettier features are not working properly. It's strange because my VSCode runs smoothly with even larger codebases than this T3 stack codebase. ...

how stable is nextjs 13/server side components

I remember on release there was a bunch of advice not to start a new big project with it, what's the state now?

Incorrect font on mobile, using Next.js.

I can't figure out why this isn't translating to mobile correctly. Anything obvious I'm missing out on that ChatGPT isn't helping me with? `import { type AppType } from "next/dist/shared/lib/utils"; import "~/styles/globals.css";...

Immediately prompting for signin

currently I have this in home: ```js const Home: NextPage = () => { const { data: sessionData } = useSession();...

Typescript-Eslint Error

Parsing error: ESLint was configured to run on <tsconfigRootDir>/tailwind.config.js using parserOptions.project: <tsconfigRootDir>/tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to include this file - Create a new TSConfig that includes this file and include it in your parserOptions.project...

How to perform additional validation on update mutation?

I want to protect each user's data so it can't be modified if you aren't the user who created the object (userId as foreign key). Here is my work in progress update mutation. I want to ensure that the object.userId matches the ctx.auth.userId before allowing to update it. ```update: protectedProcedure .input( z.object({...

PlanetScale deployments when using T3, prisma, and vercel

Hey friends! I'm working on a T3 based app that I have been working on for a while now, and I'm trying to get the production environment setup. I would like to use vercel to deploy along with PlanetScale for the database, but I'm finding a lack of information on how to deal with migrations on new deployments. My ideal scenario is that when I merge anything into my main branch on GitHub, when vercel deploys the new site it also migrates any prisma schema changes to the main PlanetScale branch. However I can't seem to find any good information on how to automate this. At the moment it seems like I need to create a planetscale branch from the cli, create a deploy-request, accept that request, then merge my PR, so vercel deploys. This just doesn't seem like the "right" way to do it. Unfortunately in every prisma/planetscale video I've watched, they always explain the initial setup, but never anything about what to do after that first deployment. I did also watch Theo's FROM 0 TO PROD FOR $0 video, but unless I missed something, he's just using prisma db push before uploading his code and is also using the dev DB for local development....

Need Help Implementing Builder.io

Hello! I am not the best at coding, so please forgive me if I am having an easy issue. I am currently trying to implement Builder.io with the t3 template provided by Theo, but I seem to be having an issue successfully connecting. I constantly receive a "404 This page could not be found." issue. I utilized the automatic integration code that the website provides:

npx @builder.io/cli@latest integrate --model page --apiKey 615d9ca18922400a9882696727a79c7f --content 4123438dd1e74b35afb54c5c74cc0514

npx @builder.io/cli@latest integrate --model page --apiKey 615d9ca18922400a9882696727a79c7f --content 4123438dd1e74b35afb54c5c74cc0514
...

Changes to schema.prisma

Whenever I want to push changes to a model in my schema.prisma, it asks me to delete all the available data first. Is there a way to get around this? What is the standard way of pushing up changes I make to my db?

Creating an npm command

This is a bit left field but I know the creators of ct3a are here and I wanted to know how you went about creating the npx create-t3-app command . I plan on doing something like this for Electron apps . I want to be able to scaffold a new project with my favorite packages for building desktop apps without having to do the setup every single time. Thanks in advance for the replies...