zd Posts - Answer Overflow

Explore posts from servers

•Created by zd on 9/19/2024 in #questions

NextJS 14.2 Parallel Routes Change?

Finally going through Theo's awesome modern react tutorial [1]. I got to the point of deleting images and when the modal is visible it fails. This is because /src/app/@modal/(.)img/[id]/page.tsx has the modal which has the FullPageImageView component. That component calls getImage which checks to see if the image exists while getting it and throws an exception if it's not found (queries.ts->getImage if(!image) throw). Since the image was just deleted, it doesn't exist. I was bashing my head against the wall trying to find what was different. I even pulled the sample repo down and got it locally running without the error. Then I changed my package.json to reference "next": "14.1.3" (from sample code) instead of "^14.2.4" which it pulled in when I created the project. So, did something change in Next 14.2 parallel routes that causes a re-render before redirect('/') (imported from "next/navigation") where it didn't re-render before redirect on next 14.1? Looking at release notes [2, 3] there are several mentions about parallel routes [4 - 7]. But 4 is about not requiring a dummy default. 5 is about multi-slot layouts, which I don't think is at play here. 6 is about catch all slots, which again, doesn't seem to be in play. 7 may be related, but I frankly can't tell what it means. I think it has to do with inadvertant blank pages instead of loading states. Thanks zd [1] https://www.youtube.com/watch?v=d5x0JCZbAJs [2] https://nextjs.org/blog/next-14-2 [3] https://github.com/vercel/next.js/releases?q=14.2&expanded=true [4] https://github.com/vercel/next.js/pull/60776 [5] https://github.com/vercel/next.js/pull/61115 [6] https://github.com/vercel/next.js/pull/61174 [7] https://github.com/vercel/next.js/pull/61597

2 replies

DTDrizzle Team

•Created by zd on 9/1/2024 in #help

string.max message not respected?

How do I refine my createInsertSchema to override the message for the max length of a string? I have a mySqlTable defined named "tags".

export const tags = createTable(
  "tags",
  {
...
    name: varchar("name", { length: 256 }).notNull(),
...

export const tags = createTable(
  "tags",
  {
...
    name: varchar("name", { length: 256 }).notNull(),
...

From there I create an insert schema.

export const insertTagSchema = createInsertSchema(tags, {
  name: (schema) =>
    schema.name
      .min(2, "Please enter a tag name of at least 2 characters")
      .max(256, "Please enter a tag name of 256 characters or less"),
...

export const insertTagSchema = createInsertSchema(tags, {
  name: (schema) =>
    schema.name
      .min(2, "Please enter a tag name of at least 2 characters")
      .max(256, "Please enter a tag name of 256 characters or less"),
...

I use that insertTagSchema in a react-hook-form resolver: zodResolver(insertTagSchema),. If I enter 1 character I get the appropriate message from the .min. However, if I enter over 256 I get the default message ("String must contain at most 256 character(s)") for the max value instead of the message provided. If I set the .max smaller, like .max(25, "Please enter a tag name of 25 characters or less"),, I see the message provided between 26 and 256 characters. It seems like the schema refinement of .max adds a parsing step as opposed to refining the existing step.

1 replies

Gaming

Programming