Switching from @tanstack/vue-query to pinia-colada

[drahkrub]

Hi, I am using @tanstack/vue-query in a large SPA that contains a lot of form based editing. I have created a small demo project that shows (in a simplified form) how I use @tanstack/vue-query when it comes to form editing. Since I want to switch to pinia-colada, the demo project contains a page colada.vue, in which I try to use the same setup. It seems to work - until the content in the input field is changed (without clicking "save") and a different browser tab is visited. After returning to the tab with the running demo project the watcher unexpectedly fires and the content of the input field is reset - which isn't the case with @tanstack/vue-query. Hard to explain ;-), just try it. Maybe my setup is wrong, of course I am open for improvements! Here is the link to my demo project:

• https://github.com/drahkrub/github-r6asjrwd
• https://stackblitz.com/~/github.com/drahkrub/github-r6asjrwd

[posva]

The behavior you are seeing comes from structural sharing. This behavior makes sense with React because it re renders many more things by default than Vue. Because Pinia Colada only supports Vue, it doesn't implement this behavior out of the box. It can be achieved with a plugin or by changing the watcher to only trigger if the data changes. In your case, it can be achieved like this:

watch(
  () => JSON.stringify(data.value),
  (orgJson) => {
    ++counter.coladaWatch
    if (orgJson) {
      model.value = JSON.parse(orgJson)
    }
  },
  { immediate: true }
)

[drahkrub]

Ah, thank you very much for the explanation! I was already thinking something like that. In fact, “structural sharing” is only mentioned without much explanation in the useQuery doc in the vue version of tanstack-query.

I think it would be good if this difference is pointed out in Pinia Colada's cookbook.

And many thanks for the solution/workaround! Simple and effective. One step closer to switching to Pinia Colada, I think. :-)

[drahkrub]

small optimization: let the query function simply return JSON (fetch and axios can be used this way), this saves a parse and a stringify

[posva]

I added a section to the cookbook for this

[drahkrub]

watch(data, (newData, oldData) => {
  if (!isSameData(newData, oldData)) {
    // do something with the new data
  }
})

works absolutely, but is the approach you've mentioned (watch(() => JSON.stringify(data.value) ...)) not more efficient because the watcher less often fires? (when it comes to efficency regarding reactivity I'm often not sure...)

Ok, already send this comment, but I see, isSameData is of course more flexible...

[posva]

People are free to adapt ofc 😄