Trying to Update a value in mongodb by using react and nodeJS

Viewed 23

I am trying to update a document in mongodb using react as my client and nodeJS expressJS as backend. but the patch request doesn't seen to work, i tried it in postman but it give the following error : Cannot PATCH /api/transfer;

This is my component form which i am making a request to my backend

import './styles/transferPage.css'
import useFetch from './usefetch';
import { useParams, } from "react-router-dom";
import { useState } from 'react';


const TransferPage = () => {
    const [amount, setAmount] = useState(0)


    const { id } = useParams()
    
    const [url, setUrl] = useState(`/api/all/${id}`)
    
    

    const transferMoney = (e) => {
        e.preventDefault()
        const senderId = localStorage.getItem('senderId');
        const receId = id;

        setUrl(`/api/transfer/${senderId}/${receId}/${amount}`)
    }

    const { data, error } = useFetch(url);
    console.log(id)


    return ( 
        <>
              { error && <div>{error}</div>}
            {data && <div className="detailAbout">
                <p>Customer Name: <span>{data.customerName}</span></p>
                <div className="card">
                      <form onSubmit={transferMoney}>
                <label htmlFor="amount">
                    Amount (in INR):
                    
                </label>
                <input onChange={(e)=>{setAmount(e.target.value)}} type="number" id="amount" name="amount" required />
                <Link></Link><input type="submit" value="Submit" />
            </form>
                </div>
          
            </div>}
        </>
       
    );
}
 
export default TransferPage;

And this is my useFetch custom hook:

import { useState, useEffect } from 'react';


const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);
    const [total, setTotal] = useState(0)

    useEffect(() => {
        const fetchData = async () => {
            const abortCont = new AbortController();
            setIsLoading(true)

        try {
            const response = await fetch(url)
            if (!response.ok) {
                throw Error('could not fetch the data for that resource')
            }
            const data = await response.json();
                if (data.length === 0) {
                    setData(null)
                    throw Error('no anime available');
                    
                }
                setData(data)
                setTotal(data.length)
                setIsLoading(false)
                setError(null)
            
        }
        catch(err){
            if (err.name === 'AbortError') {
                console.log('Fetch Aborted')
            }
            setIsLoading(false)
            setError(err.message)
            setData(null)
        }
        return () => abortCont.abort()
        }
        fetchData()
            
    },[url])
    return {data,isLoading,error,total}
}
 
export default useFetch;

This is the patch request i am making:

app.get('/api/transfer/:senderId/:receId/:amount', (req, res) => {
    const senderId = req.params.senderId;
    const receId = req.params.receId;
    const amountToSend = req.params.amount;

    const o_id = new ObjectId(receId)
     db.collection('Customers')
         .updateOne({ _id: o_id }, {
             $set : {transferdMoney: amountToSend}
         })
         .then((result) => { 
            console.log(result) 
            res.send(result)
        })
        .catch((err) => {
            console.log(err)
        })
            
})

Now,here i am getting all three of my params in server side, but can't make the patch request. I am thinking of using axios in the component in onSubmit function, but still want to know where am i going wrong.

0 Answers
Related