What could be causing the error message "GET http://localhost:3000/api/db/getRideTypes 404 (Not Found)" when attempting to fetch data from the sanity client?
Here is a snippet of code from Rideselector.js:
//"use client";
import Image from 'next/image'
import ethLogo from '../assets/eth-logo.png'
import { useEffect, useState } from 'react'
const style = {
wrapper: `h-full flex flex-col`,
title: `text-gray-500 text-center text-xs py-2 border-b`,
carList: `flex flex-col flex-1 overflow-scroll`,
car: `flex p-3 m-2 items-center border-2 border-white`,
selectedCar: `border-2 border-black flex p-3 m-2 items-center`,
carImage: `h-14`,
carDetails: `ml-2 flex-1`,
service: `font-medium`,
time: `text-xs text-blue-500`,
priceContainer: `flex items-center`,
price: `mr-[-0.8rem]`,
}
const basePrice = 15530
const RideSelector = () => {
const [carList, setCarList] = useState([])
useEffect(() => {
;(async () => {
try {
const response = await fetch('api/db/getRideTypes')
const data = await response.json()
setCarList(data.data)
} catch (error) {
console.error(error)
}
})()
}, [])
The getRideTypes.js file contains the following code:
import { client } from "../../../../../lib/sanity"
const query = `
*[_type=="rides"]{
"service": title,
"iconUrl": icon.asset->url,
priceMultiplier,
orderById
}|order(orderById asc)
`
const getRideTypes = async (req, res) => {
try {
const sanityResponse = await client.fetch(query)
console.log(sanityResponse)
res.status(200).send({ message: 'success', data: sanityResponse })
} catch (error) {
res.status(500).send({ message: 'error', data: error.message })
}
}
export default getRideTypes
The getRideTypes.js file is located in the api folder at src/app/pages/api/db/getRideTypes.js. The RideSelector.js is within the components folder which is also at the root directory along with the src folder.