BeforeChange Hook is not deleting the field ID

[MahmoudAli1]

Bug Report

When I define my fieldhook to customize the value that I want to save in the document for a specific collection, I get an error of TypeError: Cannot create property 'id' on string 'whatever value I enter here' knowing that I'm using TypeScript for this project.

Current Behavior

The value is saved with an id and I want to customize data beforeChange so I can get rid of the id and the object that get created by default in the array
As an example

For Array called arr

If I created a field called cuisine with type text the result will be
arr = [{'cuisine':'food', id:'6364afbf6243095927619de7'}]

meanwhile I want to have
arr = ['food']

Expected Behavior

I expect to have the ability to drop id when I perform beforeChange hook since I can control the shape of the value I'm passing at that time.

Steps to Reproduce

1. Create a new collection (Stores.ts) with the following code

import { CollectionConfig } from 'payload/types';
import type { FieldHook } from 'payload/types';
import { Store } from '../interfaces/stores.interface';


// Field hook type is generic that takes three arguments:
// 1: The document type
// 2: The value type
// 3: The sibling data type

type ExampleFieldHook = FieldHook<Store, any, any>;

const cuisineFieldHook: ExampleFieldHook = ({
  value, 
  data, 
  siblingData, 
  originalDoc,
  operation,
  req,
}) => {
  console.log(value);
  value = value.map((e) => {return e.cuisine});
  return value; 
}

const Stores: CollectionConfig = {
  slug: 'stores',
  auth: false,
  access: {
    create: () => true,
    read: () => true,
    // update: () => true,
    // delete: () => true,
  },
  fields: [
    {
      name:"name",
      type:"text"
    },
    {
      name: 'cuisines',
      type: 'array',
      fields:[
        {
          name: 'cuisine',
          type: 'text'
        }
      ],
      hooks: {
        beforeChange:[cuisineFieldHook]
      }
    }
  ],
};




export default Stores;

2. import it into payload.config.ts so the file will look like this

import { buildConfig } from 'payload/config';
import path from 'path';
import Stores from './src/collections/Stores';
import PayloadUsers from './src/collections/Users'; // users collections that is associated with your admin panel


