544 migrate to react query v4 (#547)

* Update all imports

* Update isLoading

* Update onlineManager

package.json

@@ -41,6 +41,7 @@
     "@reduxjs/toolkit": "^1.9.1",
     "@sentry/react-native": "4.10.1",
     "@sharcoux/slider": "^6.1.1",
+    "@tanstack/react-query": "^4.19.1",
     "axios": "^0.27.2",
     "expo": "^47.0.8",
     "expo-auth-session": "^3.7.3",
@@ -89,7 +90,6 @@
     "react-native-svg": "^13.6.0",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.3.2",
-    "react-query": "^3.39.2",
     "react-redux": "^8.0.5",
     "redux-persist": "^6.0.0",
     "rn-placeholder": "^3.0.3",

src/App.tsx

@@ -23,7 +23,7 @@ import { LogBox, Platform } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { enableFreeze } from 'react-native-screens'
-import { QueryClientProvider } from 'react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 

src/components/Relationship/Incoming.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   id: Mastodon.Account['id']

src/components/Relationship/Outgoing.tsx

@@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   id: Mastodon.Account['id']

src/components/Timeline/Conversation.tsx

@@ -8,7 +8,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback } from 'react'
 import { Pressable, View } from 'react-native'
-import { useMutation, useQueryClient } from 'react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import TimelineActions from './Shared/Actions'
 import TimelineContent from './Shared/Content'
 import StatusContext from './Shared/Context'

src/components/Timeline/Refresh.tsx

@@ -20,7 +20,7 @@ import Animated, {
   useSharedValue,
   withTiming
 } from 'react-native-reanimated'
