diff --git a/tanstack-query/README.md b/tanstack-query/README.md index 7fce62a..984755d 100644 --- a/tanstack-query/README.md +++ b/tanstack-query/README.md @@ -46,7 +46,7 @@ Follow these instructions to build and serve the program: General clean-ups, todos and things I wish to implement for this project: * [x] DONE Implement -* [ ] How to implement "refresh this data"? If I had a refresh button, do you call some method to invalidate the cache +* [x] DONE (very nice, TanStack Query delivering excellently on its promise) How to implement "refresh this data"? If I had a refresh button, do you call some method to invalidate the cache for that key or something? diff --git a/tanstack-query/src/app.jsx b/tanstack-query/src/app.jsx index d83090d..c86b9af 100644 --- a/tanstack-query/src/app.jsx +++ b/tanstack-query/src/app.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useCallback} from 'react'; import ReactDOM from 'react-dom/client'; import {QueryClient, QueryClientProvider, useQuery,} from '@tanstack/react-query'; @@ -6,8 +6,7 @@ const queryClient = new QueryClient(); function News() { console.log("[News] Render function invoked."); - // What is 'isFetching' for if we already have 'status'? - const {status, data, error, isFetching} = useQuery({ + const {status, data, dataUpdatedAt, error, isFetching} = useQuery({ queryKey: ['front-page-news'], queryFn: async () => { console.log("[queryFn] invoked."); @@ -19,6 +18,11 @@ function News() { }, }); + const refreshData = useCallback(() => { + // noinspection JSIgnoredPromiseFromCall + queryClient.invalidateQueries('front-page-news'); + }, []); + if (status === "pending") { return
{headline.summary}
))} + +Last fetched at {new Date(dataUpdatedAt).toLocaleString()}
); }