feat: upgrade ReactQuery to v5 (obytes#316)

Author: DanielMarkiel

docs/src/content/docs/guides/data-fetching.mdx

@@ -122,7 +122,7 @@ Exactly the same way we did in [form section](../ui-and-theme/Forms.mdx) while c
 1. Create the schema for the new form using Zod
 2. Create the form using react-hook-form
 3. Get `mutate` function from `useAddPost` hook and call it when the form is submitted
-4. You can use the `isLoading` state to display a loading indicator while the data is being sent to the server and then redirect the user to the feed screen on success.
+4. You can use the `isPending` state to display a loading indicator while the data is being sent to the server and then redirect the user to the feed screen on success.
 
 <CodeBlock file="src/app/feed/add-post.tsx" />
 

ios/ObytesApp.xcodeproj/project.pbxproj

@@ -366,7 +366,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.obytes.development;
-				PRODUCT_NAME = "ObytesApp";
+				PRODUCT_NAME = ObytesApp;
 				SWIFT_OBJC_BRIDGING_HEADER = "ObytesApp/ObytesApp-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -394,7 +394,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.obytes.development;
-				PRODUCT_NAME = "ObytesApp";
+				PRODUCT_NAME = ObytesApp;
 				SWIFT_OBJC_BRIDGING_HEADER = "ObytesApp/ObytesApp-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/Podfile.lock

@@ -1559,8 +1559,8 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: af09429398d99d524cae2fe00f6f0f6e491ed102
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  Yoga: d17d2cc8105eed528474683b42e2ea310e1daf61
+  Yoga: 805bf71192903b20fc14babe48080582fee65a80
 
 PODFILE CHECKSUM: ac55d8c0b92af1b0a5da5f8cb8448313ecc7948e
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2

package.json

@@ -44,7 +44,7 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@shopify/flash-list": "1.6.3",
-    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query": "^5.32.1",
     "app-icon-badge": "^0.0.15",
     "axios": "^1.6.5",
     "expo": "~50.0.17",
@@ -79,7 +79,7 @@
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.10",
-    "react-query-kit": "^3.2.0",
+    "react-query-kit": "^3.2.2",
     "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
     "zustand": "^4.5.0"
@@ -88,8 +88,8 @@
     "@babel/core": "^7.23.7",
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
-    "@dev-plugins/react-navigation": "^0.0.5",
-    "@dev-plugins/react-query": "^0.0.5",
+    "@dev-plugins/react-navigation": "^0.0.6",
+    "@dev-plugins/react-query": "^0.0.6",
     "@expo/config": "~8.5.4",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/jest-dom": "^5.17.0",

pnpm-lock.yaml

@@ -41,9 +41,11 @@ export function getUrlParameters(
 }
 
 export const getPreviousPageParam: GetNextPageParamFunction<
+  unknown,
   PaginateQuery<unknown>
 > = (page) => getUrlParameters(page.previous)?.offset ?? null;
 
 export const getNextPageParam: GetPreviousPageParamFunction<
+  unknown,
   PaginateQuery<unknown>
 > = (page) => getUrlParameters(page.next)?.offset ?? null;

src/api/common/utils.tsx

@@ -7,7 +7,7 @@ import { Card } from '@/components/card';
 import { EmptyList, FocusAwareStatusBar, Text, View } from '@/ui';
 
 export default function Feed() {
-  const { data, isLoading, isError } = usePosts();
+  const { data, isPending, isError } = usePosts();
   const renderItem = React.useCallback(
     ({ item }: { item: Post }) => <Card {...item} />,
     []
@@ -27,7 +27,7 @@ export default function Feed() {
         data={data}
         renderItem={renderItem}
         keyExtractor={(_, index) => `item-${index}`}
-        ListEmptyComponent={<EmptyList isLoading={isLoading} />}
+        ListEmptyComponent={<EmptyList isLoading={isPending} />}
         estimatedItemSize={300}
       />
     </View>

src/app/(app)/index.tsx

@@ -7,12 +7,12 @@ import { ActivityIndicator, FocusAwareStatusBar, Text, View } from '@/ui';
 export default function Post() {
   const local = useLocalSearchParams<{ id: string }>();
 
-  const { data, isLoading, isError } = usePost({
+  const { data, isPending, isError } = usePost({
     //@ts-ignore
     variables: { id: local.id },
   });
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <View className="flex-1 justify-center  p-3">
         <Stack.Screen options={{ title: 'Post', headerBackTitle: 'Feed' }} />

src/app/feed/[id].tsx

@@ -19,7 +19,7 @@ export default function AddPost() {
   const { control, handleSubmit } = useForm<FormType>({
     resolver: zodResolver(schema),
   });
-  const { mutate: addPost, isLoading } = useAddPost();
+  const { mutate: addPost, isPending } = useAddPost();
 
   const onSubmit = (data: FormType) => {
     console.log(data);
@@ -64,7 +64,7 @@ export default function AddPost() {
         />
         <Button
           label="Add Post"
-          loading={isLoading}
+          loading={isPending}
           onPress={handleSubmit(onSubmit)}
           testID="add-post-button"
         />