zendev Posts - Answer Overflow

zendev

Explore posts from servers

•Created by zendev on 11/8/2023 in #questions

Building shadcn <Form> components for string arrays?

So I know it uses react-hook-form under the hood, but I'm struggling to figure out the best pattern for building the form for an array. Say I had a form schema like this:

const formSchema = z.object({
  socials: z.array(z.string()),
});

const formSchema = z.object({
  socials: z.array(z.string()),
});

I want to create multiple <Input /> components that should each correspond to a certain element in the "socials" array, but how would this work using shadcn <Form> components? This doesn't work, it throws an error saying "expected array, received string"

<FormField
  control={form.control}
  name="socials"
  render={({ field }) => (
    <FormItem>
      <FormLabel className="sr-only">Create post</FormLabel>
      <FormControl>
        {/* I want these inputs to correspond to each element in the array, how do I achieve this? */}
        <Input
          {...field}
        />
        <Input
          {...field}
        />
        <Input
          {...field}
        />
      </FormControl>
      <FormDescription className="sr-only">
        Paste in your Spotify link
      </FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

<FormField
  control={form.control}
  name="socials"
  render={({ field }) => (
    <FormItem>
      <FormLabel className="sr-only">Create post</FormLabel>
      <FormControl>
        {/* I want these inputs to correspond to each element in the array, how do I achieve this? */}
        <Input
          {...field}
        />
        <Input
          {...field}
        />
        <Input
          {...field}
        />
      </FormControl>
      <FormDescription className="sr-only">
        Paste in your Spotify link
      </FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

5 replies

DTDrizzle Team

•Created by zendev on 10/26/2023 in #help

Infinite scroll w/ Drizzle + tRPC

Has anyone implemented infinite scrolling/pagination using Drizzle? The example in the tRPC docs uses Prisma, which has a built-in cursor parameter for pagination. What would one use for Drizzle? https://trpc.io/docs/client/react/useInfiniteQuery

8 replies

TTCTheo's Typesafe Cult

•Created by zendev on 10/6/2023 in #questions

Best practice for providing current user from db to all react components?

So I know that various auth providers have hooks like useUser() or useSession() which you can use to access their user object in components, but I have a users table where each user has an extensive amount of data describing them. I personally use supabase with the T3 stack, and I don't want to copy all this data to the "user_metadata" that supabase provides just to have the useUser() functionality. So my question is: what's the best practice for providing current user data (from the users table in db) to all react components for the purpose of stuff like conditional rendering? (I've thought about state management solution, or just plain old useContext(), but then how would you trigger refetches when the user changes something?)

9 replies

DTDrizzle Team

•Created by zendev on 10/5/2023 in #help

How do relational queries work under the hood?

Just trying to further my understanding of how drizzle works - how would the following relational query be written using the sql-like drizzle syntax?

const post = await db.query.posts.findFirst({
  with: {
    comments: true,
  },
});

const post = await db.query.posts.findFirst({
  with: {
    comments: true,
  },
});

4 replies

DTDrizzle Team

•Created by zendev on 9/27/2023 in #help

get drizzle to correctly infer type with limit 1

If you do something simple like this:

const user = await db
  .select()
  .from(users)
  .where(eq(users.userId, 1))
  .limit(1);
return user;

const user = await db
  .select()
  .from(users)
  .where(eq(users.userId, 1))
  .limit(1);
return user;

Drizzle seems to infer the type of user as an array

user[]

user[]

, in spite of specifying limit(1) which should only return one row from the users table. What is the best way to get the correct type of user, which should be

user | undefined

user | undefined

25 replies

DTDrizzle Team

•Created by zendev on 9/26/2023 in #help

environment variables undefined in drizzle.config.ts

I have my config set up like this:

import { type Config } from "drizzle-kit";

if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL is not set!");
}

export default {
  schema: "src/server/db/schema.ts",
  driver: "pg",
  out: "drizzle/migrations",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL,
  },
} satisfies Config;

import { type Config } from "drizzle-kit";

if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL is not set!");
}

export default {
  schema: "src/server/db/schema.ts",
  driver: "pg",
  out: "drizzle/migrations",
  dbCredentials: {
    connectionString: process.env.DATABASE_URL,
  },
} satisfies Config;

But when I try to run

db:generate

db:generate

from my scripts, it throws my error designed to catch when

process.env.DATABASE_URL

process.env.DATABASE_URL

is undefined. I can't figure out why it's coming up as undefined here though since it definitely does have a value, it even works when running migrations and such. I used create-t3-app for this project btw

4 replies

DTDrizzle Team

•Created by zendev on 9/19/2023 in #help

Docs unclear on connection pool vs. direct connection

In the docs under "Supabase" it teaches you how to setup Drizzle w/ supabase. The last part shows how to set up the connection:

import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
import { users } from './schema'
 
const connectionString = process.env.DATABASE_URL
const client = postgres(connectionString)
const db = drizzle(client);
 
const allUsers = await db.select().from(users);

import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
import { users } from './schema'
 
const connectionString = process.env.DATABASE_URL
const client = postgres(connectionString)
const db = drizzle(client);
 
const allUsers = await db.select().from(users);

But underneath it simply says: Connect to your database using the Connection Pooler for serverless environments, and the Direct Connection for long-running servers. I'm assuming the code above is for Direct Connection? If that is the case, why is there no implementation demonstration for the Connection Pooler? Also isn't Supabase always going to be serverless? Maybe I'm missing something but this just feels confusing

17 replies

TTCTheo's Typesafe Cult

•Created by zendev on 8/23/2023 in #questions

Alternative to Clerk for cross-platform app (Next.js / React Native + Expo)

I’m looking to build a cross-platform app (web + mobile) and I love the DX that comes with the t3 stack. Ive seen the turborepo templates but one major issue sticks out to me: create-t3-turbo doesn’t seem to have an auth solution for RN + Expo, and the other template forces the use of Clerk. Yes Clerk is a great product, but their pricing is insane for anything consumer-focused (lots of MAUs) so what are some viable alternatives for handling auth across web + mobile?

11 replies

TTCTheo's Typesafe Cult

•Created by zendev on 8/15/2023 in #questions

tRPC SSG Helper w/ new Clerk middleware

So my goal is to do almost exactly what Theo does in his tutorial using the SSG helper for profile pages, but due to updated Clerk middleware I had to change my trpc.ts file. I have my trpc.ts file set up identical to this: https://github.com/perkinsjr/t3-app-clerk-minimal/blob/main/src/server/api/trpc.ts There is a comment in there that says:

/**
 * This helper generates the "internals" for a tRPC context. If you need to use
 * it, you can export it from here
 *
 * Examples of things you may need it for:
 * - testing, so we dont have to mock Next.js' req/res
 * - trpc's `createSSGHelpers` where we don't have req/res
 * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
 */

/**
 * This helper generates the "internals" for a tRPC context. If you need to use
 * it, you can export it from here
 *
 * Examples of things you may need it for:
 * - testing, so we dont have to mock Next.js' req/res
 * - trpc's `createSSGHelpers` where we don't have req/res
 * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
 */

But I can't figure out how to use the "auth" object in the context when defining the SSG helper, it's always erroring when I try to set it up:

import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import superjson from "superjson";


export const generateSSGHelper = () =>
  createServerSideHelpers({
    router: appRouter,
    ctx: { auth, prisma }, // auth errors here saying: No value exists in scope for the shorthand property 'auth'. Either declare one or provide an initializer.ts(18004)
    transformer: superjson,
  });

import { createServerSideHelpers } from "@trpc/react-query/server";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import superjson from "superjson";


export const generateSSGHelper = () =>
  createServerSideHelpers({
    router: appRouter,
    ctx: { auth, prisma }, // auth errors here saying: No value exists in scope for the shorthand property 'auth'. Either declare one or provide an initializer.ts(18004)
    transformer: superjson,
  });

5 replies

TTCTheo's Typesafe Cult

•Created by zendev on 8/1/2023 in #questions

How to create debounce search with tRPC

So I'm aware that react-query provides a useDebounce hook but I guess tRPC doesn't wrap around this - so I'm wondering, what is the optimal way to create a simple search bar function with tRPC? If I have something like this:

const { data } = api.users.getById.useQuery({ id });

const { data } = api.users.getById.useQuery({ id });

How do I add debouncing functionality so that the query only fires after a set time interval? As far as I can tell, tRPC queries fire instantly unless you set the

enabled

enabled

property, but that only accepts a boolean.

5 replies

TTCTheo's Typesafe Cult

•Created by zendev on 7/6/2023 in #questions

How to use Prisma model type in tRPC mutation w/ Zod

I have some models defined in my schema.prisma file. Let's say they look like this:

model Art {
  id        String @id @default(cuid())
  // Some other fields
  creators Creator[]
}

model Creator {
  id        String @id @default(cuid())
  creatorId String
  artId    String
  art      Art   @relation(fields: [artId], references: [id])
}

model Art {
  id        String @id @default(cuid())
  // Some other fields
  creators Creator[]
}

model Creator {
  id        String @id @default(cuid())
  creatorId String
  artId    String
  art      Art   @relation(fields: [artId], references: [id])
}

I am using a tRPC mutation to create an "Art" in my Planetscale database. So, since I'm using Zod, I am doing something like this:

create: privateProcedure
    .input(
      z.object({
        // Some other fields
        creators: (this is where I'm confused)
      })
    )
    .mutation(async ({ input }) => {
      const artistId = ctx.userId;

      const art = await ctx.prisma.art.create({
        data: {
          // Some other fields
          creators: input.creators,
        },
      });

      return art;
    }),

create: privateProcedure
    .input(
      z.object({
        // Some other fields
        creators: (this is where I'm confused)
      })
    )
    .mutation(async ({ input }) => {
      const artistId = ctx.userId;

      const art = await ctx.prisma.art.create({
        data: {
          // Some other fields
          creators: input.creators,
        },
      });

      return art;
    }),

I know I can get the Creator type from Prisma, but I don't know how to tell Zod to expect those properties as the input so that the tRPC procedure will run. I hope I'm explaining this ok because it's kinda hard to put into words lol

7 replies

TTCTheo's Typesafe Cult

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

tRPC query gets the type right on the way in and wrong on the way out?

6 replies

TTCTheo's Typesafe Cult

•Created by zendev on 6/28/2023 in #questions

Clerk - can’t get types of unsafeMetadata properties on user object?

I have some unsafeMetadata stored on the user object for users in my t3-app. When I try to access any property of the object, TypeScript seems unable to get/infer the type of that property. So for example: user.unsafeMetadata.stringProperty should be a string but it comes back as unknown. Is this a known issue or am I not doing something right?

5 replies

TTCTheo's Typesafe Cult

•Created by zendev on 4/23/2023 in #questions

tons of eslint errors in vercel builds that don’t show up in dev

I haven’t changed the default eslint config file that comes out the box with create-t3-app. Whenever I deploy to vercel, the builds always exit with many @typescript-eslint/… errors that I just don’t see anywhere during development. Anyone know how to fix this so that these errors show up during development and on local host?

1 replies

TTCTheo's Typesafe Cult

•Created by zendev on 4/19/2023 in #questions

File storage with T3

Hey so someone asked this before but it was half a year ago so I’m interested in seeing if things have changed: I’m looking for a cloud-based file storage option for storing image and audio files for my app. Metadata for both will be stored in Planetscale but I need something for the actual files. What do you guys recommend?

48 replies

TTCTheo's Typesafe Cult

•Created by zendev on 4/1/2023 in #questions

P1001 Error with Prisma trying to reach database server

I’m following Theo’s T3 tutorial but when trying to do ‘npx prisma db push’ I get an error saying P1001: Can’t reach database server at ‘aws.connect.psdb.cloud’:3306 I can’t figure out if it’s an issue with planet scale or prisma and couldn’t find anything helpful online. Thanks in advance for any help

1 replies

Gaming

Programming