fetchQuery

Is it possible to use fetchQuery with a staleTime of 1 hour and a gcTime of Infinity, so every time it should just return the cached data but after one hour it should refresh the cache, BUT in the background so when i call it, it should still return me the data directly since it has it in cache?

Im doing this

router.beforeEach(async (route) => {
  const queryClient = inject('queryClient', new QueryClient())
  const data = await queryClient.fetchQuery({
    queryKey: ['auth', 'getMe'],
    queryFn: async () => {
      const data = await authService().getMe()
      return AuthUserModel(data.data)
    },
    staleTime: 1000 * 60 * 60, // 1 hour
    gcTime: Infinity,
  })
  if (route.meta.requiresAuth && !data.id) {
    // User is logged out invalidate all queries!
    queryClient.invalidateQueries()
    return { name: 'auth-login' }
  }
})

router.beforeEach(async (route) => {
  const queryClient = inject('queryClient', new QueryClient())
  const data = await queryClient.fetchQuery({
    queryKey: ['auth', 'getMe'],
    queryFn: async () => {
      const data = await authService().getMe()
      return AuthUserModel(data.data)
    },
    staleTime: 1000 * 60 * 60, // 1 hour
    gcTime: Infinity,
  })
  if (route.meta.requiresAuth && !data.id) {
    // User is logged out invalidate all queries!
    queryClient.invalidateQueries()
    return { name: 'auth-login' }
  }
})

on every page navigation i check if the user is authenticated, but i don't want the user to wait until the call is finished, so after an hour the call will still return the data from cache but will do a refresh in the background?

TanStack•3y ago•

11 replies

slow-yellow

fetchQuery

router.beforeEach(async (route) => {
  const queryClient = inject('queryClient', new QueryClient())
  const data = await queryClient.fetchQuery({
    queryKey: ['auth', 'getMe'],
    queryFn: async () => {
      const data = await authService().getMe()
      return AuthUserModel(data.data)
    },
    staleTime: 1000 * 60 * 60, // 1 hour
    gcTime: Infinity,
  })
  if (route.meta.requiresAuth && !data.id) {
    // User is logged out invalidate all queries!
    queryClient.invalidateQueries()
    return { name: 'auth-login' }
  }
})

router.beforeEach(async (route) => {
  const queryClient = inject('queryClient', new QueryClient())
  const data = await queryClient.fetchQuery({
    queryKey: ['auth', 'getMe'],
    queryFn: async () => {
      const data = await authService().getMe()
      return AuthUserModel(data.data)
    },
    staleTime: 1000 * 60 * 60, // 1 hour
    gcTime: Infinity,
  })
  if (route.meta.requiresAuth && !data.id) {
    // User is logged out invalidate all queries!
    queryClient.invalidateQueries()
    return { name: 'auth-login' }
  }
})

fetchQuery

Similar Threads

fetchQuery

Similar Threads

Similar Threads

Similar Threads