refactor(query): add more context to "Missing queryFn" error (#5620)

* refactor(query): add more context to "Missing queryFn" error

* refactor(query): use queryHash in error message for serialisation concern

---------

Co-authored-by: Guillaume Labat <[email protected]>
Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: 3 people

packages/query-core/src/infiniteQueryBehavior.ts

@@ -44,7 +44,11 @@ export function infiniteQueryBehavior<
 
         // Get query function
         const queryFn =
-          context.options.queryFn || (() => Promise.reject('Missing queryFn'))
+          context.options.queryFn ||
+          (() =>
+            Promise.reject(
+              `Missing queryFn for queryKey '${context.options.queryHash}'`,
+            ))
 
         const buildNewPages = (
           pages: unknown[],

packages/query-core/src/query.ts

@@ -392,7 +392,9 @@ export class Query<
     // Create fetch function
     const fetchFn = () => {
       if (!this.options.queryFn) {
-        return Promise.reject('Missing queryFn')
+        return Promise.reject(
+          `Missing queryFn for queryKey '${this.options.queryHash}'`,
+        )
       }
       this.abortSignalConsumed = false
       return this.options.queryFn(queryFnContext)

packages/query-core/src/tests/infiniteQueryBehavior.test.tsx

@@ -2,15 +2,18 @@ import { waitFor } from '@testing-library/react'
 import type {
   QueryClient,
   InfiniteQueryObserverResult,
+  QueryCache,
 } from '@tanstack/query-core'
 import { InfiniteQueryObserver } from '@tanstack/query-core'
 import { createQueryClient, queryKey } from './utils'
 
 describe('InfiniteQueryBehavior', () => {
   let queryClient: QueryClient
+  let queryCache: QueryCache
 
   beforeEach(() => {
     queryClient = createQueryClient()
+    queryCache = queryClient.getQueryCache()
     queryClient.mount()
   })
 
@@ -35,9 +38,10 @@ describe('InfiniteQueryBehavior', () => {
     })
 
     await waitFor(() => {
+      const query = queryCache.find(key)!
       return expect(observerResult).toMatchObject({
         isError: true,
-        error: 'Missing queryFn',
+        error: `Missing queryFn for queryKey '${query.queryHash}'`,
       })
     })
 

packages/query-core/src/tests/query.test.tsx

@@ -794,8 +794,12 @@ describe('query', () => {
     })
 
     const unsubscribe = observer.subscribe(() => undefined)
+
     await sleep(10)
-    expect(mockLogger.error).toHaveBeenCalledWith('Missing queryFn')
+    const query = queryCache.find(key)!
+    expect(mockLogger.error).toHaveBeenCalledWith(
+      `Missing queryFn for queryKey '${query.queryHash}'`,
+    )
 
     unsubscribe()
   })