Make sure query is refetched specified number of times

examples/sandbox/src/index.app.js

@@ -62,7 +62,7 @@ let queryTimeMin = 1000;
 let queryTimeMax = 2000;
 
 const fetchTodos = (key, { filter } = {}) => {
-  console.log("fetchTodos", { filter });
+  console.info("fetchTodos", { filter });
   const promise = new Promise((resolve, reject) => {
     setTimeout(() => {
       if (Math.random() < errorRate) {
@@ -74,13 +74,13 @@ const fetchTodos = (key, { filter } = {}) => {
     }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
   });
 
-  promise.cancel = () => console.log("cancelled", filter);
+  promise.cancel = () => console.info("cancelled", filter);
 
   return promise;
 };
 
 const fetchTodoById = (key, { id }) => {
-  console.log("fetchTodoById", { id });
+  console.info("fetchTodoById", { id });
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (Math.random() < errorRate) {
@@ -94,7 +94,7 @@ const fetchTodoById = (key, { id }) => {
 };
 
 const postTodo = ({ name, notes }) => {
-  console.log("postTodo", { name, notes });
+  console.info("postTodo", { name, notes });
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (Math.random() < errorRate) {
@@ -110,7 +110,7 @@ const postTodo = ({ name, notes }) => {
 };
 
 const patchTodo = todo => {
-  console.log("patchTodo", todo);
+  console.info("patchTodo", todo);
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (Math.random() < errorRate) {

examples/suspense/src/queries.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 export async function fetchProjects(key) {
-  console.log("fetch projects");
+  console.info("fetch projects");
   let { data } = await axios.get(
     `https://api.github.com/users/tannerlinsley/repos?sort=updated`
   );
@@ -10,7 +10,7 @@ export async function fetchProjects(key) {
 }
 
 export async function fetchProject(key, { id }) {
-  console.log("fetch project id", id);
+  console.info("fetch project id", id);
   let { data } = await axios.get(
     `https://api.github.com/repos/tannerlinsley/${id}`
   );

src/queryCache.js

@@ -206,7 +206,7 @@ export function makeQueryCache() {
         () => {
           cache.removeQueries(d => d.queryHash === query.queryHash)
         },
-        typeof query.state.data === 'undefined' ? 0 : query.config.cacheTime
+        (typeof query.state.data === 'undefined' && query.state.status !== 'error') ? 0 : query.config.cacheTime
       )
     }
 
@@ -276,7 +276,7 @@ export function makeQueryCache() {
         if (
           // Only retry if the document is visible
           query.config.retry === true ||
-          query.state.failureCount < query.config.retry
+          query.state.failureCount <= query.config.retry
         ) {
           if (!isDocumentVisible()) {
             return new Promise(noop)

src/tests/useQuery.test.js

@@ -165,7 +165,7 @@ describe('useQuery', () => {
         () => {
           return Promise.reject('Error test')
         },
-        { retry: false },
+        { retry: false }
       )
 
       return (
@@ -179,4 +179,35 @@ describe('useQuery', () => {
 
     await waitForElement(() => rendered.getByText('error'))
   })
+
+  it('should retry specified number of times', async () => {
+    const queryFn = jest.fn()
+    queryFn.mockImplementation(() => {
+      return Promise.reject('Error test')
+    })
+
+    function Page() {
+      const { status, failureCount } = useQuery('test', queryFn, {
+        retry: 1,
+        retryDelay: 1,
+      })
+
+      return (
+        <div>
+          <h1>{status}</h1>
+          <h2>Failed {failureCount} times</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitForElement(() => rendered.getByText('loading'))
+    await waitForElement(() => rendered.getByText('error'))
+
+    // query should fail `retry + 1` times, since first time isn't a "retry"
+    await waitForElement(() => rendered.getByText('Failed 2 times'))
+
+    expect(queryFn).toHaveBeenCalledTimes(2)
+  })
 })