react-query-est/App.js
2024-05-31 17:18:20 +02:00

117 lines
2.4 KiB
JavaScript

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
import React from "react";
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button,
} from "react-native";
import NetInfo from '@react-native-community/netinfo'
import {
useQuery,
useMutation,
useQueryClient,
QueryClient,
QueryClientProvider,
onlineManager
} from "@tanstack/react-query";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
import AsyncStorage from "@react-native-async-storage/async-storage";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24, // 24 hours
},
mutations: {
cacheTime: Infinity,
retry: true,
},
},
});
onlineManager.setEventListener((setOnline) => {
return NetInfo.addEventListener((state) => {
setOnline(!!state.isConnected)
if (state.isConnected)
queryClient.resumePausedMutations()
console.log(123)
})
})
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
});
// Define the "addTodo" mutation
queryClient.setMutationDefaults(["addTodo"], {
mutationFn: ({ page }) => {
return makeCall(page);
},
retry: Infinity,
networkMode: 'offline',
});
function makeCall(page) {
console.log(queryClient.getMutationCache().getAll().length)
return fetch(`http://10.0.2.2:8080/${page}`)
.then(response => {
return response;
})
.catch(error => {
console.log(error);
console.log(12);
});
}
function App() {
return (
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}
onSuccess={() => {
queryClient.resumePausedMutations().then(() => {
queryClient.invalidateQueries();
});
}}
>
<SafeAreaView>
<View>
<ReqButton />
</View>
</SafeAreaView>
</PersistQueryClientProvider>
);
}
const ReqButton = () => {
const mutation = useMutation({ mutationKey: ["addTodo"] });
//const query = useQuery({ queryKey: ["todos"], queryFn: () => makeCall("a") });
return (
<>
<Button
title={"Request"}
onPress={() => mutation.mutate({ page: "a" })}
/>
</>
);
};
export default App;