add react query

Author: yjose

template/.env.development

@@ -1 +1 @@
-API_URL=http://example.com/
+API_URL=https://60520252fb49dc00175b74f7.mockapi.io

template/index.js

@@ -4,7 +4,6 @@
 
 import {AppRegistry} from 'react-native';
 import App from './src/index';
-import 'react-native-gesture-handler';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

template/src/api/APIProvider.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {QueryClient, QueryClientProvider} from 'react-query';
+
+export const queryClient = new QueryClient();
+
+export default function APIProvider({children}: {children: React.ReactNode}) {
+  return (
+    // Provide the client to your App
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

template/src/api/client.tsx

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+import {API_URL} from '@env';
+
+export const client = axios.create({
+  baseURL: API_URL,
+});

template/src/api/index.tsx

@@ -0,0 +1,3 @@
+export * from './useTasks';
+export * from './useAddTask';
+export * from './APIProvider';

template/src/api/useAddTask.tsx

@@ -0,0 +1,12 @@
+import {useMutation} from 'react-query';
+import {client} from './client';
+
+type TaskType = {
+  label: string;
+  done: boolean;
+  color: string;
+};
+
+export function useAddTask() {
+  return useMutation((data: TaskType) => client.post('/tasks', data));
+}

template/src/api/useTasks.tsx

@@ -0,0 +1,17 @@
+import {useQuery} from 'react-query';
+import {client} from './client';
+
+type TaskType = {
+  label: string;
+  done: boolean;
+  color: string;
+};
+
+const getTasks = async () => {
+  const {data} = await client.get('/tasks');
+  return data;
+};
+
+export function useTasks() {
+  return useQuery<TaskType[]>('tasks', getTasks);
+}

template/src/index.tsx

@@ -3,17 +3,20 @@ import 'react-native-gesture-handler';
 import {ThemeProvider, Toast} from 'ui';
 import {RootNavigator} from 'navigation';
 import {setI18nConfig, AuthProvider} from 'core';
+import APIProvider from 'api/APIProvider';
 
 setI18nConfig();
 
 const App = () => {
   return (
-    <AuthProvider>
-      <ThemeProvider>
-        <RootNavigator />
-        <Toast ref={(ref: any) => Toast.setRef(ref)} />
-      </ThemeProvider>
-    </AuthProvider>
+    <APIProvider>
+      <AuthProvider>
+        <ThemeProvider>
+          <RootNavigator />
+          <Toast ref={(ref: any) => Toast.setRef(ref)} />
+        </ThemeProvider>
+      </AuthProvider>
+    </APIProvider>
   );
 };
 

template/src/screens/Home/index.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import {Button, Screen, Text, View} from 'ui';
-import {API} from '@env';
+import {API_URL} from '@env';
 import {translate, useAuth} from 'core';
+import {useTasks} from 'api';
 
 export const Home = () => {
   const {signOut} = useAuth();
+  const {data} = useTasks();
   return (
     <Screen>
       <View flex={1} justifyContent="center">
         <Text variant="header" textAlign="center">
           {translate('name')}
         </Text>
         <Text variant="body" textAlign="center">
-          This is An ENV Var : {API}
+          This is An ENV Var : {API_URL}
+        </Text>
+
+        <Text variant="body" textAlign="center">
+          Data from Api : {JSON.stringify(data)}
         </Text>
         <Button label="LogOut" onPress={signOut} />
       </View>

template/types/env.d.ts

@@ -1,3 +1,3 @@
 declare module '@env' {
-  export const API: string;
+  export const API_URL: string;
 }