search

logaretm / villus

🏎 A tiny and fast GraphQL client for Vue.js
https://villus.dev
MIT License
790 stars 31 forks source link

useSubscription return old value when router.push is used #187

Closed hipertracker closed 1 year ago

hipertracker commented 1 year ago

I have Vue2.7 with composition API, Vuetify 2 and Villus. This is SPA and I have a page content changed by the URL "id".

Step 1. I open the page1. It contains useSubscription and it returns correct data from GraphQL server. Step 2. I move to page2 with Vue router push method. This time subscription is returning the last data (from page 1) Step 3. I move to page3 with the same router push method. Now I can see the last data from page 2! The result is always one behind...

When I move between pages with hard page reload all works as excepted. When I do this with javascript and HTML Push method the graphql subscription always returns the data from the last call. I use policy: network-only.

Any hints?

hipertracker commented 1 year ago

This was not Villus's issue. I got the same error in the Apollo client. The solution was to add a "key" prop to the component (<MyComponen :key="id"/>) which forced Vue to re-render the component. There is a great article about it https://michaelnthiessen.com/force-re-render/