diff --git a/.gitignore b/.gitignore
index b6802db061..233bcb077e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ yarn-error.log*
 .history
 size-plugin.json
 stats.html
+.vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f3bb781717..420d141d57 100644
--- a/.vscode/settings.json
+++ b/.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!
   }
diff --git a/src/queryCache.js b/src/queryCache.js
index 33e2e2e90a..b7a424658a 100644
--- a/src/queryCache.js
+++ b/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
diff --git a/src/useBaseQuery.js b/src/useBaseQuery.js
index 8f6d0e4f19..876469dc4c 100644
--- a/src/useBaseQuery.js
+++ b/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