Articles not appearing as bookmarked in some cases

[JohnAllenTech]

Context

Please provide any relevant information about your setup

Expected Behavior

Post should appear as bookmarked without a refresh

Current Behavior

Post doesnt show as bookmarked with a refresh

Screenshots

e3e11a59-ffc3-401c-b122-1b1d85549a03.mp4

Steps to reproduce

Please provide detailed steps for reproducing the issue

1. Navigate to https://www.codu.co/articles
2. Click on an article
3. Click bookmark icon on the left side of the page
4. Navigate back to the articles page by clicking the link
5. Notice the bookmark is not present

Additional info

Provide any additional information here

[hrit2773]

@JohnAllenTech can you plz assign this issue to me? and also add hacktoberfest label to this

[John-Paul-Larkin]

I assigned you @hrit2773
Thanks.

[John-Paul-Larkin]

@hrit2773
Have you made any progress on this, or should I unassign you and make it available to someone else?

[hrit2773]

@John-Paul-Larkin Yes I'm still working on this is it ok if I make a PR by this week itself.

[hrit2773]

@John-Paul-Larkin I would like to share my progress and get the PR done by today if you approve. Actually what's happening is that as Next.js uses caching it always shows the previous loaded page when articles route is hit back. The bookmarked value is consistently updated in the database so no problems with the data. What we can do is we can always try to refetch the status of all articles when the articles page is mounted or even if the popstate event is made. That is the solution to this bug. Your thoughts?

[hrit2773]

I changed the cacheTime to 0 and its fetching all the articles again ensuring the changes are visible when the user visits the articles link back again. What do you think @John-Paul-Larkin @JohnAllenTech it was a small bug. Can I proceed with the PR

[github-actions]

Uh oh! @hrit2773, the image you shared is missing helpful alt text. Check #882 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @hrit2773, the image you shared is missing helpful alt text. Check #882 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[John-Paul-Larkin]

Hi @hrit2773
Although setting the cache time to 0 will work, I am sure there is a more efficient way to do this.
I think, instead, we can set the stale time to 0 and revalidate the query when the user returns to the page.
Im not sure of the implementation of this, but my hunch is that it is a problem with a well worn solution.

[JohnAllenTech]

invalidating the cache when an article is bookmarked seems like the way to go to me

[John-Paul-Larkin]

👌
That sounds right John thanks.
We can invalidate the query when the users bookmarks an article.

queryClient.invalidateQueries({ queryKey: ['bookmarks'] })

A query key should be added to the bookmarks query.

[hrit2773]

@JohnAllenTech yup nice Idea and it will be a better way. I'll make a pr by today and close it