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.