Mediv0 Posts - Answer Overflow

Mediv0

•Created by Mediv0 on 10/18/2024 in #❓・help

Problem getting data from Pinia

I have a component used within my layout that is responsible for setting user information. However, when I try to access this user info from another component located deeper in the component tree, it returns null. navbar.vue

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

<script lang="ts" setup>
const userStore = useUserStore();
const { status, refresh } = await useAsyncData(async () => {
    if (userStore.info)
        return true;

    await userStore.fetchUserInfo();
    return true;
});
</script>

test.vue

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

<script lang="ts" setup>
const store = useUserStore();
console.log(store.info); // null
</script>

i logged them and it seems the problem is that test.vue runs before navbar.vue file structure - dashboardLayout -- navbar.vue // -> getting data here -- TestLayout --- AComponent.vue ---- Test.vue // -> runs here

6 replies

NNuxt

•Created by Mediv0 on 10/10/2024 in #❓・help

What is the best way to use pinia with useAsyncData

I have a very simple component like this:

<script setup lang="ts">
const { fetchNotifications, notifications } = useNotificationsStore();
const { status, refresh } = await useLazyAsyncData(async () => fetchNotifications("DEFAULT").then(() => true));
</script>

<template>
    <p v-if="status === 'success'">
        <span v-for="(notif, i) in notifications" :key="i">
            {{ notif.context }}
        </span>
    </p>
</template>

<script setup lang="ts">
const { fetchNotifications, notifications } = useNotificationsStore();
const { status, refresh } = await useLazyAsyncData(async () => fetchNotifications("DEFAULT").then(() => true));
</script>

<template>
    <p v-if="status === 'success'">
        <span v-for="(notif, i) in notifications" :key="i">
            {{ notif.context }}
        </span>
    </p>
</template>

but it always causes Hydration completed but contains mismatches. what is the best way to get this data

5 replies

NNuxt

•Created by Mediv0 on 10/5/2024 in #❓・help

Implement http-only jwt tokens with retry

Hi, I’m trying to refresh the access token when I receive a 401 error and retry all pending requests. I could use onResponse and onRequest. Something like this:

const $api = (endpoint) => {
    useFetch(endpoint, {
        onResponse: async (context) => {
            const { statusCode } = context;
            if (statusCode === 401) {
                try {
                    await refreshToken();
                    retryWith(options);
                } catch (e) {
                    navigateTo("/auth/login");
                }
            }
        },
    });
};

const $api = (endpoint) => {
    useFetch(endpoint, {
        onResponse: async (context) => {
            const { statusCode } = context;
            if (statusCode === 401) {
                try {
                    await refreshToken();
                    retryWith(options);
                } catch (e) {
                    navigateTo("/auth/login");
                }
            }
        },
    });
};

This works fine when you only have one request at a time, but when you have multiple requests on the page:

<script setup>
  $api("/api/1");
  $api("/api/2");
</script>

<script setup>
  $api("/api/1");
  $api("/api/2");
</script>

It just doesn't work (multiple refreshToken calls). Any ideas on how to approach this?

5 replies

Gaming

Programming