IsLoading not refreshed to newest value react-query

huangapple
go评论99阅读模式
英文:

IsLoading not refreshed to newest value react-query

问题

  1. 我对在 react-query 中使用 useMutate 有一个问题。
  3. 我对 post 请求的逻辑如下（目前正在使用模拟的逻辑）
  4. ```typescript
  5. const loginWithEmailAndPassword = async (
  6.   params: LoginRequest
  7. ): Promise<AuthResponse> => {
  8.   const payload = JSON.stringify(params);
  9.   const response = await axios.post(LOGIN_URL, payload);
  10.   return response.data;
  11. };
  13. const mockLoginWithEmailAndPassword = async (
  14.   params: LoginRequest
  15. ): Promise<AuthResponse> => {
  16.   params;
  17.   console.log(params);
  18.   await delay(3);
  19.   return {
  20.     authToken: 'login_auth_token',
  21.     refreshToken: 'login_auth_refresh_token',
  22.     companyId: '1',
  23.     role: 'company',
  24.   };
  25. };
  27. const fn = selectBasedOnMock(
  28.   mockLoginWithEmailAndPassword,
  29.   loginWithEmailAndPassword
  30. );
  32. export const useLogin = () => {
  33.   return useMutation({
  34.     mutationFn: (params: LoginRequest) => fn(params),
  35.   });
  36. };

当我在 LoginForm 组件中执行此 mutation 以登录时，loginMutation.isSuccess 属性在请求完成后被设置为 'false'，只有在我再次按下按钮后，isSuccess 属性才会被设置为 'true'，并且其中的语句才会执行

  1. const handleButtonClick = async () => {
  2.     const params = { email, password };
  3.     await loginMutation.mutateAsync(params);
  5.     if (loginMutation.isSuccess) {
  6.       setCompanyId(loginMutation.data.companyId);
  7.       storage.setToken(loginMutation.data.authToken);
  8.       setUserRole(loginMutation.data.role);
  9.     }
  10.   };

我在这里做错了什么？如何确保我获得 isSuccess 的最新值并执行所需的更新？

这是我初始化 mutation 的方式

  1. const loginMutation = useLogin()
  2. <details>
  3. <summary>英文:</summary>
  5. I have a question regarding the usage of useMutate in react-query.
  7. I have the following logic for post requests (currently it&#39;s using the mocked one)

const loginWithEmailAndPassword = async (
params: LoginRequest
): Promise<AuthResponse> => {
const payload = JSON.stringify(params);
const response = await axios.post(LOGIN_URL, payload);
return response.data;
};

const mockLoginWithEmailAndPassword = async (
params: LoginRequest
): Promise<AuthResponse> => {
params;
console.log(params);
await delay(3);
return {
authToken: 'login_auth_token',
refreshToken: 'login_auth_refresh_token',
companyId: '1',
role: 'company',
};
};

const fn = selectBasedOnMock(
mockLoginWithEmailAndPassword,
loginWithEmailAndPassword
);

export const useLogin = () => {
return useMutation({
mutationFn: (params: LoginRequest) => fn(params),
});
};

  2. When i perform this mutation in the LoginForm component while clicking on login, the loginMutation.isSuccess property is set to &#39;false&#39; even after the request is completed, and only after i press the button again, the isSuccess property is set to &#39;true&#39; and the statements inside of it get executed

const handleButtonClick = async () => {
const params = { email, password };
await loginMutation.mutateAsync(params);

  1. if (loginMutation.isSuccess) {
  2.   setCompanyId(loginMutation.data.companyId);
  3.   storage.setToken(loginMutation.data.authToken);
  4.   setUserRole(loginMutation.data.role);
  5. }

};

  1. What am i doing wrong here? How to ensure that i get the freshest value of isSuccess and perform the required updates?
  3. This is how i initialize the mutation

const loginMutation = useLogin()

  2. </details>
  5. # 答案1
  6. **得分**: 1

阅读完文档后，特别是这个资源：
https://tkdodo.eu/blog/mastering-mutations-in-react-query

我找到了解决方案：

  1. const handleButtonClick = () =&gt; {
  2.     const params = { email, password };
  3.     loginMutation.mutate(params, {
  4.       onSuccess: (data) =&gt; {
  5.         setCompanyId(data.companyId);
  6.         storage.setToken(data.authToken);
  7.         setUserRole(data.role);
  8.       },
  9.     });
  10.   };
英文:

After reading through the docs, and particularly this resource:
https://tkdodo.eu/blog/mastering-mutations-in-react-query

I found the solution:

  1. const handleButtonClick = () =&gt; {
  2.     const params = { email, password };
  3.     loginMutation.mutate(params, {
  4.       onSuccess: (data) =&gt; {
  5.         setCompanyId(data.companyId);
  6.         storage.setToken(data.authToken);
  7.         setUserRole(data.role);
  8.       },
  9.     });
  10.   };

huangapple
  • 本文由 发表于 2023年6月22日 00:14:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76525279.html
  • react-query
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定