fix(suspense): Suspense instances now unmount properly

Author: tannerlinsley

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 .history
 size-plugin.json
 stats.html
+.vscode/settings.json

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#ff4154", // change this color!
-    "titleBar.inactiveBackground": "#ff4154", // change this color!
+    "titleBar.activeBackground": "#00da63", // change this color!
+    "titleBar.inactiveBackground": "#00da63", // change this color!
     "titleBar.activeForeground": "#ffffff", // change this color!
     "titleBar.inactiveForeground": "#ffffff" // change this color!
   }

src/queryCache.js

@@ -273,6 +273,9 @@ export function makeQueryCache() {
     }
 
     query.updateInstance = instance => {
+      // Filter out any placeholder instances created for suspense
+      query.instances = query.instances.filter(d => !d.isPlaceholder)
+
       let found = query.instances.find(d => d.id === instance.id)
 
       if (found) {
@@ -291,7 +294,9 @@ export function makeQueryCache() {
 
       // Return the unsubscribe function
       return () => {
-        query.instances = query.instances.filter(d => d.id !== instanceId)
+        query.instances = query.instances.filter(
+          d => !d.isPlaceholder && d.id !== instanceId
+        )
 
         if (!query.instances.length) {
           // Cancel any side-effects

src/useBaseQuery.js

@@ -60,19 +60,30 @@ export function useBaseQuery(queryKey, queryVariables, queryFn, config = {}) {
     [query]
   )
 
-  // Create or update this instance of the query
-  query.updateInstance({
-    id: instanceId,
-    onStateUpdate: () => rerender({}),
-    onSuccess: data => getLatestConfig().onSuccess(data),
-    onError: err => getLatestConfig().onError(err),
-    onSettled: (data, err) => getLatestConfig().onSettled(data, err),
-  })
+  const updateInstance = React.useCallback(
+    isPlaceholder => {
+      query.updateInstance({
+        id: instanceId,
+        isPlaceholder,
+        onStateUpdate: () => rerender({}),
+        onSuccess: data => getLatestConfig().onSuccess(data),
+        onError: err => getLatestConfig().onError(err),
+        onSettled: (data, err) => getLatestConfig().onSettled(data, err),
+      })
+    },
+    [getLatestConfig, instanceId, query, rerender]
+  )
+
+  // Create the placeholder instance of this query (suspense needs this to
+  // to fire things like onSuccess/onError/onSettled)
+  updateInstance(true)
 
   // After mount, subscribe to the query
   React.useEffect(() => {
+    // Update the instance to the query again, but not as a placeholder
+    updateInstance()
     return query.subscribe(instanceId)
-  }, [getLatestConfig, instanceId, query, rerender])
+  }, [getLatestConfig, instanceId, query, rerender, updateInstance])
 
   React.useEffect(() => {
     // Perform the initial fetch for this query if necessary