Next.js Discord

Discord Forum

Data Fetching from MongoDB

Answered
readme posted this in #help-forum
Open in Discord
readmeOP
Im using Next.js 14.0.3 for my full stack project where in im using the next hs in built api for data fetching from my MongoDB database. In development when I perform a crud operation ii get redirected to the Home Screen and I see the new entry right away. But in production when I perform a crud operation the database gets updated but I cannot see the data on the home page. I’ll provide the link to my website and GitHub.
GitHub: https://github.com/acesFatee/promptify
Link: https://promptify-olive.vercel.app
Answered by Ray
please mark solution if you have fixed your issue
View full answer

64 Replies

Ray
it is because the endpoint /api/prompt/get is static
try set it dynamic by export const dynamic = "force-dynamic" in the route.ts file
there is a report after you run next build. You should see that route is static generated
readmeOP
This is what i got when i build it without adding the dynamic const. As you can see the api/prompt/get is dynamic
import { connectToMongo } from "@/utils/db";
import Prompt from "@/utils/models/PromptModel";

export const GET = async (req, res) => {
  try {
    await connectToMongo();
    const allPrompts = await Prompt.find().populate('creator')

    return new Response(JSON.stringify(allPrompts), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch prompts", { status: 500 });
  }
};
and this is my route.js @Ray
Ray
ok which page of data is not getting updated?
readmeOP
just the home page. I can see the new data on my profile or when i click the tag. but i does not update on the home page
Ray
the home page is static generated
either make it dynamic or ISR
readmeOP
this is pretty much the home page
Ray
oh wait, you doing client side fetching on home page right?
readmeOP
yes
Ray
how do you update the data? by /api/prompt/new endpoint?
readmeOP
by the /api/prompt/update endpoint
i have it setup
import { connectToMongo } from "@/utils/db";
import Prompt from "@/utils/models/PromptModel";

export const PATCH = async (req, { params }) => {
    const { prompt, tag } = await req.json();
    try {
        await connectToMongo();

        const editedNote = await Prompt.findByIdAndUpdate(params.id,{
            prompt: prompt,
            tag: tag
        })

        return new Response(JSON.stringify({editedNote}), { status: 200 });
    } catch (error) {
        return new Response("Error Updating Prompt", { status: 500 });
    }
};
so /api/prompt/update/[id]/
Ray
import { connectToMongo } from "@/utils/db";
import Prompt from "@/utils/models/PromptModel";

export const PATCH = async (req, { params }) => {
    const { prompt, tag } = await req.json();
    try {
        await connectToMongo();

        const editedNote = await Prompt.findByIdAndUpdate(params.id,{
            prompt: prompt,
            tag: tag
        })
        revalidatePath("/api/prompt/get")
        return new Response(JSON.stringify({editedNote}), { status: 200 });
    } catch (error) {
        return new Response("Error Updating Prompt", { status: 500 });
    }
};
can you try add revalidatePath("/api/prompt/get")?
to /api/prompt/update
readmeOP
ok so when i make this change am i supposed to redeploy the app or it will automatically update on the commit
Ray
need redeploy
readmeOP
ok ill test this in dev and then redeploy
Ray
if you connected the project to vercel, it should automatic redeploy on vercel when you commit the change on github
you can test it on local by next build & next start
readmeOP
alright
so it gives me an error when i revalidate the api route. Should i instead revalidate the / route because that's the one that is rendering?
Ray
oh well
ok remove it and try put export const dynamic = "force-dynamic" to app/api/prompt/get/route.ts
readmeOP
alright
import { connectToMongo } from "@/utils/db";
import Prompt from "@/utils/models/PromptModel";
export const dynamic = "force-dynamic"

export const GET = async (req, res) => {
  try {
    await connectToMongo();
    const allPrompts = await Prompt.find().populate('creator')

    return new Response(JSON.stringify(allPrompts), { status: 200 });
  } catch (error) {
    return new Response("Failed to fetch prompts", { status: 500 });
  }
};
like this>
?
Ray
yes
readmeOP
ok
Ray
I think it works now?
https://promptify-olive.vercel.app/api/prompt/get is not cached anymore
readmeOP
thank you bro it worked
ill test it a couple of times and let you know if there are any bugs
thats the new link
Ray
check all api route
readmeOP
yes on it
Ray
hmm get only
readmeOP
yes all the crud functionalities work
Ray
check the header, if it return X-Vercel-Cache: HIT which mean it is static generated
https://promptify-olive.vercel.app/api/prompt/get this was return HIT
readmeOP
where do you check that
Ray
dev console
network tab
readmeOP
i got this
Ray
yea this fine
readmeOP
alright thank bro
Ray
if you remove export const dynamic = "force-dynamic", it should be HIT
you can try it
readmeOP
but then why was it working fine in development
it didnt have export const dynamic = 'force-dynamic' in dev
Ray
because it will only be generated the page when you build it
all are dynamic in development
readmeOP
understood
readmeOP
thank you
Ray
np 😀
Ray
please mark solution if you have fixed your issue
Answer