React…const castError = new CastError(); …edit action signs me out (condition I set when there is an error)

Issue

My database is connected, I am able to authenticate and log in, render the current stored list, when I click on edit one of them I get this error:

const castError = new CastError();
[1]                     ^
[1] 
[1] CastError: Cast to ObjectId failed for value ":id" (type string) at path "_id" for model "Coffee"

Then I get signed out. Nothing gets saved and the connection to the database drops.

this is my coffeeRoutes.ts:

const router = Router();

router.get('/', getAllCoffee);
router.get('/:id', getOneCoffee);
router.post('/', addCoffee);
router.put('/:id', editCoffee);
router.delete('/:id', deleteCoffee);

export default router;

This is coffee.ts:

import { Document, Schema, Model, model } from 'mongoose';

interface ICoffee extends Document {
    name: string;
    description: string;
    price: number;
}

const coffeeSchema: Schema = new Schema({
    name: {
        type: String,
        required: true,
        unique: true
    },
    description: {
        type: String,
        required: true
    },
    price: {
        type: Number,
        required: true
    }
});

const Coffee: Model<ICoffee> = model<ICoffee>('Coffee', coffeeSchema);

export { ICoffee, Coffee };

coffeeController.ts:

export const getAllCoffee: RequestHandler = async (req, res, next) => {
    let coffeeList = await Coffee.find();
    res.status(200).json(coffeeList);
}

export const getOneCoffee: RequestHandler = async (req, res, next) => {
    let itemId = req.params.id;
    let coffee = await Coffee.findById(itemId);
    res.status(200).json(coffee);
}

export const addCoffee: RequestHandler = async (req, res, next) => {
    let user: IUser | null = await verifyUser(req);

    if (!user) {
        return res.status(403).send();
    }

    const newCoffee: ICoffee = new Coffee({
        name: req.body.name,
        description: req.body.description,
        price: req.body.price
    });

    try {
        await newCoffee.save();
        res.status(201).json(newCoffee);
    }
    catch (err) {
        res.status(500).send(err);
    }
}

export const editCoffee: RequestHandler = async (req, res, next) => {
    let user: IUser | null = await verifyUser(req);

    if (!user) {
        return res.status(403).send();
    }

    let itemId = req.params.id;
    const updatedCoffee: ICoffee = new Coffee({
        _id: itemId,
        name: req.body.name,
        description: req.body.description,
        price: req.body.price
    });

    await Coffee.findByIdAndUpdate(itemId, { $set: updatedCoffee })

    res.status(200).json(updatedCoffee);
}

export const deleteCoffee: RequestHandler = async (req, res, next) => {
    let user: IUser | null = await verifyUser(req);

    if (!user) {
        return res.status(403).send();
    }

    let itemId = req.params.id;
    let result = await Coffee.findByIdAndDelete(itemId);
    res.status(200).json(result);
}

App.ts:

const connectionString: string = 'mongodb://localhost:27017/testDB'
mongoose.connect(connectionString).then(
    () => console.log('database connection successful!'), 
    err => console.log('Error connecting to the database', err));

const app = express();

app.use(morgan('dev'));

app.use(express.json());
app.use(express.urlencoded({extended: true}));

const cors = require('cors');
const corsOptions = {
    origin: [ 'http://localhost:3001' ]
};
app.use(cors(corsOptions));

// routes
app.use('/api/coffee', coffeeRoutes);
app.use('/api/users', userRoutes);

app.use((req: Request, res: Response, next: NextFunction) => {
    res.status(404).end();
});

app.listen(3000);

I appreciate any help! I’ve been playing with this for a few hours now, I’m newbie with fullstack so I can’t understand what is happening.

This is what I get in my terminal:

[1] OPTIONS /api/coffee/:id 204 0.696 ms - 0
[1] {
[1]   host: 'localhost:3000',
[1]   connection: 'keep-alive',
[1]   'content-length': '424',
[1]   accept: 'application/json, text/plain, */*',
[1]   authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MzE2YzBiNjQyMjYyNDM1YzdiYWZhOTgiLCJpYXQiOjE2NjI1MjE5NjksImV4cCI6MTY2MjUyNTU2OX0.fAusx0ov8IjLA10YXZqL-OljrtShkUjMIA7SveC357k',
[1]   'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36',
[1]   'content-type': 'application/x-www-form-urlencoded',
[1]   'sec-gpc': '1',
[1]   origin: 'http://localhost:3001',
[1]   'sec-fetch-site': 'same-site',
[1]   'sec-fetch-mode': 'cors',
[1]   'sec-fetch-dest': 'empty',
[1]   referer: 'http://localhost:3001/',
[1]   'accept-encoding': 'gzip, deflate, br',
[1]   'accept-language': 'en-US,en;q=0.9'
[1] }
[1] /home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4884
[1]   const castError = new CastError();
[1]                     ^
[1] 
[1] CastError: Cast to ObjectId failed for value ":id" (type string) at path "_id" for model "Coffee"
[1]     at model.Query.exec (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4884:21)
[1]     at Query.then (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4983:15)
[1]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[1]   messageFormat: undefined,
[1]   stringValue: '":id"',
[1]   kind: 'ObjectId',
[1]   value: ':id',
[1]   path: '_id',
[1]   reason: BSONTypeError: Argument passed in must be a string of 12 bytes or a string of 24 hex characters or an integer
[1]       at new BSONTypeError (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/bson/lib/error.js:41:28)
[1]       at new ObjectId (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/bson/lib/objectid.js:67:23)
[1]       at castObjectId (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/cast/objectid.js:25:12)
[1]       at ObjectId.cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schema/objectid.js:246:12)
[1]       at SchemaType.applySetters (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1201:12)
[1]       at SchemaType._castForQuery (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1648:15)
[1]       at SchemaType.castForQuery (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1636:15)
[1]       at SchemaType.castForQueryWrapper (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1612:20)
[1]       at cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/cast.js:347:32)
[1]       at Query.cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:5312:12),
[1]   valueType: 'string'
[1] }

