Jacob
Jacob
Explore posts from servers
CDCloudflare DevelopersTTCTheo's Typesafe CultDTDrizzle Team
PostsComments
TTCTheo's Typesafe Cult
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
CDCloudflare Developers
Created by Jacob on 9/9/2024 in #pages-help
Configuring a monorepo
Forgot to remove the wrangler.toml from the .gitignore and decided to opt into using the Root Directory setting
2 replies
CDCloudflare Developers
Created by Jacob on 9/4/2024 in #d1-database
Hi, I am having troubble setting up
Figured out i was running the incorrect command was running drizzle-kit migrate rather than drizzle-kit generate
2 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
CDCloudflare Developers
Created by Jacob on 8/4/2024 in #pages-help
Bun failing builds
never mind i got it all working again had to add the bun.lockb back so it would download the pckages
7 replies
CDCloudflare Developers
Created by Jacob on 8/4/2024 in #pages-help
Bun failing builds
12:16:29.435    Installing Bun v1.1.21...
12:16:29.528    Bun v1.1.21 is installed successfully!
12:16:29.984    Executing user command: bun run build
12:16:30.208    $ astro check && astro build
12:16:30.211    /usr/bin/bash: line 1: astro: command not found
12:16:30.212    error: script "build" exited with code 127
12:16:30.214    Failed: Error while executing user command. Exited with error code: 127
12:16:30.224    Failed: build command exited with code: 1
12:16:31.033    Failed: error occurred while running build command
12:16:29.435    Installing Bun v1.1.21...
12:16:29.528    Bun v1.1.21 is installed successfully!
12:16:29.984    Executing user command: bun run build
12:16:30.208    $ astro check && astro build
12:16:30.211    /usr/bin/bash: line 1: astro: command not found
12:16:30.212    error: script "build" exited with code 127
12:16:30.214    Failed: Error while executing user command. Exited with error code: 127
12:16:30.224    Failed: build command exited with code: 1
12:16:31.033    Failed: error occurred while running build command
7 replies
CDCloudflare Developers
Created by Jacob on 8/4/2024 in #pages-help
Bun failing builds
It is now saying that astro command is not found
7 replies
CDCloudflare Developers
Created by Jacob on 8/4/2024 in #pages-help
Bun failing builds
Yeh that seemed to stop it failing the download thank you
7 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