@@ -10,9 +10,58 @@ pnpm add @joeyfigaro/use-mutation-redirect
10
10
yarn add @joeyfigaro/use-mutation-redirect
11
11
```
12
12
13
- ## Examples
13
+ ## Requirements
14
14
15
- N/A (soon)
15
+ - ` react ` + ` react-dom ` ` v18.* `
16
+ - ` @tanstack/react-query ` ` v5.* ` (created using v5.69.0)
17
+
18
+ I plan to offer support for older versions of React and RQ (TQ?)
19
+
20
+ ## Quickstart
21
+
22
+ 1 . import ` useMutationRedirect `
23
+ 2 . use it in place of ` useMutation `
24
+ 3 . provide options for ` useMutation ` as the first argument, and ` UseMutationRedirectOptions ` as the second
25
+
26
+ ``` tsx
27
+ import { useState } from ' react' ;
28
+ import { useMutationRedirect } from ' @joeyfigaro/use-mutation-redirect' ;
29
+ import { useNavigate } from ' react-router-dom' ;
30
+
31
+ const Login = () => {
32
+ const [username, setUsername] = useState ();
33
+ const [password, setPassword] = useState ();
34
+ const navigate = useNavigate ();
35
+ const authenticate = useMutationRedirect (
36
+ {
37
+ mutationFn : async () => {
38
+ try {
39
+ // handle your fetching...
40
+ } catch (error ) {
41
+ throw new AuthenticationError (error );
42
+ }
43
+ },
44
+ retry: 3 ,
45
+ },
46
+ {
47
+ to: ' /forgot-password' ,
48
+ navigateFn: navigate ,
49
+ // redirect user to forgot password view if a mutation fails 3 times
50
+ trigger : (mutation ) => mutation .isError && mutation .failureCount >= 3 ,
51
+ },
52
+ );
53
+
54
+ return (
55
+ <button onClick = { () => authenticate .mutate ({ username , password })} >
56
+ Authenticate
57
+ </button >
58
+ );
59
+ };
60
+ ```
61
+
62
+ ## Why?
63
+
64
+ I got tired of rewriting the same post-mutation redirect logic over and over and over.
16
65
17
66
## License
18
67
0 commit comments