https://github.com/joeyfigaro/use-mutation-redirect
React hook for tanstack-query for redirecting on mutation result
https://github.com/joeyfigaro/use-mutation-redirect
hooks mutations navigation react reactjs redirection tanstack-query
Last synced: about 1 year ago
JSON representation
React hook for tanstack-query for redirecting on mutation result
- Host: GitHub
- URL: https://github.com/joeyfigaro/use-mutation-redirect
- Owner: joeyfigaro
- License: mit
- Created: 2025-03-21T18:02:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-21T21:22:03.000Z (about 1 year ago)
- Last Synced: 2025-03-21T21:24:43.645Z (about 1 year ago)
- Topics: hooks, mutations, navigation, react, reactjs, redirection, tanstack-query
- Language: TypeScript
- Homepage: https://github.com/joeyfigaro/use-mutation-redirect
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @joeyfigaro/use-mutation-redirect
## Installing
```shell
npm i @joeyfigaro/use-mutation-redirect
pnpm add @joeyfigaro/use-mutation-redirect
yarn add @joeyfigaro/use-mutation-redirect
```
## Requirements
- `react` + `react-dom` `v18.*`
- `@tanstack/react-query` `v5.*` (created using v5.69.0)
I plan to offer support for older versions of React and RQ (TQ?)
## Quickstart
1. import `useMutationRedirect`
2. use it in place of `useMutation`
3. provide options for `useMutation` as the first argument, and [`UseMutationRedirectOptions`](https://github.com/joeyfigaro/use-mutation-redirect/blob/main/src/lib/useMutationRedirect.ts#L12-L67) as the second
```tsx
import { useState } from 'react';
import { useMutationRedirect } from '@joeyfigaro/use-mutation-redirect';
import { useNavigate } from 'react-router-dom';
const Login = () => {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const navigate = useNavigate();
const authenticate = useMutationRedirect(
{
mutationFn: async () => {
try {
// handle your fetching...
} catch (error) {
throw new AuthenticationError(error);
}
},
retry: 3,
},
{
to: '/forgot-password',
navigateFn: navigate,
// redirect user to forgot password view if a mutation fails 3 times
trigger: (mutation) => mutation.isError && mutation.failureCount >= 3,
},
);
return (
authenticate.mutate({ username, password })}>
Authenticate
);
};
```
## Why?
I got tired of rewriting the same post-mutation redirect logic over and over and over.
## License
MIT © [joeyfigaro](https://github.com/sponsors/joeyfigaro)