Next.js Discord

Discord Forum

Trouble understanding how cache works

Answered
Jersey Wooly posted this in #help-forum
Open in Discord
Jersey WoolyOP
Hello. I'm having trouble with fetching my new data. I have a notes system, where you can upload and read all the notes. This is how I get the notes:

// more code
const response = await fetch(`/api/notes/get-all-notes`, { cache: 'no-store', next: { revalidate: 0 }});
                const data = await response.json();
                console.log(data);
                setNotes(data[0]);
// more code


However, /api/notes/get-all-notes doesn't get the new created notes until I explicitly go to localhost:3000/api/notes/get-all-notes and press CTRL + F5 to fully reload the page (then everything fetches data as intended).


Things that i've tried:
// On my component
const res = await fetch('my/api', { cache: 'no-store' });
const res = await fetch('my/api', { cache: 'no-cache' });
const res = await fetch('my/api', { next: { revalidate: 0 });
const res = await fetch('my/api', { cache: 'no-store', next: { revalidate: 0 });
const res = await fetch('my/api', { cache: 'no-cache', next: { revalidate: 0 });

// On the api route.tsx
return NextResponse.json([result.rows], {
      status: 200,
      headers: { 'Cache-Control': 'no-store, must-revalidate' },
    });


On my understanding, using those settings should clear the cahed notes, but didn't. Any ideas would be appreciated
Answered by Jersey Wooly
Just add export const dynamic = 'force-dynamic'; before the GET function :thinq:
View full answer

2 Replies

Jersey WoolyOP
Forgot to mention, I use vercel postgres database and this is my get-all-notes route.tsx:
import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';

export async function GET(request:  Request) {
    try {
        const result = await sql`SELECT * FROM notes;`
        return NextResponse.json([ result.rows ], { status: 200  });
    } catch (err) {
        console.error(err);
        return NextResponse.json({ err }, { status: 500 });
    }
}
Jersey WoolyOP
Just add export const dynamic = 'force-dynamic'; before the GET function :thinq:
Answer