SWR + Nuxt auth utils

[luminous8]

I'm using nuxt swr with nuxt auth utils

nuxt.config.ts

ssr: true,
routeRules: {
    '/': { swr: 3600 },
}

in my app.vue

onMounted(async () => {
  console.log('onMounted', loggedIn?.value);
  if (loggedIn.value) {
	  // call userComposable to fetch data
  }
});

The template part with AuthState works well

When i'm visiting swr route, loggedIn is false and it's true when visiting ssr routes

According to the docs when using hybrid rendering the session is fetched on client side so it should be done on onMounted
What am i missing here? am i using the wrong hook?

Thanks for the help

[atinux]

Actually it can happen after the onMounted as the fetch on client-side is done when the whole app is mounted:

nuxt-auth-utils/src/runtime/app/plugins/session.client.ts

Lines 11 to 13 in ec9b727

	nuxtApp.hook('app:mounted', async () => {
	await useUserSession().fetch()
	})

What behavior are you trying to achieve? What API call do you need to make?

[luminous8]

nuxtApp.hook('app:mounted', async () => {
await useUserSession().fetch()
})

Thanks for the reply @atinux 🙏
To be very specific i'm fetching user favorites and collections through a composable (i've seen a couple of times that for simple store you use composables instead of pinia, so i'm following this pattern)

Favorites are useful at this step because there is a list of items displayed and if an item is favorited, I display it on the screen.

Hope that makes sense

[atinux]

What about using directly the fetch hooks in a nitro plugin so the fetch of the session already has the data you need?

https://github.com/atinux/nuxt-auth-utils?tab=readme-ov-file#extend-session

[luminous8]

I've used a client plugin

nuxtApp.hook('app:mounted', async () => { await useUserSession().fetch() })

and it works

I think it's easier to use a client plugin and a composable in my case, as the list of favorites or collections will be updated on the client side.

Unless a Nitro plugin can update a composable?

Question aside: how can i read/learn about best nuxt architecture choices? I've been using nuxt since 2019 and still struggle with some design choices