fix: call onSuccess for all query instances on

Fixes #629

examples/basic/src/index.js

@@ -3,117 +3,48 @@ import React from "react";
 import ReactDOM from "react-dom";
 import axios from "axios";
 import { useQuery, queryCache } from "react-query";
-
-function App() {
-  const [postId, setPostId] = React.useState(-1);
-
-  return (
-    <>
-      <p>
-        As you visit the posts below, you will notice them in a loading state
-        the first time you load them. However, after you return to this list and
-        click on any posts you have already visited again, you will see them
-        load instantly and background refresh right before your eyes!{" "}
-        <strong>
-          (You may need to throttle your network speed to simulate longer
-          loading sequences)
-        </strong>
-      </p>
-      {postId > -1 ? (
-        <Post postId={postId} setPostId={setPostId} />
-      ) : (
-        <Posts setPostId={setPostId} />
-      )}
-    </>
+import { ReactQueryDevtools } from "react-query-devtools";
+
+function useGetSomethingExample(id) {
+  return useQuery(
+    "todos",
+    async function queryFn() {
+      const { data } = await axios.get(
+        "https://jsonplaceholder.typicode.com/todos/"
+      );
+      return data;
+    },
+    {
+      onSuccess: async (data) => {
+        console.log(id, data[id]);
+      },
+    }
   );
 }
 
-function Posts({ setPostId }) {
-  const { status, data, error, isFetching } = useQuery("posts", async () => {
-    const { data } = await axios.get(
-      "https://jsonplaceholder.typicode.com/posts"
-    );
-    return data;
-  });
-
-  return (
-    <div>
-      <h1>Posts</h1>
-      <div>
-        {status === "loading" ? (
-          "Loading..."
-        ) : status === "error" ? (
-          <span>Error: {error.message}</span>
-        ) : (
-          <>
-            <div>
-              {data.map((post) => (
-                <p key={post.id}>
-                  <a
-                    onClick={() => setPostId(post.id)}
-                    href="#"
-                    style={
-                      // We can use the queryCache here to show bold links for
-                      // ones that are cached
-                      queryCache.getQueryData(["post", post.id])
-                        ? {
-                            fontWeight: "bold",
-                            color: "green",
-                          }
-                        : {}
-                    }
-                  >
-                    {post.title}
-                  </a>
-                </p>
-              ))}
-            </div>
-            <div>{isFetching ? "Background Updating..." : " "}</div>
-          </>
-        )}
-      </div>
-    </div>
-  );
+function ExampleOne() {
+  useGetSomethingExample(1);
+  return <div>one</div>;
 }
 
-// This function is not inline to show how query keys are passed to the query function
-// Normally, you can inline them if you want.
-const getPostById = async (key, id) => {
-  const { data } = await axios.get(
-    `https://jsonplaceholder.typicode.com/posts/${id}`
-  );
-  return data;
-};
-
-function Post({ postId, setPostId }) {
-  const { status, data, error, isFetching } = useQuery(
-    ["post", postId],
-    getPostById,
-    {
-      enabled: postId,
-    }
-  );
+function ExampleTwo() {
+  useGetSomethingExample(2);
+  return <div>two</div>;
+}
 
+export default function App() {
   return (
-    <div>
-      <div>
-        <a onClick={() => setPostId(-1)} href="#">
-          Back
-        </a>
-      </div>
-      {!postId || status === "loading" ? (
-        "Loading..."
-      ) : status === "error" ? (
-        <span>Error: {error.message}</span>
-      ) : (
-        <>
-          <h1>{data.title}</h1>
-          <div>
-            <p>{data.body}</p>
-          </div>
-          <div>{isFetching ? "Background Updating..." : " "}</div>
-        </>
-      )}
+    <div className="App">
+      <ExampleOne />
+      <ExampleTwo />
+      <ReactQueryDevtools initialIsOpen={true} />
+      <button
+        onClick={() => {
+          queryCache.invalidateQueries("todos");
+        }}
+      >
+        refetch "todos" key
+      </button>
     </div>
   );
 }