[Bug] query invalidation and a simultaneous cache key change lead to inconsistent state

[tobiasdcl]

Hey there,
first of all awesome work - thank you! ❤️

We recently migrated from @tanstack/vue-query to @pinia/colada. Initially everything looked great but we got some strange errors that were initially hard to reproduce.
After a long time I was able to track down the issue, which originates from a query invalidation and a simultaneous cache key change that leads to the data beeing briefly undefined despite using placeholderData
I tried to understand why this was happening to submit a PR but was unable to fully grasp the root cause.

I put together a minimal reproduction sample with some comments.
Execution environment was a nuxt application (probably not relevant, just wanted to mention it) - "@pinia/colada": "0.13.2"

<template>
  <div>
    <button type="button" @click="clickHandler">Click me</button>
    <br />
    queryKey: {{ queryKey }}
    <br />
    data: {{ data }}
  </div>
</template>

<script setup lang="ts">
const queryKey = ref(1);

const queryCache = useQueryCache();

/**
 * `data` should always be defined and is either `{ description: 'query result' }` or `{ description: 'placeholder' }`
 */
const { data } = useQuery({
  key: computed(() => ['common', queryKey.value]),
  query: async () => {
    return Promise.resolve({ description: 'query result' });
  },
  placeholderData: { description: 'placeholder' },
});

function clickHandler() {
  console.log('clickHandler invoked');

  /**
   * The issue only happens when you change the cache key and invalidate the key at the same time.
   * Performing only one of the two actions will not trigger the issue.
   */
  queryKey.value++;
  queryCache.invalidateQueries({
    key: ['common'],
  });

  /**
   * In order to trigger the bug you need to access the prop immediately after the cache invalidation.
   * In our application this happened through a computed property that was used during the fetch of a secondary query but I was able to simplify it to this
   *
   * `data.value.description` should always be safe to access since we are using a `placeholder` value - but it is not
   *
   * 💥 BOOM 💥
   * TypeError: Cannot read properties of undefined (reading 'description'
   */
  console.log('[post invalidation] data', data.value.description);
}

onMounted(() => {
  console.log('[onMounted] data', data.value);
});
</script>

console output:

[onMounted] data {description: 'placeholder'}

<button click>

clickHandler invoked
runtime-core.esm-bundler.js:268 Uncaught TypeError: Cannot read properties of undefined (reading 'description')
    at clickHandler (repro.vue:48:54)
    at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:729:5)

[posva]

Thank you! This is very helpful. The placeholderData should be triggered early