#Stale data on client-side navigation

82 messages · Page 1 of 1 (latest)

forest igloo
#

I have a main page which adds data to my database using a form and server actions. When I add a record and then navigate using a <Link> component to /history which just fetches and renders all the existing records (via await prisma.workday.findMany()) the data is stale and doesn't contain the newly added record. The data isn't stale after I refresh, but that's cumbersome. How can I fix this problem?

steep hawkBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
plucky gull
#

hard navigation only refresh their data after ~30 second on route change

forest igloo
plucky gull
#

if you don't spam for ~ 30 seconds they will refetch

#

but if you spam it they wont get refreshed haha

forest igloo
plucky gull
#

hmm das weird

#

how did you fetch the data?

#

using fetch() ?

forest igloo
# 
export default async function History() {
    const allWorktimes = await prisma.workday.findMany();
    ...
}
plucky gull
#

did you wait 30 second then move another route then back to the same route

#

or did you just wait 30 seconds and do nothing 🫠

forest igloo
#

I added data on my root page, I waited 30s and I navigated to /history using <Link />

plucky gull
#

hmmmm das weird, make sure you didn't hover it though since hovering it will prefetch the data ahead of time

mortal mica
#

where did you find out about this

plucky gull
mortal mica
#

to force hard navigation i just use native <a> tags now

#

or call revalidatePath + force-dynamic + prefetch={false}

forest igloo
#

I also call revalidatePath('/') on the end of my server action

#

and prefetch={false} doesn't do anything in dev right? only prod

#

I might try the <a> tag approach

mortal mica
plucky gull
#

atleast the RSC is prerendered again, and awaits are awaited again, not sure about the data

forest igloo
#

Ok I'll try it one more time, but I think waiting 30s also just worked, but that's still not a good solution to me

mortal mica
#

30 seconds is such a random number so idt that is the case

#

without specialised configuration

plucky gull
plucky gull
forest igloo
forest igloo
plucky gull
#

use all of them mwa ha ha ha

steep hawkBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1119620757425762314 message)

mortal mica
#

if you dont use force-dynamic how is it dynamic

forest igloo
#

I have no clue man

mortal mica
#

probably you used headers() or cookies() somewhere

forest igloo
#

no

mortal mica
#

💀

forest igloo
# 
import prisma from '$lib/db/prisma';
import { formatWorktime, round } from '$lib/utils';

export default async function History() {
    const allWorktimes = await prisma.workday.findMany();
    const dateFormatter = Intl.DateTimeFormat('en-UK', { dateStyle: 'long' });
    return (
        <ol className="worktime-list">
            {allWorktimes.map(worktime => (
                <li key={worktime.id}>
                    <h2>{dateFormatter.format(new Date(worktime.date))}</h2>
                    <p>Worktime: {formatWorktime(worktime.worktime)}</p>
                    <p>Earned: {round(worktime.earned, 2)}zł</p>
                </li>
            ))}
        </ol>
    );
}
mortal mica
#

well if it works it works

forest igloo
#

this is my entire page.tsx

mortal mica
#

probably an upper layout.tsx is dynamic

#

idk

plucky gull
#

that is likely the case

forest igloo
#

no I only have one layout.tsx

mortal mica
#

oh wait, if you did call revalidatePath probably that means the thing is revalidated

#

so no need of dynamic

#

hmm interesting

#

i think i have some code changes to do in my apps

plucky gull
#

where did you put revalidatePath?

plucky gull
forest igloo
# 
export default async function Home() {
    async function addWorkday(data: FormData) {
        'use server';

        // ...

        revalidatePath('/');
    }
// ...
}
#

here

plucky gull
#

yeah ive done that too

mortal mica
plucky gull
#

i thought you put it in server comps hah

mortal mica
#

well nextjs works in some magical way no one knows why again

#

glad it worked for you

plucky gull
mortal mica
#

since mutation is released i can no longer claim i know how nextjs works anymore

mortal mica
#

ah no, i don't redirect after server actions

#

but i do revalidate all pages

#

and after that if i use next/link prefetch=false to navigate to any pages

#

it shows updated data

forest igloo
#

what's the point of force-dynamic does it even work correctly

#

ok wait tf is it actually mandatory to wait that 30 or smthn seconds because I did that again out of curiosity and it worked

plucky gull
#

💀 umm

mortal mica
#

just next.js working in some black magic man, this is beyond humanity comprehension

forest igloo
#

this is obviously not my ideal solution I'm going back to the revalidatePath one, but it's interesting

plucky gull
#

make sure you also erase .next folder to be sure that it don't cache anything every time you change the dynamic/static of a route (?)

forest igloo
#

that's next level 💀

plucky gull
#

nextjs level? noice

forest igloo
#

exactly