TTC

Theo's Typesafe Cult

Join the Theo's Typesafe Cult server to ask questions!

Join Server

TTC

Theo's Typesafe Cult

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

Join Server

Community questions

Channels

Ppapsn

9/21/2023

How to get the discord guilds from the user next-auth

I already tried it with scope but I dont know how to fetch the scope data. I dont find any documentations about scopes on next-auth

https://pastebin.com/MJGJf8K3

Solution:

nvm, have to delete the account record of the user.
I changed the scope before I logged in first time, so the token was invalid

Ppapsn

9/21/2023

Error: Rendered more hooks than during the previous render.

https://i.imgur.com/9FCsFhb.png

Hey, im a noob currently and I get sometimes this error, but I dont know why. I googled and found some explanations but I dont get it tbh. Someone can explain me why this error occurs. ❤️

Solution:

You can't conditionally call hooks in that manner. If you want to call that useQuery hook only when you have a user, then you have to do something like this:

const { data: sessionData } = useSession();

const data = api.example.getUserGuilds.useQuery({
    userId: sessionData.user.id,
}, sessionData?.user !== null);

The first parameter to useQuery is the object with your parameters, and the second parameter is the condition on when to call it. If sessionData?.user !== null (probably could be shortened to sessionData?.user), then call your userQuery.

Make sense?

Mmosesintech

9/20/2023

TypeScript error: Type 'string' is not assignable to union value

Hello friends.

I've picked up my side project again this week and I'm trying to add a new feature (required field indicator). It's a component library for forms. It's expecting specific form data:

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

When a user passes in the form data, they may or may not include...

Solution:

Typescript infers the types from the json to be plain types like string, and so you can assert type for it to be proper. To do so you can do the following, where Form is the type you defined

import data from "../data/query.json"
const mockData = data as Form

Message Not Public

Tthisisnotawill

9/20/2023

As a nextjs + shadcnui user going to expo + react native, what libraries should I know about?

My biggest concern jumping into react native is not having the libraries I know and love like tailwind and shadcnui. What are you guys using?

Eel_clog

9/20/2023

auth with Fastify and redis

When it comes to db session strategy in NextAuth. I used to use a Prisma adapter that stores the session in MySQL db but afaik that's not optimal for bigger apps especially if there's lot of queries and it should be stored in a redis db instead.

Now im trying to build a simple auth system using Fastify and Passport js with MySQL for storing users info and a Redis db for storing sessions. But idk really how to do that and i searched lot but i didn't find anything.

Should i stick with MySQL *t...

Wwerz0xff

9/20/2023

Vercel responding with 405 for a api route

the api path is correct, i think vercel thinks of it as a static route

Solution:

logs:

Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

Hhyhy

9/20/2023

Refreshing NextAuth Discord provider user details

Not sure how to phrase this so will try to describe in detail:

My website uses the nextauth discord provider (and no other sign in). When a user with an account changes their discord name and then signs in, it doesn't update. When a user changes their discord profile picture (that i'm using as their profile picture on my website) the link breaks (see image).

Is there a way to fetch the user's current username/profile picture on signin and update the database?

Thanks

Solution:

You can type it properly like this (refer the added lines)

import type { DiscordProfile } from "next-auth/providers/discord";

declare module "next-auth" {
  interface Profile extends DiscordProfile { }
}

Message Not Public

Aacronie

9/20/2023

Trying to use upload thing

export const { Uploader, UploadButton, UploadDropzone } =
  generateComponents<UploadFileRouter>();

when I try to use these component it still says pass generic?

Ccupofcraft

9/20/2023

Not sure how to move forward with NextAuth and Web3

Hi all,
I have to admit that I still have to experiment with the implementation but while documenting, I started to have some doubts that I would like to ask you first.

I already have a T3 app running with the authentication handled by NextAuth and the Discord provider.

Now I would like to allow people to also use their web3 wallet to sign in, but as far as I understood, this is pretty much a client authentication. Since I store the user session in the database, I wonder which would be the be...

Aaikenlapinrowe

9/20/2023

Issues creating public route after adding Clerk auth

After adding Clerk to my application, all API routes return a 401, even the public one gets a 401 unauthorized error. I need help with this promptly, and I am willing to pay whoever can support me in an 1on1 session. Chat and call is fine.

