Jacob Comments - Answer Overflow

Jacob

Explore posts from servers

CDCloudflare Developers TTCTheo's Typesafe Cult DTDrizzle Team

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

Use Zod schema after parse & transform as a new schema

Note: When using the .extend method even if you remove the field on the clientSchema it will still be there on the serverSchema

7 replies

TTCTheo's Typesafe Cult

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

Use Zod schema after parse & transform as a new schema

@Mugetsu So what i would recommend is the following:

// your default schema
const clientSchema = z.object({
  name: z.string(),
  bir: z.object({
      value: z.string(),
      label: z.string(),
  }).transform(val => val.value),
})

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
})

// your default schema
const clientSchema = z.object({
  name: z.string(),
  bir: z.object({
      value: z.string(),
      label: z.string(),
  }).transform(val => val.value),
})

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
})

What you could also do, is lets say we have many client fields that aren't all needed on the server e.g:

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.omit({ uid: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.omit({ uid: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

Or instead of omitting the value you could use the .pick method:

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.pick({ name: true, bir: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

// your default schema
const clientSchema = z.object({
  uid: z.string().uuid(),
  name: z.string(),
  bir: z
    .object({
      value: z.string(),
      label: z.string(),
    })
    .transform((val) => val.value),
});

// your server schema which will extend the clientSchema
const serverSchema = clientSchema.pick({ name: true, bir: true }).extend({
  bir: z.string(), // overriding the bir field and keeping all other fields
});

7 replies

TTCTheo's Typesafe Cult

•Created by Wezter on 8/31/2024 in #questions

Developing for multiple platforms.

If i were to be building a app with web + mobile i would be using something like react and react native with something like expo. i has seen teams use react native as a standised apporach to building web apps and just change the complier to use their custom components so for example a View might be a customised div element. I can't find the video but this is something that Twitter (X) did for their webapp for mobile devices. Expo has released support for building out web apps (https://docs.expo.dev/workflow/web/). I think the biggest benift to building the web app with react and a frame work than using something like react-native is that is essentally the same logic just changed so you can share code, functions and much more between the platforms in a mono repo

3 replies

TTCTheo's Typesafe Cult

•Created by Ankan on 9/1/2024 in #questions

need help in css

To build responsive websites i would recommend using an abstraction on css like tailwind to speed up the process and keep things nice and clean: https://tailwindcss.com/ If you want to use normal css than i would recommend doing something like this:

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

/* Base styles */
.nav {
  width: 500px;
  marigin: auto;
}

/* ...other styles */

/* Screen size 1 */
@media screen and (max-width: 650px) {
  .nav {
    width: 300px;
  }
  
  /* ...other styles */
}

/* Screen size 2 */
@media screen and (max-width: 650px) {
  .nav {
    width: 100%;
  }
  
  /* ...other styles */
}

/* Contuine with screen sizes */

Alternatively you could use instead for element you know you want a certain size of the page to use percentages or calculated values based off the screen size e.g width: 50% or width: calc(100% - 30px);

3 replies

TTCTheo's Typesafe Cult

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

Use Zod schema after parse & transform as a new schema

So just going to add a clarifying question, you are using the schema:

const schema = z.object({
    name: z.string(),
    bir: z.object({
        value: z.string(),
        label: z.string(),
    }).transform(val => val.value),

})

const schema = z.object({
    name: z.string(),
    bir: z.object({
        value: z.string(),
        label: z.string(),
    }).transform(val => val.value),

})

for the client side form validation? and for example you would want the tRPC validation schema to look something like this?:

const schema = z.object({
    name: z.string(),
    bir: z.string()
})

const schema = z.object({
    name: z.string(),
    bir: z.string()
})

Is that correct or do i have it wrong?

7 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 9/4/2024 in #questions

Failing to connect to local d1 db with drizzle

import { defineConfig } from "drizzle-kit";
import fs from "node:fs";
import path from "node:path";

function getLocalD1DB() {
  try {
    const basePath = path.resolve(".wrangler");
    const dbFile = fs
      .readdirSync(basePath, { encoding: "utf-8", recursive: true })
      .find((f) => f.endsWith(".sqlite"));

    if (!dbFile) {
      throw new Error(`.sqlite file not found in ${basePath}`);
    }

    const url = path.resolve(basePath, dbFile);
    console.log(`Using ${url}`);
    return `file:${url}`;
  } catch (err) {
    console.log(`Error  ${err}`);
  }
}

export default defineConfig({
  dialect: "sqlite",
  schema: "./app/server/db/schema.ts",
  out: "./drizzle",
  ...(process.env.NODE_ENV === "production"
    ? {
        driver: "d1-http",
        dbCredentials: {
          accountId: process.env.CLOUDFLARE_D1_ACCOUNT_ID,
          databaseId: process.env.DATABASE,
          token: process.env.CLOUDFLARE_D1_API_TOKEN,
        },
      }
    : {
        dbCredentials: {
          url: getLocalD1DB(),
        },
      }),
});

import { defineConfig } from "drizzle-kit";
import fs from "node:fs";
import path from "node:path";

function getLocalD1DB() {
  try {
    const basePath = path.resolve(".wrangler");
    const dbFile = fs
      .readdirSync(basePath, { encoding: "utf-8", recursive: true })
      .find((f) => f.endsWith(".sqlite"));

    if (!dbFile) {
      throw new Error(`.sqlite file not found in ${basePath}`);
    }

    const url = path.resolve(basePath, dbFile);
    console.log(`Using ${url}`);
    return `file:${url}`;
  } catch (err) {
    console.log(`Error  ${err}`);
  }
}

export default defineConfig({
  dialect: "sqlite",
  schema: "./app/server/db/schema.ts",
  out: "./drizzle",
  ...(process.env.NODE_ENV === "production"
    ? {
        driver: "d1-http",
        dbCredentials: {
          accountId: process.env.CLOUDFLARE_D1_ACCOUNT_ID,
          databaseId: process.env.DATABASE,
          token: process.env.CLOUDFLARE_D1_API_TOKEN,
        },
      }
    : {
        dbCredentials: {
          url: getLocalD1DB(),
        },
      }),
});

3 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 10/24/2023 in #questions

Struggling to use VERCEL_URL with `@t3-oss/env-nextjs`

Turns out the solution is to change the turbo config to include the envs

4 replies

TTCTheo's Typesafe Cult

•Created by Steven-sensei on 6/27/2024 in #questions

Shadcn Dialog + Form Error: React.Children.only

That's alright i have had the same issue before, and a bit confusing if you have fixed it else where by accident

5 replies

TTCTheo's Typesafe Cult

•Created by A Reptilian on 6/27/2024 in #questions

Most efficient monolith structure to have an Express.js REST API with Next.js SSR client?

Going off waht @Ovidius said you could run in a monrepo, turbo is the best choice for nextjs https://turbo.build/repo then you have all the code in the same code base and simply import the package in your nextjs repo if you want to for example share types. example mono repos: - https://github.com/midday-ai/midday - https://github.com/projectx-codehagen/Badget - https://github.com/Codehagen/Dingify - https://github.com/vercel/turbo/tree/main/examples

4 replies

TTCTheo's Typesafe Cult

•Created by Steven-sensei on 6/27/2024 in #questions

Shadcn Dialog + Form Error: React.Children.only

Formcontrol only expects 1 react element. Change your structure to something like this:

  <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Label</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

  <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Label</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />

if you wanted to have what you already have just wrap it in a framgment:

  <FormField
        control={form.control}
        name="buyIn"
        render={({ field }) => (
          <FormControl>
            <>
              <FormLabel>Buy in</FormLabel>
              <Input {...field} className="rounded-2xl" type="number" />
            </>
            <FormMessage />
          </FormControl>
        )}
      />

  <FormField
        control={form.control}
        name="buyIn"
        render={({ field }) => (
          <FormControl>
            <>
              <FormLabel>Buy in</FormLabel>
              <Input {...field} className="rounded-2xl" type="number" />
            </>
            <FormMessage />
          </FormControl>
        )}
      />

Generally you can fix the error React.Children.only expected to receive a single React element child. by wrapping your items in a fragment (which adds no extra markup) or your could wrap in a simple div

5 replies

TTCTheo's Typesafe Cult

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

How do I map next.config.js code samples in the Next docs to T3's implementation?

Yeh defintly not the prettiest solution

7 replies

TTCTheo's Typesafe Cult

•Created by Jacob on 6/25/2024 in #questions

Connecting to websockets in app router

Yeh Cool thank you for your help

5 replies

TTCTheo's Typesafe Cult

•Created by Jasper on 6/14/2024 in #questions

Advice on realtime integration

All good

50 replies

TTCTheo's Typesafe Cult

•Created by Jasper on 6/14/2024 in #questions

Advice on realtime integration

Know i am bit late with this but supabase has integrations (Supabase Intergrations) for quite a few different applications, including auth applications such as Auth0, Clerk, NextAuth and a few more - https://supabase.com/partners/integrations/clerk - https://supabase.com/partners/integrations/auth0 - https://supabase.com/partners/integrations/nextauth

50 replies

TTCTheo's Typesafe Cult

•Created by Kon on 6/22/2024 in #questions

Hitting request timeout on Vercel but function is expected to be slow

Could use backend job tools like https://trigger.dev or use webhooks

9 replies

TTCTheo's Typesafe Cult

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

is it possible to pass data from middleware to a server component?

All good

11 replies

TTCTheo's Typesafe Cult

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

is it possible to pass data from middleware to a server component?

here is some simple code to build that provider and get the id. setting up of the provider: session-provider.tsx

import React from "react";
import { createContext, useContext, useState } from "react";

// Define the type for the context value
export type SessionContextValue = {
  userId: string | null;
};

// Create a context to hold the state
const SessionContext = createContext<SessionContextValue | undefined>(
  undefined
);

// Custom hook to access the context
export const useSessionContext = (): SessionContextValue => {
  const context = useContext(SessionContext);
  if (!context) {
    throw new Error("useMapContext must be used within a MapProvider");
  }
  return context;
};

export interface SessionProviderProps {
  children: React.ReactNode;
  userId: string | null;
}

export const SessionProvider = ({ children, userId }: SessionProviderProps) => {
  return (
    <SessionContext.Provider value={{ userId }}>
      {children}
    </SessionContext.Provider>
  );
};

import React from "react";
import { createContext, useContext, useState } from "react";

// Define the type for the context value
export type SessionContextValue = {
  userId: string | null;
};

// Create a context to hold the state
const SessionContext = createContext<SessionContextValue | undefined>(
  undefined
);

// Custom hook to access the context
export const useSessionContext = (): SessionContextValue => {
  const context = useContext(SessionContext);
  if (!context) {
    throw new Error("useMapContext must be used within a MapProvider");
  }
  return context;
};

export interface SessionProviderProps {
  children: React.ReactNode;
  userId: string | null;
}

export const SessionProvider = ({ children, userId }: SessionProviderProps) => {
  return (
    <SessionContext.Provider value={{ userId }}>
      {children}
    </SessionContext.Provider>
  );
};

example usage: providers.tsx

import React from "react";
import { cookies } from "next/headers";
import { SessionProvider } from "@/components/providers";

export const Providers = ({ children }: { children: React.ReactNode }) => {
  const user_info = cookies().get("user");
  const user = decodeUser(user_info);

  return <SessionProvider userId={userId.id}>{children}</SessionProvider>;
};

import React from "react";
import { cookies } from "next/headers";
import { SessionProvider } from "@/components/providers";

export const Providers = ({ children }: { children: React.ReactNode }) => {
  const user_info = cookies().get("user");
  const user = decodeUser(user_info);

  return <SessionProvider userId={userId.id}>{children}</SessionProvider>;
};

11 replies

TTCTheo's Typesafe Cult

•Created by Jasper on 6/14/2024 in #questions

Advice on realtime integration

That’s okay glad I was able to help, read a lot of supabase’s documentation. If you are ever wondering on this feel free to ask, suoabase has amazing documentation, examples and YouTube videos explaining things along with building it out. Docs: https://supabase.com/docs YouTube channel: https://youtube.com/@supabase?si=4trmnodEPcz61pdL

50 replies

TTCTheo's Typesafe Cult

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

Observability in Next.js

Yeh awesome thank you not sure the best aproach going forward with this as well

14 replies

TTCTheo's Typesafe Cult

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

Deployment of T3 app / node / node w/GUI

Not sure if https://coolify.io/ would work for this project or not but seems from the outside like it might then just host yourself possible. could also go with a docker approach, i am not sure of any providers that would support the full workload tho

5 replies

Gaming

Programming