@tanstack/query-core 5.0.0-alpha.26 → 5.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "5.0.0-alpha.26",
+  "version": "5.0.0-alpha.31",
   "description": "The framework agnostic core that powers TanStack Query",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/queryObserver.ts

@@ -65,9 +65,9 @@ export class QueryObserver<
   #selectError: TError | null
   #selectFn?: (data: TQueryData) => TData
   #selectResult?: TData
-  // This property keeps track of the last defined query data.
-  // It will be used to pass the previous data to the placeholder function between renders.
-  #lastDefinedQueryData?: TQueryData
+  // This property keeps track of the last query with defined data.
+  // It will be used to pass the previous data and query to the placeholder function between renders.
+  #lastQueryWithDefinedData?: Query<TQueryFnData, TError, TQueryData, TQueryKey>
   #staleTimeoutId?: ReturnType<typeof setTimeout>
   #refetchIntervalId?: ReturnType<typeof setInterval>
   #currentRefetchInterval?: number | false
@@ -489,7 +489,10 @@ export class QueryObserver<
           typeof options.placeholderData === 'function'
             ? (
                 options.placeholderData as unknown as PlaceholderDataFunction<TQueryData>
-              )(this.#lastDefinedQueryData)
+              )(
+                this.#lastQueryWithDefinedData?.state.data,
+                this.#lastQueryWithDefinedData as any,
+              )
             : options.placeholderData
         if (options.select && typeof placeholderData !== 'undefined') {
           try {
@@ -572,7 +575,7 @@ export class QueryObserver<
     }
 
     if (this.#currentResultState.data !== undefined) {
-      this.#lastDefinedQueryData = this.#currentResultState.data
+      this.#lastQueryWithDefinedData = this.#currentQuery
     }
     this.#currentResult = nextResult
 

package/src/tests/queryObserver.test.tsx

@@ -691,6 +691,72 @@ describe('queryObserver', () => {
     expect(observer.getCurrentResult().isPlaceholderData).toBe(false)
   })
 
+  test('should pass the correct previous queryKey (from prevQuery) to placeholderData function params with select', async () => {
+    const results: QueryObserverResult[] = []
+    const keys: Array<readonly unknown[] | null> = []
+
+    const key1 = queryKey()
+    const key2 = queryKey()
+
+    const data1 = { value: 'data1' }
+    const data2 = { value: 'data2' }
+
+    const observer = new QueryObserver(queryClient, {
+      queryKey: key1,
+      queryFn: () => data1,
+      placeholderData: (prev, prevQuery) => {
+        keys.push(prevQuery?.queryKey || null)
+        return prev
+      },
+      select: (data) => data.value,
+    })
+
+    const unsubscribe = observer.subscribe((result) => {
+      results.push(result)
+    })
+
+    await sleep(1)
+
+    observer.setOptions({
+      queryKey: key2,
+      queryFn: () => data2,
+      placeholderData: (prev, prevQuery) => {
+        keys.push(prevQuery?.queryKey || null)
+        return prev
+      },
+      select: (data) => data.value,
+    })
+
+    await sleep(1)
+    unsubscribe()
+    expect(results.length).toBe(4)
+    expect(keys.length).toBe(3)
+    expect(keys[0]).toBe(null) // First Query - status: 'pending', fetchStatus: 'idle'
+    expect(keys[1]).toBe(null) // First Query - status: 'pending', fetchStatus: 'fetching'
+    expect(keys[2]).toBe(key1) // Second Query - status: 'pending', fetchStatus: 'fetching'
+
+    expect(results[0]).toMatchObject({
+      data: undefined,
+      status: 'pending',
+      fetchStatus: 'fetching',
+    }) // Initial fetch
+    expect(results[1]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch
+    expect(results[2]).toMatchObject({
+      data: 'data1',
+      status: 'success',
+      fetchStatus: 'fetching',
+    }) // Fetch for new key, but using previous data as placeholder
+    expect(results[3]).toMatchObject({
+      data: 'data2',
+      status: 'success',
+      fetchStatus: 'idle',
+    }) // Successful fetch for new key
+  })
+
   test('should pass the correct previous data to placeholderData function params when select function is used in conjunction', async () => {
     const results: QueryObserverResult[] = []
 

package/src/types.ts

@@ -49,8 +49,14 @@ export type InitialDataFunction<T> = () => T | undefined
 
 type NonFunctionGuard<T> = T extends Function ? never : T
 
-export type PlaceholderDataFunction<TQueryData> = (
+export type PlaceholderDataFunction<
+  TQueryFnData = unknown,
+  TError = DefaultError,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = (
   previousData: TQueryData | undefined,
+  previousQuery: Query<TQueryFnData, TError, TQueryData, TQueryKey> | undefined,
 ) => TQueryData | undefined
 
 export type QueriesPlaceholderDataFunction<TQueryData> = () =>