feat(query): prevent placeholder from changing the state

Author: ElisePatrikainen

src/query-store.ts

@@ -76,6 +76,9 @@ export interface UseQueryEntry<TResult = unknown, TError = unknown> {
   options: UseQueryOptionsWithDefaults<TResult, TError> | null
   // TODO: ideally shouldn't be null, there should be different kind of types
 
+  // TODO: remove optional type (`undefined` only)?
+  placeholderData?: TResult | undefined
+
   /**
    * Whether the data is stale or not, requires `options.staleTime` to be set.
    */
@@ -160,6 +163,7 @@ export function queryEntry_removeDep(
  * @param error - initial error to set
  * @param when - when the data was fetched the last time. defaults to 0, meaning it's stale
  */
+// TODO: init placeholder if it is not a function?
 export function createQueryEntry<TResult = unknown, TError = ErrorDefault>(
   key: EntryNodeKey[],
   initialData?: TResult,
@@ -501,10 +505,8 @@ export const useQueryCache = defineStore(QUERY_STORE_ID, ({ action }) => {
     <TResult, TError>(
       entry: UseQueryEntry<TResult, TError>,
       state: DataState<TResult, TError>,
-      resetWhen?: boolean,
     ) => {
       entry.state.value = state
-      if (resetWhen) entry.when = Date.now()
     },
   )
 

src/use-query.spec.ts

@@ -456,7 +456,7 @@ describe('useQuery', () => {
       expect(query).toHaveBeenCalledTimes(1)
     })
 
-    it('uses the placeholder data if configured while refetching', async () => {
+    it('uses the placeholder data (if configured) as fallback while fetching', async () => {
       const { wrapper, query } = mountDynamicKey({
         query: async () => {
           await new Promise((res) => setTimeout(res, 100))
@@ -482,22 +482,23 @@ describe('useQuery', () => {
       expect(dataId1).not.toBe(dataId0)
 
       await wrapper.vm.setId(0)
-      // Data is not stale: placeholder data is not used, catched data is used
+      // There is fresh cached data: placeholder data is not used
       expect(wrapper.vm.data).toBe(dataId0)
 
       vi.advanceTimersByTime(1001)
-
       await wrapper.vm.setId(1)
-      // Data is stale: placeholder data is used
-      expect(wrapper.vm.data).toBe(dataId0)
+      // There is stale cached data: placeholder data is not used either (stale data is used, as usual)
+      expect(wrapper.vm.data).toBe(dataId1)
 
       vi.advanceTimersByTime(100)
       await flushPromises()
       // Refetch data is used
-      expect(dataId1).not.toBe(dataId0)
+      expect(wrapper.vm.data).not.toBe(dataId1)
       expect(query).toHaveBeenCalledTimes(3)
     })
 
+    it.todo('uses the placeholder data (if configured) as fallback in case of error')
+
     it('refreshes the data if mounted and the key changes', async () => {
       const { wrapper, query } = mountDynamicKey({
         initialId: 0,

src/use-query.ts

@@ -152,7 +152,7 @@ export function useQuery<TResult, TError = ErrorDefault>(
     state: computed(() => entry.value.state.value),
 
     status: computed(() => entry.value.state.value.status),
-    data: computed(() => entry.value.state.value.data),
+    data: computed(() => entry.value.state.value.data || entry.value.placeholderData),
     error: computed(() => entry.value.state.value.error),
     asyncStatus: computed(() => entry.value.asyncStatus.value),
 
@@ -200,14 +200,10 @@ export function useQuery<TResult, TError = ErrorDefault>(
     entry,
     (entry, previousEntry) => {
       if (!isActive) return
-      if (entry.stale && entry.options?.placeholderData && previousEntry?.state.value.status === 'success') {
-        cacheEntries.setEntryState(entry, {
-          // TODO: pending?
-          status: 'success',
-          // @ts-expect-error: TODO: fix this
-          data: (typeof entry.options.placeholderData === 'function') ? entry.options.placeholderData(previousEntry.state.value.data) : previousEntry.state.value.data,
-          error: null,
-        }, false)
+      // TODO: handle HMR in case where the placeholder is removed from the options?
+      if (entry.options?.placeholderData && previousEntry?.state.value.status === 'success') {
+        // @ts-expect-error: TODO: fix this
+        entry.placeholderData = (typeof entry.options.placeholderData === 'function') ? entry.options.placeholderData(previousEntry.state.value.data) : previousEntry.state.value.data
       }
       if (previousEntry) {
         queryEntry_removeDep(previousEntry, hasCurrentInstance, cacheEntries)