export default buildConfig({
  serverURL: 'your server URL here',
  admin: {
    user: PayloadUsers.slug,
  },
  collections: [
    Stores
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
});

3. Create a new interfaces folder and create a file called stores.interface.ts with the following content :

export interface Store {
  distance: any;
  _id?: string;
  name: string;
  nameAr?: string;
  cuisines: Array<Cuisine>;
  categories: Array<Category>;
  location: Location;
  details: Details;
  workingHours: Array<WorkingHours>;
  menu?: string;
  photos?: Array<string>;
  rank?: number;
  isFeatured?: boolean;
  coladaRate?: number;
  isMultiBranch?: boolean;
  wallet?: StoreWallet;
  mainPhotoURL?: string;
  rating?: number;
  qrCode?: string;
  description?: string;
  descriptionAr?: string;
  createdAt?: Date;
  updatedAt?: Date;
}

4. login to the payload CMS panel
5. select stores collection
6. start filling data and fill the array related to cuisines
7. Click on save
8. TypeError: Cannot create property 'id' on string 'whatever value I enter here' will appear as an error in the screen

Detailed Description

My package.json

{
  "name": "colada_backend",
  "version": "0.0.0",
  "description": "Colada User/Admin Services",
  "author": "",
  "license": "ISC",
  "scripts": {
    "start": "npm run build && NODE_ENV=development node dist/server.js",
    "develop": "npm run seed-reverse:dev && npm run seed:dev && cross-env NODE_ENV=development nodemon",
    "dev": "cross-env NODE_ENV=development nodemon",
    "build": "tsc && npx tsc-alias",
    "build-payload": "payload build",
    "test": "jest --forceExit --detectOpenHandles",
    "lint": "eslint --ignore-path .gitignore --ext .ts src/",
    "lint:fix": "npm run lint -- --fix",
    "deploy:prod": "npm run build && pm2 start ecosystem.config.js --only prod",
    "deploy:dev": "pm2 start ecosystem.config.js --only dev",
    "seed:dev": "NODE_ENV=development ts-node --files src/scripts/db/seed.ts $RANGE",
    "seed-reverse:dev": "NODE_ENV=development ts-node --files src/scripts/db/seedReverse.ts"
  },
  "dependencies": {
    "@types/qrcode": "^1.4.1",
    "axios": "^0.27.2",
    "bcrypt": "^5.0.1",
    "class-transformer": "^0.4.0",
    "class-validator": "^0.13.1",
    "compression": "^1.7.4",
    "config": "^3.3.6",
    "connect-mongo": "^4.6.0",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "cryptr": "^6.0.2",
    "dotenv": "^10.0.0",
    "envalid": "^7.1.0",
    "express": "^4.17.1",
    "express-session": "^1.17.2",
    "faker": "^5.5.3",
    "firebase-admin": "^10.0.2",
    "formidable": "^2.0.1",
    "helmet": "^4.6.0",
    "hpp": "^0.2.3",
    "install": "^0.13.0",
    "jest": "^27.0.6",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.29.1",
    "mongodb": "^4.2.1",
    "mongoose": "^5.10.1",
    "mongoose-fuzzy-searching": "^1.3.4",
    "morgan": "^1.10.0",
    "nanoid": "^3.1.30",
    "node-cron": "^3.0.0",
    "node-schedule": "^2.1.0",
    "npm": "^8.2.0",
    "payload": "^1.1.19",
    "pm2": "^5.1.0",
    "qrcode": "^1.3.2",
    "swagger-jsdoc": "^6.0.0",
    "swagger-ui-express": "^4.1.6",
    "ts-jest": "^27.0.3",
    "ts-mongoose-pagination": "https://github.com/3laween/ts-mongoose-pagination.git",
    "ts-node": "^10.0.0",
    "typescript": "^4.3.5",
    "uuid": "^8.3.2",
    "winston": "^3.3.3",
    "winston-daily-rotate-file": "^4.5.5"
  },
  "devDependencies": {
    "@types/aws-sdk": "^2.7.0",
    "@types/bcrypt": "^5.0.0",
    "@types/compression": "^1.7.1",
    "@types/config": "^0.0.39",
    "@types/cookie-parser": "^1.4.2",
    "@types/cors": "^2.8.11",
    "@types/cryptr": "^4.0.1",
    "@types/dotenv": "^8.2.0",
    "@types/express": "^4.17.13",
    "@types/express-session": "^1.17.4",
    "@types/faker": "^5.5.8",
    "@types/formidable": "^1.2.5",
    "@types/helmet": "^4.0.0",
    "@types/hpp": "^0.2.1",
    "@types/jest": "^27.0.1",
    "@types/jsonwebtoken": "^8.5.4",
    "@types/mongoose": "^5.10.1",
    "@types/morgan": "^1.9.3",
    "@types/node": "^16.10.3",
    "@types/supertest": "^2.0.11",
    "@types/swagger-jsdoc": "^6.0.1",
    "@types/swagger-ui-express": "^4.1.3",
    "@types/uuid": "^8.3.1",
    "@types/winston": "^2.4.4",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "aws-sdk": "^2.1032.0",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.0.0",
    "node-config": "^0.0.2",
    "node-gyp": "^8.1.0",
    "nodemon": "^2.0.9",
    "prettier": "^2.3.2",
    "supertest": "^6.1.3",
    "tsconfig-paths": "^3.10.1",
    "tslib": "^2.3.1"
  }
}
 

And this is the schema that I want to match

import { model, Schema } from "mongoose";
import { mongoosePagination } from "ts-mongoose-pagination";
import mongooseFuzzySearching from "mongoose-fuzzy-searching";
import moment from "moment";

const storeSchema: Schema = new Schema(
  {
    name: { type: String, required: true },
    nameAr: { type: String, required: false },
    isMultiBranch: { type: Boolean, default: false },
    cuisines: [String],
    location: {
      type: {
        lat: {
          type: String,
          required: true
        },
        lng: {
          type: String,
          required: true
        }
      }
    },
    mainPhotoURL: { type: String, required: false },
    menu: { type: String },
    workingHours: [{
      weekday: String,
      openingTime: String,
      closingTime: String
    },{strict: true}],
    photos: { type: [String] },
    rank: { type: Number, default: 1, required: false },
    isFeatured: { type: Boolean, default: false },
    categories: ["Mixed"],
    details: { type: Schema.Types.Mixed, required: false },
    coladaRate: { type: Number, default: 0.1 },
    wallet: {
      balance: { type: Number, default: 0 },
      lastUpdated: { type: Date, default: Date.now() }
    },
    rating: { type: Number, default: 0 },
    qrCode: { type: String, required: false },
    description: { type: String, required: false },
    descriptionAr: { type: String, required: false },
    createdAt: { type: Date, default: moment() }
  },
  {
    // Mongo will create for us createdAt/updatedAt fields
    timestamps: true
  }
);
storeSchema.plugin(mongoosePagination);
storeSchema.plugin(mongooseFuzzySearching, { fields: ["name"] });
const storeModel: any = model("Store", storeSchema);

export default storeModel;

[MahmoudAli1]

@denolfe @pixelistik @klapec @sangallimarco
Can you please help me out here ?

[jmikrut]

Hey @MahmoudAli1 — so the IDs that are created in fields like arrays and blocks is used in a few places. It is used to maintain unique array row IDs in the frontend, and is also used to make sure that you can pass in partial values to array rows in update operations.

Payload is not designed to remove the id field within arrays. Can I ask how come you are trying to remove it?

I'm going to convert this to a discussion but we can keep the conversation going there!