Nuxt 3: Why Isn’t Pinia State Updating After a $fetch Token Refresh?

I’m building a Nuxt 3 app that uses a custom $fetch plugin to handle API calls, refresh expired tokens, and retry requests on 401 errors.

The token refresh and request retry process works correctly, but the new data is not reflected in my Pinia store or components.

[1] In my component transactions.vue
I fetch the data on component creation:

JAVASCRIPTCopied
// fetch onCreate
transactionsStore.fetchTransactionsList({
  page: 1,
});

[2] In my Pinia store, this action fetches transactions for transactions.vue:

JAVASCRIPTCopied
    async fetchTransactionsList(query) {
      const api = useApiRepository();

      const { status, data, error } = await useAsyncData(
        "transactions_list",
        () => api.getTransactionsList({
          ...query,
          per_page: 20,
        }),
      );

      this.transactionsData = data.value?.data ?? {};
      this.transactionsStatus = status;
      this.transactionsError = error;

      return { status, data, error };
    },

[3] In my Nuxt plugin, I customize the default $fetch:

JAVASCRIPTCopied
import { defineNuxtPlugin } from "#app";
import { useLocalStorage } from "@vueuse/core";
import { useAuthStore } from "~/stores/AuthStore";

let api;

// Create a list to hold the Unauthorized 401 request queue
const refreshAndRetryQueue = [];

// Flag to prevent multiple token refresh requests
let isRefreshingToken = false;

// Counter for tracking the number of consecutive refresh attempts
let refreshAttempts = 0;
// Maximum number of consecutive refresh attempts allowed in Single
//  Session {{ Without Refreshing the page }}
const MAX_REFRESH_ATTEMPTS = 25;

// Main function to handle response errors
function handleResponseError(nuxtApp, authStore) {
  return async ({ request: requestURL, options, response }) => {
  // Check if the current route is an auth route
    const isAuthenticated = authStore?.isAuthenticated;

    // Handle Unauthorized 401 error when the user is already logged-in
    if (response.status === 401 && isAuthenticated) {
    // If we're not already refreshing the token
      if (!isRefreshingToken) {
        isRefreshingToken = true;

        // Increment the refresh attempts counter
        refreshAttempts++;

        // Check if we've exceeded the maximum number of refresh attempts
        if (refreshAttempts > MAX_REFRESH_ATTEMPTS) {
        // Too many refresh attempts, force logout
          handleLogout(nuxtApp, authStore);
          return;
        }

        // Call Refresh API and store the new token in the localStorage
        const refreshResponse = await authStore.requestNewAccessToken();

        if (refreshResponse.success) {
        // Refresh successful. Retry all requests in the queue with the new token
          refreshAndRetryQueue.forEach(({ requestURL, options }) => {
            api(requestURL, {
              ...options,
            });
          });

          // Clear the queue after retrying all requests
          refreshAndRetryQueue.length = 0;

          // Reset the refreshing flag
          isRefreshingToken = false;

          // Retry the original request that triggered the refresh
          return api(requestURL, {
            ...options,
          });
        }
        else {
        // Refresh failed, log out the user
          handleLogout(nuxtApp, authStore);
        }

        // Reset the refreshing flag
        isRefreshingToken = false;
      }

      // If we're already refreshing (isRefreshingToken = true),
      //  add the request to the queue to be called after we finish the refreshing
      return refreshAndRetryQueue.push({
        requestURL,
        options,
      });
    }
  };
}

// Function to handle user logout
async function handleLogout(nuxtApp, authStore) {
  // Clear local authentication data
  authStore.clearLocalAuthData();
  // Redirect to session-expired page
  await nuxtApp.runWithContext(() => navigateTo("/auth/session-expired"));

  // Reset States on Logout
  refreshAttempts = 0;
  isRefreshingToken = false;
}

// Main plugin function
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const authStore = useAuthStore();

  // Create a custom instance of ofetch with global configurations
  api = $fetch.create({
    baseURL: config.public.apiBaseUrl,

    // Add hooks for request and response
    onRequest: handleRequest, //Already implemented but the function is not added here for simplicity
    onResponseError: handleResponseError(nuxtApp, authStore),
  });

  // Provide the custom fetch instance to the app
  return {
    provide: {
      api, // This can be used in the app as $api
    },
  };
});

The Problem:
I call transactionsStore.fetchTransactionsList({ page: 1 }) in transactions.vue. Although the token refresh triggers and the request is retried, the updated data is not reflected in either the Pinia state or the component. I’m seeking a solution that ensures the new data correctly updates the store and component after the token is refreshed.