[Question]: When is the session server side available? Initial authorized api request possible?

[silvio-e]

I call my endpoint /api/countries which is doing a request to an external API which needs info from the session. That works fine.

But when I call my api route on the initial loading of the app, for example in app.js in a callOnce, it seems that the session is not available yet.

// This seems not to work

await callOnce(async () => {
  const result = await $fetch('/api/countries')
})

Am I doing something wrong or is this correct behavior?

The idea was to fetch data and filling the store on app load. How can this be achieved with using a token from the authentication?

[amandesai01]

what is app.js? you mean app.vue?

But yeah, ideally it should work, since this module injects a plugin in nuxt app which initilaises session before any of the UI code gets executed.

It would be great if you can provide a minimal reproduction.

[Atinux]

@silvio-e you need to use useRequestFetch(), see nuxt/nuxt#24813

[silvio-e]

@Atinux Awesome, thank you! I saw it being mentioned but didn't find it in the docs, so I didn't even try. But now it works for me in this scenario:

// useCountriesStore.ts

export const useCountries = defineStore('countries', () => {
  const countries = ref()

  const fetch = async () => {
    try {
      countries.value = (await useRequestFetch()<ApiResponse<Country>>('/api/countries')).results
    }
    catch (error) {
      console.log(error)
    }
  }
  return { countries, fetch }
})

// app.vue

const countries = useCountries()

await callOnce('countries', async () => {
  await countries.fetch()
})

Is that usage correct?

[silvio-e]

Authenticated requests during SSR is now described in the docs