Before delving further, here’s a brief overview of the technologies I’m using:

• Next.Js(app router) version 14.2.2
• React version 18
• prisma version 5.12.1
• database -> mongodb

I’m new to prisma, When I attempt to update nested data in Prisma, it always returns an error in the catch block with the error message like this:

TypeError: Cannot read properties of undefined (reading 'map') at PATCH ...

I’m pretty sure there’s an error in this PATCH section but I don’t know where it is, here’s the code:

export const PATCH = async (
  req: NextRequest,
  { params }: { params: { id: string } }
) => {
  try {
    const { id } = params
    const body: ProductPostProps = await req.json()
    const { title, price, description, stock, categories, images } = body

    const updateProduct = await prisma.product.update({
      where: {
        id,
      },
      data: {
        title,
        price,
        description,
        stock,
        categories: {
          create: categories.map(({ title }) => ({
            title,
          })),
        },
        images: {
          create: images.map(({ image }) => ({
            image,
          })),
        },
      },
      include: {
        images: true,
        categories: true,
      },
    })

    if (!updateProduct) {
      return NextResponse.json({
        message: "data not found",
        status: 404,
      })
    }

    return NextResponse.json({
      message: "product updated",
    })
  } catch (error) {
    //error appear in this section
    console.log(error)
    return NextResponse.json({
      message: "internal server error",
      error,
      status: 500,
    })
  }
}

When I use the POST method to post nested data, it works fine. Here’s an example:

export const POST = async (req: NextRequest) => {
  try {
    const body: ProductPostProps = await req.json()
    const { title, price, description, stock, categories, images } = body

    await prisma.product.create({
      data: {
        title,
        price,
        description,
        stock,
        categories: {
          create: categories.map(({ title }) => ({
            title,
          })),
        },
        images: {
          create: images.map(({ image }) => ({
            image,
          })),
        },
      },
      include: {
        images: true,
        categories: true,
      },
    })

    return NextResponse.json({
      message: "product successfully created",
      status: 201,
    })
  } catch (error) {
    console.log(error)
    return NextResponse.json({
      message: "internal server error",
      error: error,
      status: 500,
    })
  }
}

And here’s an example of the data when successfully posted:

{
      "id": "662672ede82c9e68a76f9b06",
      "title": "Nike Dunk Low Retro SE",
      "price": 1900000,
      "description": "The '80s b-ball icon returns with a classic construction and throwback hoops flair. Channelling vintage style back onto the streets, its padded, low-cut collar lets you take your game anywhere—in comfort.",
      "stock": 10,
      "createdAt": "2024-04-22T14:23:41.713Z",
      "updatedAt": "2024-04-22T14:23:41.713Z",
      "images": [
        {
          "id": "662672ede82c9e68a76f9b0a",
          "image": "https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/6464f9e4-59af-4179-9c7f-e81d334db2aa/dunk-low-retro-se-shoes-tsMmHC.png",
          "productId": "662672ede82c9e68a76f9b06"
        },
        {
          "id": "662672ede82c9e68a76f9b0b",
          "image": "https://static.nike.com/a/images/t_PDP_1728_v1/f_auto,q_auto:eco/49f166a8-7ea5-4b64-b4a3-05fb4d420281/dunk-low-retro-se-shoes-tsMmHC.png",
          "productId": "662672ede82c9e68a76f9b06"
        },
      ],
      "categories": [
        {
          "id": "662672ede82c9e68a76f9b07",
          "title": "men's shoes",
          "productId": "662672ede82c9e68a76f9b06"
        },
        {
          "id": "662672ede82c9e68a76f9b09",
          "title": "nike",
          "productId": "662672ede82c9e68a76f9b06"
        }
      ],
    },

And this is my Prisma data model:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}
 
model Product {
  id          String         @id @default(auto()) @map("_id") @db.ObjectId
  title       String
  price       Int
  images      ImageProduct[]
  description String?
  stock       Int?
  categories  Category[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("products")
}

model ImageProduct {
  id        String  @id @default(auto()) @map("_id") @db.ObjectId
  image     String?
  product   Product @relation(fields: [productId], references: [id], onDelete: Cascade)
  productId String

  @@map("image_products")
}

model Category {
  id        String  @id @default(auto()) @map("_id") @db.ObjectId
  title     String
  product   Product @relation(fields: [productId], references: [id], onDelete: Cascade)
  productId String

  @@map("categories")
}