Merge branch 'master' into beta

Author: tannerlinsley

docs/src/pages/guides/query-cancellation.md

@@ -55,3 +55,35 @@ const query = useQuery('todos', () => {
   return promise
 })
 ```
+
+## Manual Cancellation
+
+You might want to cancel a query manually. For example, if the request takes a long time to finish, you can allow the user to click a cancel button to stop the request. To do this, you just need to call `cache.cancelQueries(key)`. If `promise.cancel` is available, React Query will cancel the request.
+
+```js
+const [queryKey] = useState('todos')
+
+const query = useQuery(queryKey, () => {
+  const controller = new AbortController()
+  const signal = controller.signal
+
+  const promise = fetch('/todos', {
+    method: 'get',
+    signal,
+  })
+
+  // Cancel the request if React Query calls the `promise.cancel` method
+  promise.cancel = () => controller.abort()
+
+  return promise
+})
+
+const cache = useQueryCache();
+
+return (
+  <button onClick={(e) => {
+    e.preventDefault();
+    cache.cancelQueries(queryKey);
+   }}>Cancel</button>
+)
+```

src/core/query.ts

@@ -187,14 +187,12 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
     // Get the new data
     let data = functionalUpdate(updater, prevData)
 
-    // Structurally share data between prev and new data if needed
-    if (this.options.structuralSharing !== false) {
-      data = replaceEqualDeep(prevData, data)
-    }
-
     // Use prev data if an isDataEqual function is defined and returns `true`
     if (this.options.isDataEqual?.(prevData, data)) {
       data = prevData as TData
+    } else if (this.options.structuralSharing !== false) {
+      // Structurally share data between prev and new data if needed
+      data = replaceEqualDeep(prevData, data)
     }
 
     // Set data and mark it as cached