Merge branch 'master' of https://github.com/tannerlinsley/react-query

Author: tannerlinsley

.all-contributorsrc

@@ -0,0 +1,39 @@
+{
+  "projectName": "react-query",
+  "projectOwner": "tannerlinsley",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "none",
+  "contributors": [
+    {
+      "login": "tannerlinsley",
+      "name": "Tanner Linsley",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/5580297?v=4",
+      "profile": "https://tannerlinsley.com",
+      "contributions": [
+        "code",
+        "ideas",
+        "example",
+        "maintenance",
+        "review"
+      ]
+    },
+    {
+      "login": "cherniavskii",
+      "name": "Andrew Cherniavskii",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/13808724?v=4",
+      "profile": "http://cherniavskii.com",
+      "contributions": [
+        "code",
+        "bug"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true
+}

README.md

@@ -355,21 +355,21 @@ The query `info` returned contains all information about the query and can be ea
 function Todos() {
   const { status, data, error } = useQuery('todos', fetchTodoList)
 
+  if (status === 'loading') {
+    return <span>Loading...</span>
+  }
+
+  if (status === 'error') {
+    return <span>Error: {error.message}</span>
+  }
+
+  // also status === 'success', but "else" logic works, too
   return (
-    <div>
-      {status === 'loading' ? (
-        <span>Loading...</span>
-      ) : status === 'error' ? (
-        <span>Error: {error.message}</span>
-      ) : (
-        // also status === 'success', but "else" logic works, too
-        <ul>
-          {data.map(todo => (
-            <li key={todo.id}>{todo.title}</li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <ul>
+      {data.map(todo => (
+        <li key={todo.id}>{todo.title}</li>
+      ))}
+    </ul>
   )
 }
 ```
@@ -2579,3 +2579,24 @@ setConsole({
 
 - `console: Object`
   - Must implement the `log`, `warn`, and `error` methods.
+
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://tannerlinsley.com"><img src="https://avatars0.githubusercontent.com/u/5580297?v=4" width="100px;" alt=""/><br /><sub><b>Tanner Linsley</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=tannerlinsley" title="Code">💻</a> <a href="#ideas-tannerlinsley" title="Ideas, Planning, & Feedback">🤔</a> <a href="#example-tannerlinsley" title="Examples">💡</a> <a href="#maintenance-tannerlinsley" title="Maintenance">🚧</a> <a href="https://github.com/tannerlinsley/react-query/pulls?q=is%3Apr+reviewed-by%3Atannerlinsley" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="http://cherniavskii.com"><img src="https://avatars2.githubusercontent.com/u/13808724?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Cherniavskii</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-query/commits?author=cherniavskii" title="Code">💻</a> <a href="https://github.com/tannerlinsley/react-query/issues?q=author%3Acherniavskii" title="Bug reports">🐛</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

examples/pagination/pages/index.js

@@ -1,22 +1,29 @@
-import React from 'react'
-import axios from 'axios'
-import { usePaginatedQuery } from 'react-query'
+import React from "react";
+import axios from "axios";
+import { usePaginatedQuery, queryCache } from "react-query";
 
 function Todos() {
-  const [page, setPage] = React.useState(0)
+  const [page, setPage] = React.useState(0);
 
-  const fetchProjects = async (key, page = 0) => {
-    const { data } = await axios.get('/api/projects?page=' + page)
-    return data
-  }
+  const fetchProjects = React.useCallback(async (key, page = 0) => {
+    const { data } = await axios.get("/api/projects?page=" + page);
+    return data;
+  }, []);
 
   const {
     status,
     resolvedData,
     latestData,
     error,
-    isFetching,
-  } = usePaginatedQuery(['projects', page], fetchProjects)
+    isFetching
+  } = usePaginatedQuery(["projects", page], fetchProjects, {});
+
+  // Prefetch the next page!
+  React.useEffect(() => {
+    if (latestData?.hasMore) {
+      queryCache.prefetchQuery(["projects", page + 1], fetchProjects);
+    }
+  }, [latestData, fetchProjects, page]);
 
   return (
     <div>
@@ -28,9 +35,9 @@ function Todos() {
         instantaneously while they are also refetched invisibly in the
         background.
       </p>
-      {status === 'loading' ? (
+      {status === "loading" ? (
         <div>Loading...</div>
-      ) : status === 'error' ? (
+      ) : status === "error" ? (
         <div>Error: {error.message}</div>
       ) : (
         // `resolvedData` will either resolve to the latest page's data
@@ -47,7 +54,7 @@ function Todos() {
         disabled={page === 0}
       >
         Previous Page
-      </button>{' '}
+      </button>{" "}
       <button
         onClick={() =>
           // Here, we use `latestData` so the Next Page
@@ -61,9 +68,9 @@ function Todos() {
       {// Since the last page's data potentially sticks around between page requests,
       // we can use `isFetching` to show a background loading
       // indicator since our `status === 'loading'` state won't be triggered
-      isFetching ? <span> Loading...</span> : null}{' '}
+      isFetching ? <span> Loading...</span> : null}{" "}
     </div>
-  )
+  );
 }
 
-export default Todos
+export default Todos;

package.json

@@ -31,7 +31,7 @@
     "types"
   ],
   "dependencies": {
-    "@scarf/scarf": "^0.1.3",
+    "@scarf/scarf": "^1.0.0",
     "ts-toolbelt": "^6.4.2"
   },
   "peerDependencies": {

yarn.lock

@@ -1827,10 +1827,10 @@
   dependencies:
     estree-walker "^1.0.1"
 
-"@scarf/scarf@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-0.1.3.tgz#536f4fe54c613fca20f84dc7700ed3b8f1fb73cf"
-  integrity sha512-ftMyZO7Mi8JQh8XLBcuH3erPGmT4CU4s131nsZIDC7/PYXxaDCJtOzbz3okH0YiTAif+DSIlFhX6d7FXLOtnvA==
+"@scarf/scarf@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.0.0.tgz#109fc9c723bac288b92b98a23d178ec21001a961"
+  integrity sha512-uzjTaPmtzBLHkOrx97FKJWXeb0xzx/lOrljh7OvBNFgJM7MFS8OwO3w1CTiDNjbvtHzN4m+5DzscmNN5CxM9Og==
 
 "@sheerun/mutationobserver-shim@^0.3.2":
   version "0.3.2"