T
TanStack•13mo ago
foreign-sapphire

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. 
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()
  }
1 Reply
foreign-sapphire
foreign-sapphireOP•13mo ago
But doing so the getMe in AppLayout is not updating so the user stays on the logout page. What is the best approach to reset a query a notify the subscribers?

Did you find this page helpful?