Prisma and Nextjs: content is not updating until re-deploy

Question

Here is the website that I just deployed on Vercel. I am building a web application using Prisma and Next.js, and I'm experiencing an issue where the content is not updating in real-time until I manually re-deploy the application. Here's the scenario:

• I have an API endpoint in my Next.js app that fetches data from a Prisma database.
• When I create or update data in the database through the application, the changes are reflected immediately in the development environment, but they are not reflected in the production environment until I re-deploy the application (I have ensured that this is not a caching issue).

This is how I get my data on the front-end:

const { data: posts, error } = useSWR(`/api/getPosts`, fetcher, {refreshInterval:1000});

This is the API endpoint to post the content :

// Addposts to prisma backend

import { NextResponse, NextRequest } from 'next/server';
import prisma from '../../../prisma/client';

// Function

export async function POST(request:NextRequest) {
    const data = await request.json();
    const title = data.title;
    const user = await prisma.user.findUnique({
        where: {
            email : data.email
        }
    })
    if (!user){
        // return error
        return NextResponse.json({error: "User not found"}, {status: 404})
    }

    if (!title){
        // throw error
        return NextResponse.json({error: "Title is required"}, {status: 400})
    }

    if (title.length > 300){
        return NextResponse.json({error:"Title should not be more than 300 characters"}, {status:400});
    }
    const userId = user?.id;

    const post = await prisma.post.create({
        data: {
            title,
            userId
        }
    })
    try{
        return NextResponse.json({post},{status:200})
    }catch(error){
        return NextResponse.json({error}, {status:500})
    }
}

API endpoint to get all the posts:

import { NextRequest, NextResponse } from 'next/server'
import prisma from '../../../prisma/client'
import { NextApiResponse } from 'next';


export async function GET(request:NextRequest){
    const posts = await prisma.Post.findMany({
        include: {
            user: true
        },
        orderBy:{
            createdAt: 'desc'
        }
    })
    try{
        // return all the posts
        return NextResponse.json({posts},{status:200})
    }catch(error){
        return NextResponse.json(error, {status:500});
    }
}

How can I ensure that the content updates are immediately reflected in the production environment without the need for manual re-deployment?

Here is the link to the GitHub repo.

UPDATE

I am able to make POST request and make changes to the db, I think the problem has to be with the GET request since the data appears to be static even when I refresh the page.

Here is my Runtime Logs on Vercel:

Answer 1

Ok, after days of debugging, this is what worked for me:

I moved my GET and POST function into a single route.ts file.

Before:

This is how I did my GET request: axios.get(url/api/getPosts) and my POST request axios.post(url/api/addPosts)

After:

This is how I did my GET request: axios.get(url/api/Posts) and my POST request axios.post(url/api/Posts)