ReduxReactQuery/App.js

//import React, { useEffect, useState } from 'react';
//import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
//import NetInfo from '@react-native-community/netinfo';
//import AsyncStorage from '@react-native-async-storage/async-storage';
//import axios from 'axios';
//
//import {
//FlatList,
//  SafeAreaView,
//  ScrollView,
//  StatusBar,
//  StyleSheet,
//  Text,
//  useColorScheme,
//  View,
//  Button
//} from "react-native";
//
//import {
//  Colors,
//  DebugInstructions,
//  Header,
//  LearnMoreLinks,
//  ReloadInstructions,
//} from "react-native/Libraries/NewAppScreen";
//
//const initialState = {
//  loading: false,
//  success: false,
//  error: false,
//  data: null,
//  errorData: null,
//};
//
//const queryClient = new QueryClient();
//
//const fetchTodos = async () => {
//  const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos');
//  return data;
//};
//
//
//const Todos = () => {
//  const [isConnected, setIsConnected] = useState(true);
//
//  // Check internet connection
//  useEffect(() => {
//    const unsubscribe = NetInfo.addEventListener(state => {
//      setIsConnected(state.isConnected);
//    });
//
//    return () => unsubscribe();
//  }, []);
//
//  const { data, error, isLoading, refetch } = useQuery({
//   queryKey: ['todos'],
//   queryFn: fetchTodos,
//
//      enabled: isConnected, // Only fetch if there is an internet connection
//      onSuccess: async (data) => {
//        // Store the data locally on successful fetch
//        await AsyncStorage.setItem('@todos', JSON.stringify(data));
//      },
//      onError: async () => {
//        // If the fetch fails, try to load the data from local storage
//        const localData = await AsyncStorage.getItem('@todos');
//        if (localData) {
//          queryClient.setQueryData(['todos'], JSON.parse(localData));
//        }
//      },
//      retry: true, // Retry on failure
//    }
//  );
//
//  if (isLoading) return <Text>Loading...</Text>;
//  if (error) return <Text>Error: {error.message}</Text>;
//
//  return (
//    <FlatList
//      data={data}
//      keyExtractor={(item) => item.id.toString()}
//      renderItem={({ item }) => <Text>{item.title}</Text>}
//      refreshing={isLoading}
//      onRefresh={refetch}
//    />
//  );
//};
//
//const App = () => (
//  <QueryClientProvider client={queryClient}>
//    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
//      <Todos />
//    </View>
//  </QueryClientProvider>
//);

//export default App;

// App.js
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './src/MyComponent';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
};

export default App;