Allow to reload in useQuerySuspense

docs/README.md

@@ -370,9 +370,9 @@ const fetchUsersList = {
 };
 
 export const UsersListContainer = () => {
-  const { payload, error } = useSuspenseQuery(fetchUsersList);
+  const { payload, error, query } = useSuspenseQuery(fetchUsersList);
 
-  return <UsersList error={error} users={payload} />;
+  return <UsersList error={error} users={payload} onReload={query} />;
 };
 
 ```
@@ -470,8 +470,8 @@ const fetchUsersList = {
 
 export const UsersListContainer = () => (
   <SuspenseQuery action={fetchUsersList}>
-    {({ error, payload }) => (
-      <UsersList error={error} users={payload} />
+    {({ error, payload, query }) => (
+      <UsersList error={error} users={payload} onReload={query} />
     )}
   </Query>
 );

examples/use-suspense-query-hook/src/newsList/NewsListContainer.tsx

@@ -2,12 +2,21 @@ import React from 'react';
 import { useSuspenseQuery } from 'react-fetching-library';
 
 import { fetchNewsList } from '../api/actions/fetchNewsList';
+import { Button } from '../shared';
 
 import { NewsList } from './NewsList';
 import { News } from './NewsList.types';
 
 export const NewsListContainer = () => {
-  const { payload, error } = useSuspenseQuery<News[]>(fetchNewsList);
+  const { payload, error, query } = useSuspenseQuery<News[]>(fetchNewsList);
 
-  return <NewsList error={error} news={payload} />;
+  return (
+    <div>
+      <Button onClick={query} variant="contained" color="primary">
+        Click to reload
+      </Button>
+
+      <NewsList error={error} news={payload} />
+    </div>
+  );
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetching-library",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Simple and powerful API client for react. Use hooks or FACC's to fetch data in easy way. No dependencies! Just react under the hood.",
   "main": "lib/index.js",
   "files": [

src/hooks/useSuspenseQuery/useSuspenseQuery.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { createCache } from '../../cache/cache';
 import { Action, QueryResponse } from '../../client/client.types';
 import { ClientContext } from '../../context/clientContext';
@@ -12,17 +12,30 @@ const cache = createCache<CacheItem>(() => true, () => true);
 
 export const useSuspenseQuery = <T, R = any>(action: Action<R>) => {
   const clientContext = useContext(ClientContext);
+  const [flag, setFlag] = useState<null | boolean>(null);
   const cacheItem = cache.get(action);
 
   useEffect(() => {
+    if (cacheItem && cacheItem.response && flag !== null) {
+      cache.remove(action);
+    }
+
     return () => {
       cache.remove(action);
     };
-  }, []);
+  }, [action]);
+
+  const forceQuery = () => {
+    cache.remove(action);
+    setFlag(!flag);
+  };
 
   if (cacheItem) {
     if (cacheItem.response) {
-      return cacheItem.response as QueryResponse<T>;
+      return {
+        ...(cacheItem.response as QueryResponse<T>),
+        query: forceQuery,
+      };
     }
 
     throw cacheItem.fetch;