Nuxt•2y ago

Where to fetch initial user data

What is the best practice to load initial user data? Currently I do it in the default.vue layout in an onMounted hook, but that doesn't seem like the right way as sometimes it doesn't work.

Here is the code:

const userStore = useUserStore()

const { user } = storeToRefs(userStore)

const accountStore = useAccountsStore()
const categoryStore = useCategoryStore()
const payeeStore = usePayeeStore()
const transactionStore = useTransactionStore()

onMounted(() => {
  if (!accountStore.isInitialized) {
    accountStore.getAccounts()
    accountStore.initialized()
  }
  if (!categoryStore.isInitialized) {
    categoryStore.getCategories()
    categoryStore.initialized()
  }
  if (!transactionStore.isInitialized) {
    transactionStore.getTransactions()
    transactionStore.initialized()
  }
  if (!payeeStore.isInitialized) {
    payeeStore.getPayees()
    payeeStore.initialized()
  }
})

const userStore = useUserStore()

const { user } = storeToRefs(userStore)

const accountStore = useAccountsStore()
const categoryStore = useCategoryStore()
const payeeStore = usePayeeStore()
const transactionStore = useTransactionStore()

onMounted(() => {
  if (!accountStore.isInitialized) {
    accountStore.getAccounts()
    accountStore.initialized()
  }
  if (!categoryStore.isInitialized) {
    categoryStore.getCategories()
    categoryStore.initialized()
  }
  if (!transactionStore.isInitialized) {
    transactionStore.getTransactions()
    transactionStore.initialized()
  }
  if (!payeeStore.isInitialized) {
    payeeStore.getPayees()
    payeeStore.initialized()
  }
})

const userStore = useUserStore()

const { user } = storeToRefs(userStore)

const accountStore = useAccountsStore()
const categoryStore = useCategoryStore()
const payeeStore = usePayeeStore()
const transactionStore = useTransactionStore()

onMounted(() => {
  if (!accountStore.isInitialized) {
    accountStore.getAccounts()
    accountStore.initialized()
  }
  if (!categoryStore.isInitialized) {
    categoryStore.getCategories()
    categoryStore.initialized()
  }
  if (!transactionStore.isInitialized) {
    transactionStore.getTransactions()
    transactionStore.initialized()
  }
  if (!payeeStore.isInitialized) {
    payeeStore.getPayees()
    payeeStore.initialized()
  }
})

const userStore = useUserStore()

const { user } = storeToRefs(userStore)

const accountStore = useAccountsStore()
const categoryStore = useCategoryStore()
const payeeStore = usePayeeStore()
const transactionStore = useTransactionStore()

onMounted(() => {
  if (!accountStore.isInitialized) {
    accountStore.getAccounts()
    accountStore.initialized()
  }
  if (!categoryStore.isInitialized) {
    categoryStore.getCategories()
    categoryStore.initialized()
  }
  if (!transactionStore.isInitialized) {
    transactionStore.getTransactions()
    transactionStore.initialized()
  }
  if (!payeeStore.isInitialized) {
    payeeStore.getPayees()
    payeeStore.initialized()
  }
})

Any help would be greatly appreciated!

pyplacca•4/3/24, 5:53 PM

it depends on how you want your app to function. if you want the user data to be fetched before the app loads for instance, you could use a middleware

whatstazOP•4/3/24, 6:40 PM

Ah okay, does that still trigger when a user is trying to log in?

pyplacca•4/3/24, 6:42 PM

It depends on how you design it, but it’s achievable

whatstazOP•4/3/24, 6:47 PM

Okay thanks for the help!

pyplacca•4/3/24, 7:04 PM

Welcome

Tirius•4/4/24, 1:47 PM

Plugin also could be an option

// plugins/init.client.js
import { useGeneralStore } from '~/stores/generalStore';
import { useUserStore } from '~/stores/userStore';

export default defineNuxtPlugin(async () => {
    const generalStore = useGeneralStore();
    const userStore = useUserStore();

    await Promise.all([
        generalStore.init(),
        userStore.init()
    ]);
});

// plugins/init.client.js
import { useGeneralStore } from '~/stores/generalStore';
import { useUserStore } from '~/stores/userStore';

export default defineNuxtPlugin(async () => {
    const generalStore = useGeneralStore();
    const userStore = useUserStore();

    await Promise.all([
        generalStore.init(),
        userStore.init()
    ]);
});

Hendrik Jan•4/4/24, 1:58 PM

You could try it in "app.vue" (you probably have to create that file, see the docs).

Simplified example of my code (I'm using Nuxt useState as you can see):

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const userData = useState('user');

const data = await useFetch(...);
userData.value = data.value.user;
</script>

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const userData = useState('user');

const data = await useFetch(...);
userData.value = data.value.user;
</script>

HHendrik Jan You could try it in "app.vue" (you probably have to create that file, see the do...

whatstazOP•4/4/24, 4:09 PM

That is kinda what I'm doing right now, I found my problem, I was calling my loadUserData in a default.vue layout (which loaded on the login page), after the login, it didn't trigger any more unless I refreshed.
I tried the middleware but then it was triggering twice and I could not get rid of the hydration mismatch.

pyplacca•4/4/24, 4:25 PM

here's what I normally use to prevent the double call in the middleware

export default defineNuxtRouteMiddleware(() => {
  // Single execution client-only actions
  if (process.server || (process.client && !nuxtApp.isHydrating)) return
  // any code below this line will be run once on the client side
})

export default defineNuxtRouteMiddleware(() => {
  // Single execution client-only actions
  if (process.server || (process.client && !nuxtApp.isHydrating)) return
  // any code below this line will be run once on the client side
})

Where to fetch initial user data

Similar Threads

Similar Threads

Similar Threads