fetch not getting the latest route response
Answered
Otterhound posted this in #help-forum
OtterhoundOP
export async function GET(){
await ConnectDb();
const result =await Blog.find({});
console.log(result);
return NextResponse.json({result})
}const getData = async()=>{
const res = await fetch('http://localhost:3000/api/blog')
const data = await res.json()
console.log(data)
return data
}{ message: 'Blogs fetched successfully', response: [] }Answered by not-milo.tsx
Firstly you can move the logic in your api route directly inside the
And then your issue here is that Next.js aggressively caches every fetch request you make. So unless you tell it otherwise, making the same fetch request twice will return you the first response's data both times.
You can control the caching behaviour in a few different ways and I suggest you read the docs on this. You'll find them here: https://nextjs.org/docs/app/building-your-application/caching#data-cache
getData function unless it needs to be used also from outside your app (from a mobile app maybe) since with React 18 and RSCs that's the recommended way of doing it.And then your issue here is that Next.js aggressively caches every fetch request you make. So unless you tell it otherwise, making the same fetch request twice will return you the first response's data both times.
You can control the caching behaviour in a few different ways and I suggest you read the docs on this. You'll find them here: https://nextjs.org/docs/app/building-your-application/caching#data-cache
10 Replies
Firstly you can move the logic in your api route directly inside the
And then your issue here is that Next.js aggressively caches every fetch request you make. So unless you tell it otherwise, making the same fetch request twice will return you the first response's data both times.
You can control the caching behaviour in a few different ways and I suggest you read the docs on this. You'll find them here: https://nextjs.org/docs/app/building-your-application/caching#data-cache
getData function unless it needs to be used also from outside your app (from a mobile app maybe) since with React 18 and RSCs that's the recommended way of doing it.And then your issue here is that Next.js aggressively caches every fetch request you make. So unless you tell it otherwise, making the same fetch request twice will return you the first response's data both times.
You can control the caching behaviour in a few different ways and I suggest you read the docs on this. You'll find them here: https://nextjs.org/docs/app/building-your-application/caching#data-cache
Answer
The reason why you can get the right data using Postman is that as far as I know it doesn't cache responses by default, so you're always going to see the latest data returned.
i forgot about caching but now its fetching the data perfectly
so this is the route
export async function GET(){
const {userId} = auth();
console.log(userId)
await ConnectDb();
const result =await Blog.find();
console.log(result);
return NextResponse.json({result})
}Yup
@Otterhound so can i use the same thing for post request also
Yes, you can use any one of the available HTTP verbs
@not-milo.tsx Yes, you can use any one of the available HTTP verbs
OtterhoundOP
hey so i did this
const data = await getData()
return (
<>
{data.map((item)=>{
return(
<div>
<h1>{item.title}</h1>
<p>{item.description}</p>
<img src={item.image} alt="image"/>
</div>
)
}
)}const getData = async ()=>{
const { userId } = auth();
console.log(userId);
await ConnectDb();
const result = await Blog.find();
console.log(result);
return NextResponse.json({ result });
}OtterhoundOP
sorry i forgot the result part so i got that
Nice 