I am running the same tech stack as shown in Theos T3 stack tutorial (https://www.youtube.com/watch?v=YkOSUVzOAA4&t=2025s) and this issue is on the step where Clerk is added. This is probably some dumb simple bug, but I am stuck on this and need assistance a...

Ccolten909

9/20/2023

Prisma Seeding

Hello, I am trying to seed my database (supabase) using the 'npx prisma db seed' command. However I keep getting this error:
Running seed command ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts ...
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/folders/project_climb/prisma/seed.ts.

I am using the T3 stacks so I have my script written "prisma": {
"seed": "ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts"
}, according...

Hhachoter

9/19/2023

trpc client does not have a property query

I think this is an issue on my end here is how I am defining everything

export const t = initTRPC.create();

export const assetsRouter = t.router({
  images: t.procedure.input(getImagesValidator).query(async ({ input }) => {
    return await getImages(input);
  }),
});

import { assetsRouter } from "../apps/routes";
import { t } from "./t";
export const appRouter = t.router({
menus: menusRouter
});
// export type definition of API
export type AppRouter = typeof appRouter;

And in...

Yyourfrenv2

9/19/2023

uploadthing custom theming not working

hey guys I am not sure if I am doing this correctly but custom theming is not working on the UploadButton

The container does change color but the button doesn't change at all

**My css is in globals.css

``js
      <UploadButton
        appearance={{
          button({ ready, isUploading }) {
            return

custom-button ${
ready ? "custom-button-ready" : "custom-button-not-ready"
} ${isUploading ? "custom-button-uploading" : ""}`;
},
containe...

Bbolt04

9/19/2023

How to use fetchpriority="high" in a <picture> element?

[fetchpriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) is often used to optimize images that are the LCP (a core web vitals metric) on pages.
It can be used on <img>, <script> and other tags, but I don't think it works for the picture HTML tag.

If I'm using the picture tag in order to have one image for each viewport, how can I optimize the image that is loaded using fetchpriority?

Any help is appreciated.

Ccoralcreature

9/19/2023

Expo problem AppEntry.js problems (create-t3-turbo)

When i run npx expo and connect it to my iphone, im getting bundling failed (Unable to resolve "../../App" from "node_modules\expo\AppEntry.js")
../../App references nothing by default, what is it supposed to reference.

Ccoralcreature

9/19/2023

I am getting errors while trying to install create-t3-turbo dependencies, how do i fix them?

This is my error message
PS C:\Users\cc09p\OneDrive\Desktop\Programming\my-turborepo> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @acme/nextjs@0.1.0
npm ERR! Found: @tanstack/react-query@4.35.3
npm ERR! node_modules/@tanstack/react-query
npm ERR! @tanstack/react-query@"^4.35.3" from @acme/nextjs@0.1.0
npm ERR! apps/nextjs
npm ERR! @acme/nextjs@0.1.0
npm ERR! node_modules/@acme/nextjs
npm ERR! workspace app...

Ddanielk24

9/19/2023

NEXT JS APP Hosting on AWS

This will be basically a stupid question, I guess, but I could not find an answer, so I hope you guys can help me out.
I have a nextjs project that is basically a gallery portfolio page, and I am using the nextjs server components as well as the client ones.

Is my application still a static website if I am using server components? The reason I ask this is because I would like to host the site in a S3 bucket, but as far as I know, this is only for static websites.
My server components are actual...

Ppablom2996

9/19/2023

svgs?

How to fix this error? it works fine but i have this "any" type error

Ppapsn

9/19/2023

create t3 stack init error

since some time I get this error if I try to init a new t3 app, anyone know how to fix it?
```bash
Adding boilerplate...
✔ Successfully setup boilerplate for nextAuth
✔ Successfully setup boilerplate for prisma
✔ Successfully setup boilerplate for tailwind
✔ Successfully setup boilerplate for trpc
✔ Successfully setup boilerplate for envVariables

Installing dependencies...
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/next/-/next-13.5.0.tgz - Not found
npm ERR! 404...

Dderas0565

9/19/2023

Looking for an up-to-date RN CLI tutorial

I know that Expo is the preffered way and easier to setup and update your app on app stores when already published, but I would like to also like to learn the React Native CLI way of doing things without Expo. Do you know about any good tutorial that is up-to-day (will work on macOS M1) with some hello world or to-do app?