🚧(frontend) migrate to react-query v4 & react 18 #1812
Conversation
a786d0e to
a0bc91c
Compare
|
BUG:
|
|
BUG: Steps to reproduce
NoteThis bug has been reported before the upgrade by @NamFra, but I have never be able to reproduce it. |
75c0da8 to
a8bdb89
Compare
| @@ -1,4 +1,4 @@ | |||
| import { FC, useMemo } from 'react'; | |||
There was a problem hiding this comment.
Just a global remark. When you import a type try to prefix it with type. It can help to speed up build by ignoring all types import.
| import { FC, useMemo } from 'react'; | |
| import { type PropsWithChildren, useMemo } from 'react'; |
There was a problem hiding this comment.
As PropsWithChildren is already exported as a type isn't it unuseful ?
There was a problem hiding this comment.
As I read in this article https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb it says: Note that you can also use “export type” to indicate that some export will only ever be used as a type annotation/declaration.
But indeed if you have "official" documentation resources for this particular point I will be really interested 🙏
There was a problem hiding this comment.
Even https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export states This feature is something most users may never have to think about; however, if you’ve hit issues under [isolatedModules](https://www.typescriptlang.org/tsconfig#isolatedModules), TypeScript’s transpileModule API, or Babel, this feature might be relevant. so do we really need to put import type ?
a8bdb89 to
1e12ea1
Compare
update all required dependencies to support react 18.
react 18 forces to explicitly name the `children` attribute so let's update components and hooks.
165d6e2 to
cbbfc22
Compare
4eb9dc7 to
5eb4d51
Compare
most of the tests broke due to the changes induced by the new rendering behavior of react 18 and react-query v4, so we changed the approach that we had with tests to an approach more based on `waitFor` in order to have tests the most render-agnostic as possible.
This bug was occuring when clicking on the button "Login to purchase" causing a removal of existing react-query queries. This was caused by premature removal of the pending useCourse query which was never notified that it had been removed during its loading, resulting in an infinite loading state.
5eb4d51 to
6655ab7
Compare
Purpose
Until now, we cannot upgrade to React 18 due to an incompatibility with react-query v3. React query v4 has been released and add the support of React 18 that's mean we are now able to migrate our frontend codebase to React 18 ! 🎉
Proposal
createTestQueryClientWarning: ReactDOM.render is no longer supported in React 18is not problematic, please read Add support for React 18 storybookjs/storybook#17831 (comment)❌ Failed tests
Never surrender.
26/10 53 failed, 303 passed,
28/10 🔩 24 failed, 332 passed
31/10 ☠️ 18 failed, 338 passed
-> 03/10 All tests are fixed 😎