This is my editCoffee.js:

import React, { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';

export const EditCoffee = () => {
    const [coffee, setCoffee] = useState({
        name: "",
        description: "",
        price: ""
    });

    let params = useParams();

    // let { editCoffee } = useContext(CoffeeProvider);

    function editCoffee(coffee, id) {
        let token = localStorage.getItem('myCoffeeToken')
        let headers = {
            Authorization: 'Bearer '  + token
        };
        return axios.put(baseUrl + id, coffee, { headers })
            .then(response => {
                getAllCoffee();
                return new Promise(resolve => resolve(response.data));
            }
        );
    }

    function getAllCoffee() {
        return axios.get(baseUrl).then(response => setCoffee(response.data))
    };

    const baseUrl = "http://localhost:3000/api/coffee/";

    let navigate = useNavigate();

    function handleChange(event) {
        setCoffee((prevValue) => {
            return { ...prevValue, [event.target.name]: event.target.value }
        });
    }

    function handleSubmit(event) {
        event.preventDefault();
        editCoffee(editCoffee, params.id).then(() => {
            navigate(`/coffee`);
        }).catch(error => {
            console.log(error);
            navigate(`/signin`);
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <h1>EDIT COFFEE</h1>
            <span>Coffee Name  </span>
            <input placeholder="Enter coffee name" type="text" name="name" value={coffee.name} onChange={handleChange} />
            <br></br><br></br>
            <span>Description  </span>
            <input placeholder="Enter description" type="text" name="description" value={coffee.description} onChange={handleChange} />
            <br></br><br></br>
            <span>Price  </span>
            <input placeholder="Enter price" type="number" name="price" value={coffee.price} onChange={handleChange} />
            <br></br><br></br>
            <button type='submit'>Edit Coffee</button>
        </form>
    )
};

This is the page that takes me to editCoffee:

import React from 'react';
import CoffeeContext from '../contexts/CoffeeContext';
import { Link } from "react-router-dom";


function CoffeeList(props) {

    return (
        <CoffeeContext.Consumer>
        {
            ({ coffee }) => {
                return <div>
                    <h1>Coffee List</h1>
                    <Link to="/coffee/new">Add New Coffee</Link>
                    <div>
                        {coffee.map((c) => {
                            return (
                                <div key={c.id}>
                                    <h2>{c.name} | ${c.price}</h2>
                                    <p>{c.description}</p>
                                    <Link to={`/edit/${c.id}`}>
                                    <button>Edit</button>
                                    </Link>
                                    {/* <a href="/edit/id"><button>Edit</button></a> */}
                                    <button>Delete</button>
                                </div>
                            )
                        })}
                    </div>
                </div>
            }
        }
        </CoffeeContext.Consumer>
    );
}


export default CoffeeList;

Solution

Your problem is here…

const updatedCoffee: ICoffee = new Coffee({
  _id: itemId,

You’re trying to manually set the _id property (a MondoDB ObjectId) from a string. This won’t ever work. It’s also unnecessary to create a new model object when you’re updating an existing one.

Try this instead

// just a plain object
const updatedCoffee = {
  name: req.body.name,
  description: req.body.description,
  price: req.body.price,
};

res.json(
  await Coffee.findByIdAndUpdate(itemId, updatedCoffee, {
    returnDocument: "after",
  })
);

On the front-end, you need to link to the edit route with the model _id property. So instead of this

<a href="/edit/id"><button>Edit</button></a>

you should be using something like

<div>
  {coffee.map((c) => (
    <div key={c._id}>
      <h2>
        {c.name} | ${c.price}
      </h2>
      <p>{c.description}</p>
      <Link to={`/edit/${c._id}`}>
        <button>Edit</button>
      </Link>
      <button>Delete</button>
    </div>
  ))}
</div>;

Answered By – Phil

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published