Mongodb api returning outdated data in next js application when in production mode

Working with Data Node.js Frameworks
, , ,
1

Hello community,
I’m developing an web app and found a bottleneck in my app related to api calls today.

I’m retrieving my app data from mongodb server through find() operation in next js app and found that it works perfectly fine when run in development mode but when I deployed my application and tried to retrieve data through https:// promptopia-theta-swart.vercel.app/api/prompt , its returning outdated data each and every time and I had searched all over internet but can’t find any suitable answers for that.

please help me out!

whole code: GitHub - meetgovindbajaj/Promptopia: Promptopia is an open-source AI prompting tool for modern world to discover create and share creative prompts.

env variables you have to setup are for :
->GOOGLE_ID
->GOOGLE_SECRET
->MONGODB_URI
->NEXTAUTH_URL
->NEXTAUTH_URL_INTERNAL
->NEXTAUTH_SECRET
in .env file

steps to get these are:

  1. google cloud console project at https://cloud.google.com/ .
    → setup new project
    → create oauth consent screen
    → put http:// localhost:3000 in oauth url
    → create credentials
    → add http:// localhost:3000 to “Authorised JavaScript origins”
    → add http:// localhost:3000 and http:// localhost:3000/api/auth/callback/google to “Authorised redirect URIs”
    → copy [ GOOGLE_ID, GOOGLE_SECRET] named in website as client id and client secret
  2. mongodb database uri [MONGODB_URI]
    → mongodb+srv://username:password@(database name).mongodb.net/?retryWrites=true&w=majority
    → or get it from mongodb site via connect → drivers → nodejs
  3. next auth →
    a. NEXTAUTH_URL = http:// localhost:3000
    b. NEXTAUTH_URL_INTERNAL = http:// localhost:3000
    c. NEXTAUTH_SECRET = anything you want to put without spaces

if you set it up …you will find no issue in development phase i.e. while you are running it in localhost …when you host it on vercel (its perfect hosting platform for next js apps and really easy to upload and running in no time) then you will notice the issue here

the big one is showing 2 prompts in database
and the one in middle showing only 1 single prompt in website

img
img1920×1920 103 KB

i have tried creating several prompts … but to no effect… it fetches updated data in localhost and outdated data in website : https:// promptopia-theta-swart.vercel.app/api/prompt

notice:
if you decide to host it on vercel just follow these steps:
→ upload your project on github
→ login with same github account in vercel
→ create new app
→ select repo
→ set env variables manually (scroll down a bit and you will find the place to add them)
→ deploy
→ go to google cloud console and add your web app link in credentials → Authorised JavaScript origins and Authorised redirect URIs with same follow ups ahead of them as localhost (this step is required for google login)
→ update nextauth with new link in your env variables as well

and at last please find the solution to this issue… its so annoying :rage:

1 Like
2

hello … i think that i found where the problem lies but still have 0 success rate of solving it .

my api route /api/prompt is being treated as ISR ( Incremental static regeneration) which keeps page static instead of dynamic

and the solution to this is via revalidating …but its not working either … :tired_face:

image
image1920×1080 200 KB

1 Like
3

I am having the same problem. Did you find a solution for this

4

I am also having this problem.

My app runs flawlessly on localhost. Adding, deleting, and updating the database is immediately updated on the page automatically.

When I run on Vercel, it builds just fine and the connection to MongoDB atlas is good but I am not able to interact with the data.

If I try to create a new document or delete it, nothing happens. If I delete from localhost, it seems there is a delay of several hours until the hosted Vercel version removes the data.

1 Like
5

did you find any solution yet?

6

I was able to fix the problem, this is not a Mongodb problem, the problem lies in the part that vercel takes the route ‘/api/prompt’ inside ISR which doesn’t update always. Our goal should be to move it out of ISR, for that we can add a ‘revalidate=0’ inside the ‘/api/prompt/route.js’ file in the following way:-

import Prompt from "@models/prompt";

import { connectToDB } from "@utils/database";

export const revalidate = 0; // this is the new line added

export const GET = async (req) => { ... }

This solved the problem for me, hope it solves yours problem too.
This is my github repo for any help:- GitHub - subhajit100/promptify_prompt_library

1 Like
7

Thank you! I was having this issue too, no idea what it was!

8

hey thank you so much… just wanna ask how you resolved this, like what particular resources u looked into to resolve this issue…

9

Thank you so much! This solved my problem.