FetchQuery fetch cached data refresh data in the background

[andredewaard]

Is it possible with FetchQuery to fetch the cached data but still refresh the data in the background after?
Im fetching the authenticated user in the beforeEach route but want to refresh the user data if the staleTime is met but don't want to wait on that.

so im doing

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: 1000 * 60 * 60 * 5 // 5 hours
  })
  if (route.meta.requiresAuth && !data.id) {
    return { name: 'auth-login' }
  }
})

If its been an hour i want the data to be refreshed but in the background, the fetchQuery should still return the cached data so the user doesn't need to wait for the api to refresh before navigating to a different page.

[TkDodo]

we have a PR open for ensureQueryData to do that:

• feat(ensureQueryData): add 'revalidateIfStale' option #6996

would that work for you?

[andredewaard]

That’s my PR! Sorry forgot about this issue.

[TkDodo]

Oh sorry I didn't check who's who 😂🙈