remove cache subscriber not notified
Hello, Im working on a react native applicate which renders some views conditionally based on the data i fetch via react query. This is basically a getMe call to check if you're authenticated.
When i login this data is fetched and the routes will render correctly. However when i logout i try to reset/remove the queries but the useQuery subscriber is not getting this update.
This is what i do to logout
When i login this data is fetched and the routes will render correctly. However when i logout i try to reset/remove the queries but the useQuery subscriber is not getting this update.
export const authQueries = {
getMe: () =>
queryOptions({
queryKey: ['getMe'],
queryFn: async () => {
try {
const { data } = await authService.getMe()
return data
} catch (e) {
const token = await getRefreshToken()
if (token) {
const tokens = await authService.refresh({ body: { refresh_token: token } })
setTokens(tokens.data)
const { data } = await authService.getMe()
return data
}
throw e
}
},
retry: false,
refetchInterval: getHours(1),
gcTime: getDays(1),
})
}
export default function AppLayout() {
const query = useQuery(authQueries.getMe())
return (
<View className="flex-1" onLayout={onLayoutRootView}>
<Stack
screenOptions={{
headerShown: false
}}
>
<Stack.Screen
name="tabs"
options={{
headerShown: false
}}
redirect={!query.data}
/>
<Stack.Screen
name="login"
options={{
headerShown: false
}}
redirect={!!query.data}
/>
<Stack.Screen
name="mfa"
options={{
headerShown: false
}}
redirect={!!query.data}
/>
</Stack>
</View>
)
}export const authQueries = {
getMe: () =>
queryOptions({
queryKey: ['getMe'],
queryFn: async () => {
try {
const { data } = await authService.getMe()
return data
} catch (e) {
const token = await getRefreshToken()
if (token) {
const tokens = await authService.refresh({ body: { refresh_token: token } })
setTokens(tokens.data)
const { data } = await authService.getMe()
return data
}
throw e
}
},
retry: false,
refetchInterval: getHours(1),
gcTime: getDays(1),
})
}
export default function AppLayout() {
const query = useQuery(authQueries.getMe())
return (
<View className="flex-1" onLayout={onLayoutRootView}>
<Stack
screenOptions={{
headerShown: false
}}
>
<Stack.Screen
name="tabs"
options={{
headerShown: false
}}
redirect={!query.data}
/>
<Stack.Screen
name="login"
options={{
headerShown: false
}}
redirect={!!query.data}
/>
<Stack.Screen
name="mfa"
options={{
headerShown: false
}}
redirect={!!query.data}
/>
</Stack>
</View>
)
}This is what i do to logout
const logout = () => {
queryClient.resetQueries()
queryClient.clear()
} const logout = () => {
queryClient.resetQueries()
queryClient.clear()
}
