Next.js Discord

Discord Forum

revalidatePath not working.

Unanswered
Southern Martin posted this in #help-forum
Open in Discord
Southern MartinOP
I have this code:
export async function favoriteList(list_id: string) {
  await sql`INSERT INTO favorites (list_id)
      VALUES (${list_id})`
  revalidatePath('/notebook');
}

export async function unFavoriteList(list_id: string) {
  await sql`DELETE FROM favorites WHERE list_id = ${list_id}`
  revalidatePath('/notebook');
}

I call these functions in my client component like so:
export default function FavIcon({ isFavorited, list_id }: { isFavorited: boolean, list_id: string }) {
  const [isFav, setIsFav] = useState(isFavorited);
  const favoriteListWithId = favoriteList.bind(null, list_id);
  const unFavoriteListWithId = unFavoriteList.bind(null, list_id);
return (
    <>
      {isFav ? (
        <form action={unFavoriteListWithId}>
          <IconButton type="submit">
            <FavoriteIcon sx={{ color: '#ED9121' }} />
          </IconButton>
        </form>) :
        (<form action={favoriteListWithId}>
          <IconButton type="submit">
            <FavoriteBorderOutlined sx={{ color: '#ED9121' }} />
          </IconButton>
        </form>)
      }
    </>
  );
}


but /notebook does not reload. I do not get why because I called revalidatePath('/notebook').

18 Replies

it just mutates all cached ssr data for that route
aswell as triggers any suspense
Southern MartinOP
Yes, but it does not fetch the new data when I click on the icons in my code.
@Southern Martin Yes, but it does not fetch the new data when I click on the icons in my code.
gin
is the data u want to fetch passed down from a ssr component?
or do u have it in a clientside state somewhere
i already see the issue
u need to trigger the mutation on the clientside since u dont use the passed down prop. Have a useEffect check for the propchange and set the new value
data in this case is your prop
Southern MartinOP
the icons are client-side compnents and they are nested in a server side component.
@Southern Martin the icons are client-side compnents and they are nested in a server side component.
gin
useEffect(() => {
        if (isFavorited) {
            setIsFav(isFavorited);
        }
    }, [isFavorited]);
Southern MartinOP
but like the revalidatePath works for other icons like for deleting, and updating
and they are client compoenents as well
so I do not get why for this particular case it doesn't work
@Southern Martin so I do not get why for this particular case it doesn't work
gin
cause i told u it mutates the cached ssr data not the clientside data
and useState is clientside
@gin typescript useEffect(() => { if (isFavorited) { setIsFav(isFavorited); } }, [isFavorited]);
Southern MartinOP
I'll add this code, thank you
@Southern Martin I'll add this code, thank you
gin
nice, if that works for u make sure to answer it as solution for ur problem