Skip to content
Permalink
Browse files

Allow to reload in useQuerySuspense

  • Loading branch information...
marcin-piela committed May 13, 2019
1 parent bcdebf2 commit 2956b6151d087e28708b55905d833156f3c88532
@@ -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>
);
@@ -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>
);
};
@@ -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": [
@@ -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;

0 comments on commit 2956b61

Please sign in to comment.
You can’t perform that action at this time.