feat(useQuery) transform placeholder data with select (TanStack#2108)

* feat(useQuery): run placeholderData through select

* feat(useQuery): run placeholderData through select

add a test for placeholderDataFunction

* feat(useQuery): run placeholderData through select

fix structural sharing, in the options, we might also have the placeholderData function, but on the previous result, we have the correct result from the previous iteration, which we want to keep if possible

Author: TkDodo

src/core/queryObserver.ts

@@ -507,13 +507,31 @@ export class QueryObserver<
       } else {
         placeholderData =
           typeof options.placeholderData === 'function'
-            ? (options.placeholderData as PlaceholderDataFunction<TData>)()
+            ? (options.placeholderData as PlaceholderDataFunction<TQueryData>)()
             : options.placeholderData
+        if (options.select && typeof placeholderData !== 'undefined') {
+          try {
+            placeholderData = options.select(placeholderData)
+            if (options.structuralSharing !== false) {
+              placeholderData = replaceEqualDeep(
+                prevResult?.data,
+                placeholderData
+              )
+            }
+            this.previousSelectError = null
+          } catch (selectError) {
+            getLogger().error(selectError)
+            error = selectError
+            this.previousSelectError = selectError
+            errorUpdatedAt = Date.now()
+            status = 'error'
+          }
+        }
       }
 
       if (typeof placeholderData !== 'undefined') {
         status = 'success'
-        data = placeholderData
+        data = placeholderData as TData
         isPlaceholderData = true
       }
     }

src/core/types.ts

@@ -184,7 +184,7 @@ export interface QueryObserverOptions<
   /**
    * If set, this value will be used as the placeholder data for this particular query observer while the query is still in the `loading` data and no initialData has been provided.
    */
-  placeholderData?: TData | PlaceholderDataFunction<TData>
+  placeholderData?: TQueryData | PlaceholderDataFunction<TQueryData>
   /**
    * If set, the observer will optimistically set the result in fetching state before the query has actually started fetching.
    * This is to make sure the results are not lagging behind.

src/react/tests/useQuery.test.tsx

@@ -3462,6 +3462,95 @@ describe('useQuery', () => {
     ])
   })
 
+  it('placeholder data should run through select', async () => {
+    const key1 = queryKey()
+
+    const states: UseQueryResult<string>[] = []
+
+    function Page() {
+      const state = useQuery(key1, () => 1, {
+        placeholderData: 23,
+        select: data => String(data * 2),
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h2>Data: {state.data}</h2>
+          <div>Status: {state.status}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('Data: 2'))
+
+    expect(states).toMatchObject([
+      {
+        isSuccess: true,
+        isPlaceholderData: true,
+        data: '46',
+      },
+      {
+        isSuccess: true,
+        isPlaceholderData: false,
+        data: '2',
+      },
+    ])
+  })
+
+  it('placeholder data function result should run through select', async () => {
+    const key1 = queryKey()
+
+    const states: UseQueryResult<string>[] = []
+    let placeholderFunctionRunCount = 0
+
+    function Page() {
+      const state = useQuery(key1, () => 1, {
+        placeholderData: () => {
+          placeholderFunctionRunCount++
+          return 23
+        },
+        select: data => String(data * 2),
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <h2>Data: {state.data}</h2>
+          <div>Status: {state.status}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('Data: 2'))
+
+    rendered.rerender(<Page />)
+
+    expect(states).toMatchObject([
+      {
+        isSuccess: true,
+        isPlaceholderData: true,
+        data: '46',
+      },
+      {
+        isSuccess: true,
+        isPlaceholderData: false,
+        data: '2',
+      },
+      {
+        isSuccess: true,
+        isPlaceholderData: false,
+        data: '2',
+      },
+    ])
+
+    expect(placeholderFunctionRunCount).toEqual(1)
+  })
+
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
     let cancelFn: jest.Mock = jest.fn()