Utilisation queryCache TP4

.gitignore

@@ -21,3 +21,25 @@
 /tp/npm-debug.log*
 /tp/yarn-debug.log*
 /tp/yarn-error.log*
+
+# dependencies
+/tp/tp4/node_modules
+/tp/tp4/.pnp
+/tp/tp4/.pnp.js
+
+# testing
+/tp/tp4/coverage
+
+# production
+/tp/tp4/build
+
+# misc
+/tp/tp4/.DS_Store
+/tp/tp4/.env.local
+/tp/tp4/.env.development.local
+/tp/tp4/.env.test.local
+/tp/tp4/.env.production.local
+
+/tp/tp4/npm-debug.log*
+/tp/tp4/yarn-debug.log*
+/tp/tp4/yarn-error.log*

tp/tp4/src/Item.js

-import {useQuery, useMutation} from 'react-query';
+import {useQuery, useMutation, useQueryCache} from 'react-query';
 import {useParams} from 'react-router-dom';
 import {useState} from 'react';
 
 let Item = () => {
+    const queryCache = useQueryCache();
     let id = useParams().id;
     let fetchItems = async () =>{
         let token = window.localStorage.getItem('token');
@@ -38,23 +39,27 @@ let Item = () => {
 
     let AddItemForm = () => {
         let [text, setText] = useState("");
-        const [mutationCreate] = useMutation((item) => createItem(item));
-        const onSubmit = event => {
+        const [mutationCreate] = useMutation(createItem, {
+            onSuccess: () => {queryCache.invalidateQueries('Items')}
+        });
+        const handleSubmit = event => {
             event.preventDefault(); 
             mutationCreate({ text: text });
         };
     
-        return <form onSubmit={onSubmit}>
+        return <form onSubmit={handleSubmit}>
             <input type="text" onChange={(e)=>{setText(e.target.value)}}/>
             <input type="submit" value="Add"/>
         </form>;
     };
 
     const {data, status} = useQuery('Items', fetchItems);
-    const [mutationDelete] = useMutation((item) => deleteItem(item)); 
+    const [mutationDelete] = useMutation(deleteItem, {
+        onSuccess: () => {queryCache.invalidateQueries('Items')}
+    });
 
     return <div>
-        <h1>Items</h1>
+        <h1>Items of list</h1>
         {status ==='loading' && (<div>Loading data...</div>)}
         {status ==='error' && (<div>Error fetching data</div>)}
         {status ==='success' && (

tp/tp4/src/Lists.js

-import {useQuery, useMutation} from 'react-query';
+import {useQuery, useMutation, useQueryCache} from 'react-query';
 import {useState} from 'react';
 import {useHistory} from 'react-router-dom';
 
 let Lists = () => {
+
+    const queryCache = useQueryCache();
     
     let createList = list => {
         return fetch("http://localhost:4200/list", {
@@ -28,19 +30,21 @@ let Lists = () => {
 
     let AddListForm = () => {
         let [title, setTitle] = useState("");
-        const [mutationCreate] = useMutation((list) => createList(list));
-        const onSubmit = event => {
+        const [mutationCreate] = useMutation(createList, {
+            onSuccess: () => {queryCache.invalidateQueries('Lists')}
+        });
+        const handleSubmit = event => {
             event.preventDefault(); 
             mutationCreate({ title: title });
         };
     
-        return <form onSubmit={onSubmit}>
+        return <form onSubmit={handleSubmit}>
             <input type="text" onChange={(e)=>{setTitle(e.target.value)}}/>
             <input type="submit" value="Add"/>
         </form>;
     };
     
-    let fetchList = async() =>{
+    let fetchList = async () =>{
         let token = window.localStorage.getItem('token');
         let res = await fetch("http://localhost:4200/list", {
             headers: {
@@ -51,7 +55,9 @@ let Lists = () => {
     };
 
     const {data, status} = useQuery('Lists', fetchList);
-    const [mutationDelete] = useMutation((list) => deleteList(list)); 
+    const [mutationDelete] = useMutation(deleteList, {
+        onSuccess: () => queryCache.invalidateQueries('Lists')
+    });
     let history = useHistory();
 
     return <div>