Best way to handle refresh token edge case

[dtrinh100]

I have a situation where post data is fetched on initial page load in Nuxt 3 with SSR enabled. The post endpoint displays different posts based on auth vs unauth users. This works fine in most cases except when a user goes to the page during a token refresh.

During a token refresh, my app gets the new token and updates the authStore user and isAuth flag. The PostList component would watch for changes on the isAuth flag, but the problem is the watch function doesn't pick up the flag change in this case, so the Post shows the unauth version of posts.

Post Component code:

const { refetch } = await fetchPosts(params)

// This watch doesn't get triggered during the authStore update in refresh token logic, so force it to refetch the data using immediate set to true
watch(isAuth, async () => {
  const { error, data } = await refetch();
  // Handle refetch logic
}, { immediate: true });

urql.config.ts code

const auth = authExchange(async (utilities) => {
  const authStore = useAuthStore();
  return {
    addAuthToOperation(operation) {
    },
    didAuthError(error) {
      
    },
    willAuthError(operation) {

    },
    async refreshAuth() {
      const { data } = await utilities.mutate(
        REFRESH_TOKEN),
        {},
      );

      if (success) {
        authStore.isAuth = true;

        return;
      }
   // otherwise logout user
 
    },
  };
});

My current solution for this is to set the immediate property to true, but this makes the component fetch the posts twice each time it's mounted, which is not ideal.

Is there a better solution to this?