React 查询 - 身份验证流程

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挂钩，您可以构建突变来处理