-import { InfiniteData, useQueryClient } from 'react-query'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 
 export interface Props {
   flRef: RefObject<FlatList<any>>

src/components/Timeline/Shared/Actions.tsx

@@ -17,7 +17,7 @@ import { uniqBy } from 'lodash'
 import React, { useCallback, useContext, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 import StatusContext from './Context'
 

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import StatusContext from './Context'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'

src/components/Timeline/Shared/Poll.tsx

@@ -16,7 +16,7 @@ import { maxBy } from 'lodash'
 import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import StatusContext from './Context'
 
 const TimelinePoll: React.FC = () => {

src/components/Timeline/Shared/Translate.tsx

@@ -56,7 +56,7 @@ const TimelineTranslate = () => {
     : settingsLanguage || Localization.locale || 'en'
 
   const [enabled, setEnabled] = useState(false)
-  const { refetch, data, isLoading, isSuccess, isError } = useTranslateQuery({
+  const { refetch, data, isFetching, isSuccess, isError } = useTranslateQuery({
     source: detectedLanguage.language,
     target: targetLanguage,
     text,
@@ -111,7 +111,7 @@ const TimelineTranslate = () => {
         <CustomText
           fontStyle='M'
           style={{
-            color: isLoading || isSuccess ? colors.secondary : isError ? colors.red : colors.blue
+            color: isFetching || isSuccess ? colors.secondary : isError ? colors.red : colors.blue
           }}
         >
           {isError
@@ -125,7 +125,7 @@ const TimelineTranslate = () => {
                 })
             : t('shared.translate.default')}
         </CustomText>
-        {isLoading ? (
+        {isFetching ? (
           <Circle
             size={StyleConstants.Font.Size.M}
             color={colors.disabled}

src/components/contextMenu/account.ts

@@ -17,7 +17,7 @@ import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Platform } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuAccount = ({

src/components/contextMenu/instance.ts

@@ -3,7 +3,7 @@ import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timelin
 import { getInstanceUrl } from '@utils/slices/instancesSlice'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuInstance = ({

src/components/contextMenu/status.ts

@@ -12,7 +12,7 @@ import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instance
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const menuStatus = ({

src/helpers/queryClient.ts

@@ -1,4 +1,4 @@
-import { QueryClient } from 'react-query'
+import { QueryClient } from '@tanstack/react-query'
 
 const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5 } } })
 

src/screens/Actions/NotificationsFilter.tsx

@@ -12,7 +12,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useAppDispatch } from '@root/store'
 

src/screens/Compose.tsx

@@ -22,7 +22,7 @@ import { filter } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Keyboard, Platform } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 import ComposeDraftsList from './Compose/DraftsList'
 import ComposeEditAttachment from './Compose/EditAttachment'

src/screens/Compose/utils/processText.tsx

@@ -1,7 +1,6 @@
 import LinkifyIt from 'linkify-it'
 import { debounce, differenceWith, isEqual } from 'lodash'
 import React, { Dispatch } from 'react'
-import { FetchOptions } from 'react-query/types/core/query'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ComposeAction, ComposeState } from './types'
 import { instanceConfigurationStatusCharsURL } from '../Root'
@@ -12,7 +11,6 @@ export interface Params {
   textInput: ComposeState['textInputFocus']['current']
   composeDispatch: Dispatch<ComposeAction>
   content: string
-  refetch?: (options?: FetchOptions | undefined) => Promise<any>
   disableDebounce?: boolean
 }
 

src/screens/Tabs/Me/List/Edit.tsx

@@ -13,7 +13,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Platform, ScrollView, TextInput } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 
 const TabMeListEdit: React.FC<TabMeStackScreenProps<'Tab-Me-List-Edit'>> = ({
   navigation,

src/screens/Tabs/Me/List/index.tsx

@@ -9,7 +9,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import * as DropdownMenu from 'zeego/dropdown-menu'
 import { menuListAccounts, menuListDelete, menuListEdit } from './menus'
 

src/screens/Tabs/Me/List/menus.tsx

@@ -1,7 +1,7 @@
 import navigationRef from '@helpers/navigationRef'
 import i18next from 'i18next'
 import { Alert } from 'react-native'
-import { UseMutationResult } from 'react-query'
+import { UseMutationResult } from '@tanstack/react-query'
 
 export const menuListAccounts = ({ params }: { params: Mastodon.List }) => ({
   key: 'list-accounts',

src/screens/Tabs/Me/Profile/Root.tsx

@@ -21,7 +21,7 @@ const TabMeProfileRoot: React.FC<
 
   const { showActionSheetWithOptions } = useActionSheet()
 
-  const { data, isLoading } = useProfileQuery()
+  const { data, isFetching } = useProfileQuery()
   const { mutateAsync } = useProfileMutation()
   const dispatch = useAppDispatch()
 
@@ -31,7 +31,7 @@ const TabMeProfileRoot: React.FC<
         <MenuRow
           title={t('me.profile.root.name.title')}
           content={data?.display_name}
-          loading={isLoading}
+          loading={isFetching}
           iconBack='ChevronRight'
           onPress={() => {
             data &&
@@ -45,7 +45,7 @@ const TabMeProfileRoot: React.FC<
         <MenuRow
           title={t('me.profile.root.note.title')}
           content={data?.source.note}
-          loading={isLoading}
+          loading={isFetching}
           iconBack='ChevronRight'
           onPress={() => {
             data &&
@@ -63,7 +63,7 @@ const TabMeProfileRoot: React.FC<
                 })
               : undefined
           }
-          loading={isLoading}
+          loading={isFetching}
           iconBack='ChevronRight'
           onPress={() => {
             navigation.navigate('Tab-Me-Profile-Fields', {
@@ -80,7 +80,7 @@ const TabMeProfileRoot: React.FC<
               ? t(`me.profile.root.visibility.options.${data?.source.privacy}`)
               : undefined
           }
-          loading={isLoading}
+          loading={isFetching}
           iconBack='ChevronRight'
           onPress={() =>
             showActionSheetWithOptions(
@@ -138,7 +138,7 @@ const TabMeProfileRoot: React.FC<
               data: data?.source.sensitive === undefined ? true : !data.source.sensitive
             }).then(() => dispatch(updateAccountPreferences()))
           }
-          loading={isLoading}
+          loading={isFetching}
         />
       </MenuContainer>
       <MenuContainer>
@@ -158,7 +158,7 @@ const TabMeProfileRoot: React.FC<
               data: data?.locked === undefined ? true : !data.locked
             })
           }
-          loading={isLoading}
+          loading={isFetching}
         />
         <MenuRow
           title={t('me.profile.root.bot.title')}
@@ -176,7 +176,7 @@ const TabMeProfileRoot: React.FC<
               data: data?.bot === undefined ? true : !data.bot
             })
           }
-          loading={isLoading}
+          loading={isFetching}
         />
       </MenuContainer>
     </ScrollView>

src/screens/Tabs/Me/Profile/Root/AvatarHeader.tsx

@@ -24,17 +24,14 @@ const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
     <MenuRow
       title={t(`me.profile.root.${type}.title`)}
       description={t(`me.profile.root.${type}.description`)}
-      loading={query.isLoading || mutation.isLoading}
+      loading={query.isFetching || mutation.isLoading}
       iconBack='ChevronRight'
       onPress={async () => {
         const image = await mediaSelector({
           mediaType: 'photo',
           maximum: 1,
           showActionSheetWithOptions,
-          resize:
-            type === 'avatar'
-              ? { width: 400, height: 400 }
-              : { width: 1500, height: 500 }
+          resize: type === 'avatar' ? { width: 400, height: 400 } : { width: 1500, height: 500 }
         })
         if (image[0].uri) {
           mutation.mutate({

src/screens/Tabs/Me/Root/Logout.tsx

@@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert } from 'react-native'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useSelector } from 'react-redux'
 
 const Logout: React.FC = () => {

src/screens/Tabs/Shared/Account.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Text, View } from 'react-native'
 import { useSharedValue } from 'react-native-reanimated'
-import { useIsFetching } from 'react-query'
+import { useIsFetching } from '@tanstack/react-query'
 import * as DropdownMenu from 'zeego/dropdown-menu'
 import AccountAttachments from './Account/Attachments'
 import AccountHeader from './Account/Header'

src/screens/Tabs/Shared/Search/Empty.tsx

@@ -10,12 +10,12 @@ import { StyleSheet, TextInput, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
-  isLoading: boolean
+  isFetching: boolean
   inputRef: React.RefObject<TextInput>
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>
 }
 
-const SearchEmpty: React.FC<Props> = ({ isLoading, inputRef, setSearchTerm }) => {
+const SearchEmpty: React.FC<Props> = ({ isFetching, inputRef, setSearchTerm }) => {
   const { colors } = useTheme()
   const { t } = useTranslation('screenTabs')
 
@@ -23,7 +23,7 @@ const SearchEmpty: React.FC<Props> = ({ isLoading, inputRef, setSearchTerm }) =>
 
   return (
     <View style={{ paddingVertical: StyleConstants.Spacing.Global.PagePadding }}>
-      {isLoading ? (
+      {isFetching ? (
         <View style={{ flex: 1, alignItems: 'center' }}>
           <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
         </View>

src/screens/Tabs/Shared/Search/index.tsx

@@ -84,7 +84,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
     hashtags: t('shared.search.sections.hashtags'),
     statuses: t('shared.search.sections.statuses')
   }
-  const { isLoading, data, refetch } = useSearchQuery<
+  const { isFetching, data, refetch } = useSearchQuery<
     {
       title: string
       translation: string
@@ -138,7 +138,7 @@ const TabSharedSearch: React.FC<TabSharedStackScreenProps<'Tab-Shared-Search'>>
         }}
         stickySectionHeadersEnabled
         ListEmptyComponent={
-          <SearchEmpty isLoading={isLoading} inputRef={inputRef} setSearchTerm={setSearchTerm} />
+          <SearchEmpty isFetching={isFetching} inputRef={inputRef} setSearchTerm={setSearchTerm} />
         }
         keyboardShouldPersistTaps='always'
         renderSectionHeader={({ section: { translation } }) => (

src/screens/Tabs/Shared/Toot.tsx

@@ -6,7 +6,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList } from 'react-native'
-import { InfiniteQueryObserver, useQueryClient } from 'react-query'
+import { InfiniteQueryObserver, useQueryClient } from '@tanstack/react-query'
 
 const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   navigation,

src/startup/netInfo.ts

@@ -3,7 +3,7 @@ import NetInfo from '@react-native-community/netinfo'
 import { store } from '@root/store'
 import removeInstance from '@utils/slices/instances/remove'
 import { getInstance, updateInstanceAccount } from '@utils/slices/instancesSlice'
-import { onlineManager } from 'react-query'
+import { onlineManager } from '@tanstack/react-query'
 import log from './log'
 
 const netInfo = async (): Promise<{
@@ -17,7 +17,7 @@ const netInfo = async (): Promise<{
 
   onlineManager.setEventListener(setOnline => {
     return NetInfo.addEventListener(state => {
-      setOnline(typeof state.isConnected === 'boolean' ? state.isConnected : undefined)
+      setOnline(!!state.isConnected)
     })
   })
 

src/utils/queryHooks/account.ts

@@ -1,16 +1,17 @@
 import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeyAccount = ['Account', { id: Mastodon.Account['id'] }]
 
-const accountQueryFunction = ({ queryKey }: QueryFunctionContext<QueryKeyAccount>) => {
+const accountQueryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyAccount>) => {
   const { id } = queryKey[1]
 
-  return apiInstance<Mastodon.Account>({
+  const res = await apiInstance<Mastodon.Account>({
     method: 'get',
     url: `accounts/${id}`
-  }).then(res => res.body)
+  })
+  return res.body
 }
 
 const useAccountQuery = ({
@@ -27,15 +28,16 @@ const useAccountQuery = ({
 
 export type QueryKeyAccountInLists = ['AccountInLists', { id: Mastodon.Account['id'] }]
 
-const accountInListsQueryFunction = ({
+const accountInListsQueryFunction = async ({
   queryKey
 }: QueryFunctionContext<QueryKeyAccountInLists>) => {
   const { id } = queryKey[1]
 
-  return apiInstance<Mastodon.List[]>({
+  const res = await apiInstance<Mastodon.List[]>({
     method: 'get',
     url: `accounts/${id}/lists`
-  }).then(res => res.body)
+  })
+  return res.body
 }
 
 const useAccountInListsQuery = ({

src/utils/queryHooks/announcement.ts

@@ -6,16 +6,16 @@ import {
   UseMutationOptions,
   useQuery,
   UseQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 type QueryKeyAnnouncement = ['Announcements', { showAll?: boolean }]
 
-const queryFunction = ({
+const queryFunction = async ({
   queryKey
 }: QueryFunctionContext<QueryKeyAnnouncement>) => {
   const { showAll } = queryKey[1]
 
-  return apiInstance<Mastodon.Announcement[]>({
+  const res = await apiInstance<Mastodon.Announcement[]>({
     method: 'get',
     url: `announcements`,
     ...(showAll && {
@@ -23,7 +23,8 @@ const queryFunction = ({
         with_dismissed: 'true'
       }
     })
-  }).then(res => res.body)
+  })
+  return res.body
 }
 
 const useAnnouncementQuery = ({

src/utils/queryHooks/apps.ts

@@ -8,7 +8,7 @@ import {
   UseMutationOptions,
   useQuery,
   UseQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 export type QueryKeyApps = ['Apps']
 

src/utils/queryHooks/emojis.ts

@@ -1,6 +1,6 @@
 import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
-import { useQuery, UseQueryOptions } from 'react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 type QueryKeyEmojis = ['Emojis']
 

src/utils/queryHooks/instance.ts

@@ -1,6 +1,6 @@
 import apiGeneral from '@api/general'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeyInstance = ['Instance', { domain?: string }]
 

src/utils/queryHooks/lists.ts

@@ -8,7 +8,7 @@ import {
   UseMutationOptions,
   useQuery,
   UseQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 export type QueryKeyLists = ['Lists']
 

src/utils/queryHooks/profile.ts

@@ -6,7 +6,7 @@ import { AxiosError } from 'axios'
 import i18next from 'i18next'
 import { RefObject } from 'react'
 import FlashMessage from 'react-native-flash-message'
-import { useMutation, useQuery, UseQueryOptions } from 'react-query'
+import { useMutation, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 type AccountWithSource = Mastodon.Account & Required<Pick<Mastodon.Account, 'source'>>
 

src/utils/queryHooks/relationship.ts

@@ -6,25 +6,26 @@ import {
   UseMutationOptions,
   useQuery,
   UseQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 export type QueryKeyRelationship = [
   'Relationship',
   { id: Mastodon.Account['id'] }
 ]
 
-const queryFunction = ({
+const queryFunction = async ({
   queryKey
 }: QueryFunctionContext<QueryKeyRelationship>) => {
   const { id } = queryKey[1]
 
-  return apiInstance<Mastodon.Relationship[]>({
+  const res = await apiInstance<Mastodon.Relationship[]>({
     method: 'get',
     url: `accounts/relationships`,
     params: {
       'id[]': id
     }
-  }).then(res => res.body)
+  })
+  return res.body
 }
 
 const useRelationshipQuery = ({

src/utils/queryHooks/search.ts

@@ -1,6 +1,6 @@
 import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeySearch = [
   'Search',

src/utils/queryHooks/status.ts

@@ -1,16 +1,17 @@
 import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeyStatus = ['Status', { id: Mastodon.Status['id'] }]
 
-const queryFunction = ({ queryKey }: QueryFunctionContext<QueryKeyStatus>) => {
+const queryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyStatus>) => {
   const { id } = queryKey[1]
 
-  return apiInstance<Mastodon.Status>({
+  const res = await apiInstance<Mastodon.Status>({
     method: 'get',
     url: `statuses/${id}`
-  }).then(res => res.body)
+  })
+  return res.body
 }
 
 const useStatusQuery = ({

src/utils/queryHooks/statusesHistory.ts

@@ -1,6 +1,6 @@
 import apiInstance from '@api/instance'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeyStatusesHistory = [
   'StatusesHistory',

src/utils/queryHooks/tags.ts

@@ -6,7 +6,7 @@ import {
   UseMutationOptions,
   useQuery,
   UseQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 type QueryKeyFollowedTags = ['FollowedTags']
 const useFollowedTagsQuery = ({
@@ -27,10 +27,11 @@ const useFollowedTagsQuery = ({
 }
 
 type QueryKeyTags = ['Tags', { tag: string }]
-const queryFunction = ({ queryKey }: QueryFunctionContext<QueryKeyTags>) => {
+const queryFunction = async ({ queryKey }: QueryFunctionContext<QueryKeyTags>) => {
   const { tag } = queryKey[1]
 
-  return apiInstance<Mastodon.Tag>({ method: 'get', url: `tags/${tag}` }).then(res => res.body)
+  const res = await apiInstance<Mastodon.Tag>({ method: 'get', url: `tags/${tag}` })
+  return res.body
 }
 const useTagsQuery = ({
   options,

src/utils/queryHooks/timeline.ts

@@ -11,7 +11,7 @@ import {
   useInfiniteQuery,
   UseInfiniteQueryOptions,
   useMutation
-} from 'react-query'
+} from '@tanstack/react-query'
 import deleteItem from './timeline/deleteItem'
 import editItem from './timeline/editItem'
 import updateStatusProperty from './timeline/updateStatusProperty'

src/utils/queryHooks/timeline/deleteItem.ts

@@ -1,5 +1,5 @@
 import queryClient from '@helpers/queryClient'
-import { InfiniteData } from 'react-query'
+import { InfiniteData } from '@tanstack/react-query'
 import { MutationVarsTimelineDeleteItem } from '../timeline'
 
 const deleteItem = ({

src/utils/queryHooks/timeline/editItem.ts

@@ -1,5 +1,5 @@
 import queryClient from '@helpers/queryClient'
-import { InfiniteData } from 'react-query'
+import { InfiniteData } from '@tanstack/react-query'
 import { MutationVarsTimelineEditItem } from '../timeline'
 
 const editItem = ({

src/utils/queryHooks/timeline/updateStatusProperty.ts

@@ -1,5 +1,5 @@
 import queryClient from '@helpers/queryClient'
-import { InfiniteData } from 'react-query'
+import { InfiniteData } from '@tanstack/react-query'
 import { MutationVarsTimelineUpdateStatusProperty, TimelineData } from '../timeline'
 import updateConversation from './update/conversation'
 import updateNotification from './update/notification'

src/utils/queryHooks/translate.ts

@@ -1,7 +1,7 @@
 import apiTooot from '@api/tooot'
 import haptics from '@components/haptics'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 type Translations =
   | {

src/utils/queryHooks/trends.ts

@@ -2,7 +2,7 @@ import apiInstance from '@api/instance'
 import { store } from '@root/store'
 import { checkInstanceFeature } from '@utils/slices/instancesSlice'
 import { AxiosError } from 'axios'
-import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
+import { QueryFunctionContext, useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 export type QueryKeyTrends = ['Trends', { type: 'tags' | 'statuses' | 'links' }]
 

src/utils/queryHooks/users.ts

@@ -5,7 +5,7 @@ import {
   QueryFunctionContext,
   useInfiniteQuery,
   UseInfiniteQueryOptions
-} from 'react-query'
+} from '@tanstack/react-query'
 
 export type QueryKeyUsers = [
   'Users',