Issue with Next.js, Redux Toolkit, and RTK Query: Data Inconsistency on Post Likes 🤔
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
Hey Next.js community,
I've been working on a project using Next.js 13, Redux Toolkit, and RTK Query, and I've run into a bit of a puzzling issue that I'd like to discuss. 🤯
Here's the scenario: I'm fetching a list of posts from an API using fetch() and storing them in the Redux state. I'm making sure to set { cache: "no-cache" } to prevent caching issues.
Now, let's say I have a post, let's call it "post-1," and it's initially unliked. To handle post likes, I'm using an RTK Query to call the "like-post" API, which updates the post's like status in the Redux state. So far, so good.
The problem arises when I navigate to another page and then return to the original page with "post-1." I notice that the post is back to being unliked! 😡
It seems that the page router isn't calling the updated data when I revisit the page, or at the very least, it's not revalidating the API data or clearing the cache for the list of posts API.
I've tried to troubleshoot this issue, but I'm hitting a wall here. Has anyone else encountered a similar problem?
I'd love to hear your thoughts and any potential solutions or workarounds. Let's help each other out and make our Next.js apps even better! 🚀
I've been working on a project using Next.js 13, Redux Toolkit, and RTK Query, and I've run into a bit of a puzzling issue that I'd like to discuss. 🤯
Here's the scenario: I'm fetching a list of posts from an API using fetch() and storing them in the Redux state. I'm making sure to set { cache: "no-cache" } to prevent caching issues.
Now, let's say I have a post, let's call it "post-1," and it's initially unliked. To handle post likes, I'm using an RTK Query to call the "like-post" API, which updates the post's like status in the Redux state. So far, so good.
The problem arises when I navigate to another page and then return to the original page with "post-1." I notice that the post is back to being unliked! 😡
It seems that the page router isn't calling the updated data when I revisit the page, or at the very least, it's not revalidating the API data or clearing the cache for the list of posts API.
I've tried to troubleshoot this issue, but I'm hitting a wall here. Has anyone else encountered a similar problem?
I'd love to hear your thoughts and any potential solutions or workarounds. Let's help each other out and make our Next.js apps even better! 🚀
27 Replies
dank()
you mean the state is not persisting
Sloth bearOP
Yes
Even the getPost() function is not calling evrytime when we jump from another page. Is there any way where we can atleast tell next js 13 to clear the cache for particular path on some RTK query executed ?
I want to call get post api everytime using fetch() when user visit the post page
dank()
@Sloth bear have you tried useEffect
the state doesn't persist, it seems like RTK is not ideal for next.js, I'm using it rn without persisting the state
idk how long can I go like that
Sloth bearOP
But without state how can i manage like counts and all dynamically ?
My UI for cards looks something like this
dank()
I'm not sure, what makes you wanna use nextjs?
Sloth bearOP
SEO and serer side rendering. That was my main concern
dank()
let me know what you come up with
I'm kinda stuck here with rtk too
Sloth bearOP
Yes, If I find any solution. I'll let you know here
European sprat
You're experiencing the client side router cache
You can use router.refresh() in client components to clear the cache
As for state, you don't really need to use redux if you can just get the values from the db
Sloth bearOP
@European sprat do you mean, whenever I perform a client side RTK call and state update, I should use
router.refresh() on query success ?The requirement for redux state here is to maintain the like, comment or any client side operation smoothly.
European sprat
yeah that is one option
Sloth bearOP
Do you know any other solution so page won't get flicker ?
European sprat
yeah don't use redux and figure out how to make it work by fetching the data in server components then use react-query or SWR to keep the client side state in sync with the changes made in db
dank()
found this, He managed to persist the state on navigation.
this is the demo I just deployed
I don't understand how his navigation is not triggering a page refresh