chore(query core): upgrade version

Author: amen-souissi

docs/src/pages/comparison.md

@@ -53,7 +53,7 @@ Feature/Capability Key:
 
 > **<sup>1</sup> Lagged Query Data** - Svelte Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
 
-> **<sup>2</sup> Render Optimization** - Svelte Query has excellent rendering performance. It will only re-render your components when a query is updated. For example because it has new data, or to indicate it is fetching. Svelte Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnStatusChange` to `false`.
+> **<sup>2</sup> Render Optimization** - Svelte Query has excellent rendering performance. It will only re-render your components when a query is updated. For example because it has new data, or to indicate it is fetching. Svelte Query also batches updates together to make sure your application only re-renders once when multiple components are using the same query. If you are only interested in the `data` or `error` properties, you can reduce the number of renders even more by setting `notifyOnChangeProps` to `['data', 'error']`.
 
 > **<sup>3</sup> Partial query matching** - Because Svelte Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
 

docs/src/pages/graphql.md

@@ -9,4 +9,4 @@ Because Svelte Query's fetching mechanisms are agnostically built on Promises, y
 
 ## Examples
 
-- [basic-graphql-request](../docs/examples/basic-graphql-request) (The "basic" example, but implemented with [`graphq-request`](https://github.com/prisma-labs/graphql-request))
+- [basic-graphql-request](../docs/examples/basic-graphql-request) (The "basic" example, but implemented with [`graphql-request`](https://github.com/prisma-labs/graphql-request))

docs/src/pages/reference/useQuery.md

@@ -10,9 +10,8 @@ const queryResult = useQuery(queryKey, queryFn?, {
   initialData,
   isDataEqual,
   keepPreviousData,
-  notifyOnFetchChange,
-  notifyOnStaleChange,
-  notifyOnStatusChange,
+  notifyOnChangeProps,
+  notifyOnChangePropsExclusions,
   onError,
   onSettled,
   onSuccess,
@@ -111,14 +110,14 @@ const result = useQuery({
   - If set to `true`, the query will refetch on reconnect if the data is stale.
   - If set to `false`, the query will not refetch on reconnect.
   - If set to `"always"`, the query will always refetch on reconnect.
-- `notifyOnStaleChange: boolean`
+- `notifyOnChangeProps: string[]`
   - Optional
-  - Set this to `true` to re-render when the `isStale` property changes.
-  - Defaults to `false`.
-- `notifyOnStatusChange: boolean`
+  - If set, the component will only re-render if any of the listed properties change.
+  - If set to `['data', 'error']` for example, the component will only re-render when the `data` or `error` properties change.
+- `notifyOnChangePropsExclusions: string[]`
   - Optional
-  - Set this to `false` to only re-render when there are changes to `data` or `error`.
-  - Defaults to `true`.
+  - If set, the component will not re-render if any of the listed properties change.
+  - If set to `['isStale']` for example, the component will not re-render when the `isStale` property changes.
 - `onSuccess: (data: TData) => void`
   - Optional
   - This function will fire any time the query successfully fetches new data.

docs/src/pages/videos.mdx

@@ -16,3 +16,48 @@ title: Videos & Talks
 ></iframe>
 
 [Click here to view the Repository used for the above presentation](https://github.com/TanStack/svelte-query-blog-refactor-example)
+
+<iframe
+  width="280"
+  height="400"
+  src="https://www.youtube.com/embed/DocXo3gqGdI"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  style={{
+    width: '100%',
+  }}
+></iframe>
+<iframe
+  width="280"
+  height="400"
+  src="https://www.youtube.com/embed/PPvWXbSCtBU"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  style={{
+    width: '100%',
+  }}
+></iframe>
+<iframe
+  width="280"
+  height="400"
+  src="https://www.youtube.com/embed/B3cJDT3j19I"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  style={{
+    width: '100%',
+  }}
+></iframe>
+<iframe
+  width="280"
+  height="400"
+  src="https://www.youtube.com/embed/_ehibado6rU"
+  frameborder="0"
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+  style={{
+    width: '100%',
+  }}
+></iframe>

src/queryCore/core/queryObserver.ts

@@ -42,7 +42,7 @@ export class QueryObserver<
   TError = unknown,
   TQueryFnData = TData,
   TQueryData = TQueryFnData
-  > extends Subscribable<QueryObserverListener<TData, TError>> {
+> extends Subscribable<QueryObserverListener<TData, TError>> {
   options: QueryObserverOptions<TData, TError, TQueryFnData, TQueryData>
 
   private client: QueryClient
@@ -288,9 +288,10 @@ export class QueryObserver<
     // @ts-ignore
     this.staleTimeoutId = setTimeout(() => {
       if (!this.currentResult.isStale) {
+        const prevResult = this.currentResult
         this.updateResult()
         this.notify({
-          listeners: this.options.notifyOnStaleChange === true,
+          listeners: this.shouldNotifyListeners(prevResult, this.currentResult),
           cache: true,
         })
       }
@@ -329,7 +330,7 @@ export class QueryObserver<
   }
 
   private clearStaleTimeout(): void {
-    clearInterval(this.staleTimeoutId)
+    clearTimeout(this.staleTimeoutId)
     this.staleTimeoutId = undefined
   }
 
@@ -423,6 +424,42 @@ export class QueryObserver<
     return result as QueryObserverResult<TData, TError>
   }
 
+  private shouldNotifyListeners(
+    prevResult: QueryObserverResult,
+    result: QueryObserverResult
+  ): boolean {
+    const { notifyOnChangeProps, notifyOnChangePropsExclusions } = this.options
+
+    if (prevResult === result) {
+      return false
+    }
+
+    if (!notifyOnChangeProps && !notifyOnChangePropsExclusions) {
+      return true
+    }
+
+    const keys = Object.keys(result)
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i] as keyof QueryObserverResult
+      const changed = prevResult[key] !== result[key]
+      const isIncluded = notifyOnChangeProps?.some(x => x === key)
+      const isExcluded = notifyOnChangePropsExclusions?.some(x => x === key)
+
+      if (changed) {
+        if (notifyOnChangePropsExclusions && isExcluded) {
+          continue
+        }
+
+        if (!notifyOnChangeProps || isIncluded) {
+          return true
+        }
+      }
+    }
+
+    return false
+  }
+
   private updateResult(willFetch?: boolean): void {
     const result = this.getNewResult(willFetch)
 
@@ -466,7 +503,9 @@ export class QueryObserver<
     prevQuery?.removeObserver(this)
     this.currentQuery.addObserver(this)
 
-    if (this.options.notifyOnStatusChange !== false) {
+    if (
+      this.shouldNotifyListeners(this.previousQueryResult, this.currentResult)
+    ) {
       this.notify({ listeners: true })
     }
   }
@@ -494,13 +533,7 @@ export class QueryObserver<
       notifyOptions.onError = true
     }
 
-    if (
-      // Always notify if notifyOnStatusChange is set
-      this.options.notifyOnStatusChange !== false ||
-      // Otherwise only notify on data or error change
-      currentResult.data !== prevResult.data ||
-      currentResult.error !== prevResult.error
-    ) {
+    if (this.shouldNotifyListeners(prevResult, currentResult)) {
       notifyOptions.listeners = true
     }
 

src/queryCore/core/types.ts

@@ -128,16 +128,14 @@ export interface QueryObserverOptions<
    */
   refetchOnMount?: boolean | 'always'
   /**
-   * Whether a component should re-render when the `isStale` property changes.
-   * Defaults to `false`.
+   * If set, the component will only re-render if any of the listed properties change.
+   * When set to `['data', 'error']`, the component will only re-render when the `data` or `error` properties change.
    */
-  notifyOnStaleChange?: boolean
+  notifyOnChangeProps?: Array<keyof InfiniteQueryObserverResult>
   /**
-   * Whether a change to the query status should re-render a component.
-   * If set to `false`, the component will only re-render when the actual `data` or `error` changes.
-   * Defaults to `true`.
+   * If set, the component will not re-render if any of the listed properties change.
    */
-  notifyOnStatusChange?: boolean
+  notifyOnChangePropsExclusions?: Array<keyof InfiniteQueryObserverResult>
   /**
    * This callback will fire any time the query successfully fetches new data.
    */