React 查询 - 身份验证流程

心已赠人 2023-09-26 21:26 151阅读 0赞

React 查询 - 身份验证流程  
React 查询（6 部分系列）  
1个  
反应查询 - useQuery  
2个  
反应查询 - useMutation  
…  
还有2个零件…  
5个  
React 查询 - 身份验证流程  
6个  
React Query - 过滤你的数据  
每个应用程序都应该处理身份验证流程；在本文中，您将了解如何使用 React Query 在 React 应用程序中构建身份验证流程。

报名  
构建身份验证流程的第一步是注册操作。正如您在本系列中已经了解到的那样，您应该构建一个变异来执行此操作。一个可能的解决方案可能是这个  
async function signUp(email: string, password: string): Promise \{  
const response = await fetch(‘/api/auth/signup’, \{  
method: ‘POST’,  
headers: \{  
‘Content-Type’: ‘application/json’  
\},  
body: JSON.stringify(\{ email, password \})  
\})  
if (!response.ok)  
throw new ResponseError(‘Failed on sign up request’, response);

return await response.json();  
\}

type IUseSignUp = UseMutateFunction<User, unknown, \{  
email: string;  
password: string;  
\}, unknown>

export function useSignUp(): IUseSignUp \{  
const queryClient = useQueryClient();  
const navigate = useNavigate();  
const \{ enqueueSnackbar \} = useSnackbar();

const \{ mutate: signUpMutation \} = useMutation<User, unknown, \{ email: string, password: string \}, unknown>(  
(\{  
email,  
password  
\}) => signUp(email, password), \{  
onSuccess: (data) => \{  
// TODO: save the user in the state  
navigate(‘/’);  
\},  
onError: (error) => \{  
enqueueSnackbar(‘Ops… Error on sign up. Try again!’, \{  
variant: ‘error’  
\});  
\}  
\});

return signUpMutation  
\}\`\`  
通过创建这样的突变，您可以以一种非常简单明了的方式构建注册。

现在使用useSignUp钩子，您可以获得突变并调用注册请求以在您的系统中创建一个新用户。正如您所注意到的，代码非常简单；该signUp方法调用 API 发布新用户的数据并返回保存在数据库中的用户数据。然后使用useMutation挂钩，您可以构建突变来