[RFC] Generate adapters for forms

[dillondotzip]

I'm working on a project that has nested forms. Something that is quite common. I'm using react-final-form-arrays and have a schema with relations nested 2 levels:

model Product {
  id           Int        @default(autoincrement()) @id
  createdAt    DateTime   @default(now())
  updatedAt    DateTime   @updatedAt
  title        String
  description  String
  storefront   Storefront @relation(fields: [storefrontId], references: [id])
  storefrontId Int
  categories   Category[]
  images       Json
  variants     Variant[]
}

model Variant {
  id        Int      @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   
  product   Product? @relation(fields: [productId], references: [id])  
  productId Int?
  children  VariantChild[]      
}

model VariantChild {
  id        Int      @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  variant   Variant? @relation(fields: [variantId], references: [id])
  variantId Int?  
  title     String
  price     Int
  sku       String
  salePrice Int
  image     Json
  quantity   Int
}

Prisma has their own syntax when dealing creating or updating relationships between tables.

In my example, something like this:

const product = await db.product.create({
      data: {
        ...data,
        variant: {
          create: {
            ...data.variant,
            children: { 
               create: {
                 ...data.variant.children 
                } 
             }
          },
        },
      },
    })

Then came the issue with updating nested tables, so we came up with the following "adapter":

import { ProductGetPayload, ProductUpdateArgs } from "db"
import isEqual from "lodash/isEqual"

type Product = ProductGetPayload<{
  include: {
    variants: {
      include: {
        children: true
      }
    }
  }
}>

function getDiff(value: any[], initial?: any[], mapper?: (item: any, initial?: any) => any) {
  const create = value.filter((item) => !item?.id)
  const update = value.filter((item, index) => item.id && !isEqual(item, initial && initial[index]))
  const remove = initial
    ?.filter((item) => !value.find((el) => el.id === item.id))
    .map((item) => ({ id: item.id }))

  return {
    create: create.length ? (mapper ? create.map((item) => mapper(item)) : create) : undefined,
    update: update.length
      ? update.map((data) => {
          const initialValue = initial?.find((i) => i.id === data.id)
          const changed = Object.keys(data).reduce((acc, key) => {
            const value = data[key]
            if (!isEqual(value, initialValue && initialValue[key])) {
              acc[key] = value
            }
            return acc
          }, {})

          return {
            data: mapper ? mapper(changed, initialValue) : changed,
            where: { id: data.id },
          }
        })
      : undefined,
    delete: remove?.length ? remove : undefined,
  }
}

export const getProductUpdateData = (
  values: Product,
  initial?: Product
): ProductUpdateArgs["data"] => {
  return {
    ...values,
    variants:
      values.variants &&
      getDiff(values.variants, initial?.variants, (item, initial) => ({
        ...item,
        children: item.children && getDiff(item.children, initial?.children),
      })),
  }
}

Wondering how other people deal with this, and how we can incorporate some sort of react-final-form & prisma abstract?

[flybayer]

Wow, impressive! I don't think I'm totally following it, but it looks helpful.

Can you show an example of how you use getProductUpdateData? And also a before and after comparison (with and without the adapter) would be helpful.

[dillondotzip]

Sure, so I'm using getProductUpdateData inside products\pages\new.tsx.

<ProductForm
          initialValues={{}}
          onSubmit={async (data) => {
            try {
              const product = await createProduct({
                data: getProductUpdateData(data) as any,
              })
              toast.success("Product created")
              router.push("/products/[productId]", `/products/${product.id}`)
            } catch (error) {
              toast.error(error.message)

              if (process.env.NODE_ENV === "development") {
                throw error
              }
            }
          }}
        />

or in edit:

<ProductForm
        initialValues={product}
        onSubmit={async (data) => {
          try {
            const { id, createdAt, storefrontId, ...newData } = data

            const updated = await updateProduct({
              where: { id: product.id },
              data: getProductUpdateData(newData, product as any),
            })
            await mutate(updated)
            toast.success("Product updated")
            router.push("/products/[productId]", `/products/${updated.id}`)
          } catch (error) {
            toast.error(error.message)

            if (process.env.NODE_ENV === "development") {
              throw error
            }
          }
        }}
      />

Without it, data is being sent back to the mutation like this:

{
 title: "Test Product",
description: "Test Description",
variants: [
  0: {title: "Test Variant", children: [0: {title: "Red Tshirt", price: 1200 } ]}
 ]
}

But this won't work, because we wan't to create an entry in the database for the variant, and the associated variant children.

So the adapter sends back the data adapted to the structure prisma is expecting:

{
  "title": "Test",
  "description": "Test Description",
  "variants": {
    "update": undefined,
    "delete": undefined,
    "create": [
      {
        "title": "Test Variant",
        "children": {
          "update": undefined,
          "delete": undefined,
          "create": [
            {
              "title": "Variant Child",
              "price": 12,
            }
          ]
        }
      }
    ]
  },
 
}

Hopefully this makes more sense

[flybayer]

Ok yes that helps! Did you consider only using getProductUpdateData inside the mutations and not in the form submit?

[dillondotzip]

Ya, of course. Probably the better place to use it. I'm using inside of 'pages' out of habit I guess.

[cr101]

I will need to use nested forms for an upcoming Blitz project so this is super helpful. Thanks for sharing.
Having to update nested tables is a pretty common requirement so a solution that works with either react-final-form or react-hook-form should probably be in the Blitz docs.

[dillondotzip]

I'm thinking it can be possible to make this a template. It could be made when running blitz g all <modelName>, then parse to see if one of the attributes are a relation.

Then based on the model name, the file will export a function <modelName>Adapter(). It will accept 2 parameters, values & initialValues. We can then return the properly structured data in pages or mutations, and have it work with

• create,
• update
• delete
• connect
• disconnect

or... this can be overkill, and I can just help write documentation on nested forms

@flybayer, what do you think?

[flybayer]

Let's leave it as documentation/example for now until we get a better feel for how many people will use it, how it can be improved etc.