CHORE: Upgrade to React Query v5 (#136)

Closes #131 ## Description Upgrade `@tanstack/react-query` to v5 and migrate the breaking change
mazipan · Oct 30, 2023 · 0e2dedb · 0e2dedb
1 parent a3e919d
commit 0e2dedb
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sindresorhus/slugify": "^2.2.1",
-    "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query-devtools": "^5.4.3",
     "@types/node": "20.6.3",
     "@types/react": "18.2.27",
     "@types/react-dom": "18.2.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -28,8 +28,7 @@ export default function Account() {
   )
   const { isLogin, isLoading, user } = useAuth(auth)
 
-  // @ts-ignore
-  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user, {
+  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
     enabled: !isLoading && isLogin && !!user,
   })
 
@@ -38,14 +37,9 @@ export default function Account() {
     isLoading: isLoadingQuestions,
     fetchNextPage,
     isFetching,
-  } = useQuestionListPagination(
-    // @ts-ignore
-    user,
-    LIMIT,
-    {
-      enabled: !isLoading && isLogin && !!user,
-    },
-  )
+  } = useQuestionListPagination(user!, LIMIT, {
+    enabled: !isLoading && isLogin && !!user,
+  })
 
   const handleClickQuestion = (question: Question) => {
     setSelectedQuestion(question)

diff --git a/src/app/account/settings/notification/page.tsx b/src/app/account/settings/notification/page.tsx
@@ -15,15 +15,12 @@ const auth = getFirebaseAuth()
 export default function SettingOgImage() {
   const { isLogin, isLoading, user } = useAuth(auth)
 
-  // @ts-ignore
-  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user, {
+  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
     enabled: !isLoading && isLogin && !!user,
   })
 
-  // @ts-ignore
   const { data: dataNotifChannel, isLoading: isLoadingNotifChannel } =
-    // @ts-ignore
-    useNotifChannelByUser(user, {
+    useNotifChannelByUser(user!, {
       enabled: !isLoading && isLogin && !!user,
     })
 

diff --git a/src/app/account/settings/og-image/page.tsx b/src/app/account/settings/og-image/page.tsx
@@ -16,15 +16,12 @@ const auth = getFirebaseAuth()
 export default function SettingOgImage() {
   const { isLogin, isLoading, user } = useAuth(auth)
 
-  // @ts-ignore
-  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user, {
+  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
     enabled: !isLoading && isLogin && !!user,
   })
 
-  // @ts-ignore
   const { data: dataCustomOg, isLoading: isLoadingCustomOg } =
-    // @ts-ignore
-    useCustomOgByUser(user, {
+    useCustomOgByUser(user!, {
       enabled: !isLoading && isLogin && !!user,
     })
 

diff --git a/src/app/account/settings/page.tsx b/src/app/account/settings/page.tsx
@@ -76,12 +76,11 @@ export default function Account() {
   const dialog = useDialog()
   const { isLogin, isLoading, user } = useAuth(auth)
 
-  // @ts-ignore
-  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user, {
+  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
     enabled: !isLoading && isLogin && !!user,
   })
 
-  const { mutate: updateUser, isLoading: isSubmitting } = useUpdateUser()
+  const { mutate: updateUser, isPending: isSubmitting } = useUpdateUser()
 
   const form = useForm<FormValues>({
     resolver: valibotResolver(schema),

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -41,8 +41,7 @@ export function Header() {
   const router = useRouter()
   const { toast } = useToast()
   const { isLogin, user, isLoading } = useAuth(auth)
-  // @ts-ignore
-  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user, {
+  const { data: dataOwner, isLoading: isLoadingOwner } = useOwner(user!, {
     enabled: !isLoading && isLogin && !!user,
   })
 

diff --git a/src/components/PublicAccessToggler.tsx b/src/components/PublicAccessToggler.tsx
@@ -24,7 +24,7 @@ const PublicAccessToggler = ({
   const { toast } = useToast()
   const dialog = useDialog()
 
-  const { mutate, isLoading } = usePatchQuestionAsPublicOrPrivate()
+  const { mutate, isPending } = usePatchQuestionAsPublicOrPrivate()
 
   const hitMutation = async () => {
     trackEvent('click toggle public access')
@@ -64,10 +64,10 @@ const PublicAccessToggler = ({
       variant="outline"
       size="sm"
       className={question?.public ? '' : 'border-red-500'}
-      disabled={disabled ?? isLoading}
+      disabled={disabled ?? isPending}
       onClick={handleTogglePrivacy}
     >
-      {isLoading ? (
+      {isPending ? (
         <>
           <Loader2 className="mr-2 h-4 w-4 animate-spin" />
         </>

diff --git a/src/modules/AccountSettings/SettingNotif/SettingTelegram.tsx b/src/modules/AccountSettings/SettingNotif/SettingTelegram.tsx
@@ -54,9 +54,9 @@ export default function SettingTelegram({
   existing: NotifChannel[] | null | undefined
 }) {
   const { toast } = useToast()
-  const { mutate: mutateUpdateChannelNotif, isLoading: isLoadingUpdate } =
+  const { mutate: mutateUpdateChannelNotif, isPending: isLoadingUpdate } =
     usePatchUpdateChannelNotif()
-  const { mutate: mutateAddNewChannelNotif, isLoading: isLoadingAdd } =
+  const { mutate: mutateAddNewChannelNotif, isPending: isLoadingAdd } =
     usePostAddNewChannelNotif()
 
   const form = useForm<FormValues>({

diff --git a/src/modules/AccountSettings/SettingOg/SimpleMode.tsx b/src/modules/AccountSettings/SettingOg/SimpleMode.tsx
@@ -50,9 +50,9 @@ export default function SimpleMode({
 }) {
   const [activeGradient, setActiveGradient] = useState<string>('hyper')
   const { toast } = useToast()
-  const { mutate: addNewOgMutation, isLoading: isAddingNewCustomOg } =
+  const { mutate: addNewOgMutation, isPending: isAddingNewCustomOg } =
     useAddNewCustomOg()
-  const { mutate: updateCustomOgMutation, isLoading: isUpdatingCustomOg } =
+  const { mutate: updateCustomOgMutation, isPending: isUpdatingCustomOg } =
     useUpdateCustomOg()
 
   const isSubmitting = isAddingNewCustomOg || isUpdatingCustomOg

diff --git a/src/modules/EskplorPage/ContentPublicUserList.tsx b/src/modules/EskplorPage/ContentPublicUserList.tsx
@@ -16,7 +16,7 @@ const ContentPublicUserList = () => {
     isFetching,
     isFetchingNextPage,
     fetchNextPage,
-    isInitialLoading,
+    isLoading,
   } = useGetPublicUser({
     limit: 20,
     name,
@@ -28,7 +28,7 @@ const ContentPublicUserList = () => {
       <PublicUserList
         dataPublicUsers={dataPublicUsers}
         isFetching={isFetchingNextPage}
-        isInitialLoading={isInitialLoading}
+        isInitialLoading={isLoading}
       />
 
       <div className="w-full justify-center flex mt-4">

diff --git a/src/modules/LoginPage/LoginButton.tsx b/src/modules/LoginPage/LoginButton.tsx
@@ -79,7 +79,7 @@ export const LoginButtonWithRedirect = () => {
 
         postAddUser(user).then((result) => {
           if (result.isNewUser) {
-            queryClient.refetchQueries(['/owner', user.uid])
+            queryClient.refetchQueries({ queryKey: ['/owner', user.uid] })
           }
         })
       })

diff --git a/src/modules/PublicQuestionPage/QuestionForm.tsx b/src/modules/PublicQuestionPage/QuestionForm.tsx
@@ -47,7 +47,7 @@ type FormValues = Output<typeof schema>
 
 export function QuestionForm({ owner }: { owner: UserProfile }) {
   const { toast } = useToast()
-  const { mutate, isLoading } = useSendQuestion()
+  const { mutate, isPending } = useSendQuestion()
 
   const form = useForm<FormValues>({
     resolver: valibotResolver(schema),
@@ -154,8 +154,8 @@ export function QuestionForm({ owner }: { owner: UserProfile }) {
             )}
           />
           <div className="flex flex-wrap justify-between gap-2">
-            <Button type="submit" disabled={isLoading}>
-              {isLoading ? (
+            <Button type="submit" disabled={isPending}>
+              {isPending ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   <span>Sedang mengirim...</span>