N
Nuxt•8mo ago
robertb45

Using custom $fetch outside Nuxt Context (Pinia Store) produces error but still works

Hello! Quick background, I followed this guide: https://notes.atinux.com/nuxt-custom-fetch on how to create a custom $fetch implementation, and for now it works on some parts of my app calling it inside some Pinia functions, but now I stumbled upon an error when using it like this: This is a function inside a useAuthStore(), which is called by an initStore plugin which only does that. 
async function fetchUser() {
    loading.value = true
    try {
      const { getToken } = useNuxtApp().$authCookie
      if (!getToken()) return
      const response = await $api<User>('/auth/users/me')
      user.value = response
      await fetchWorkspaces()
      return response
    } catch (error: any) {
      console.log('error:', error.data?.message ?? error.cause)
      return { error }
    } finally {
      loading.value = false
    }
  }
async function fetchUser() {
    loading.value = true
    try {
      const { getToken } = useNuxtApp().$authCookie
      if (!getToken()) return
      const response = await $api<User>('/auth/users/me')
      user.value = response
      await fetchWorkspaces()
      return response
    } catch (error: any) {
      console.log('error:', error.data?.message ?? error.cause)
      return { error }
    } finally {
      loading.value = false
    }
  }
And it calls the fetchWorkspaces() function which is: 
async function fetchWorkspaces() {
    try {
      const response = await $api<PagedApiResponse<Workspace>>('/workspaces', {
        query: { limit: 'all' }
      })
      // useCurrentWorkspaceStore().setupWorkspace()
      return response
    } catch (error: any) {
      console.log('error:', error)
      return { error }error.cause)
    }
  }
async function fetchWorkspaces() {
    try {
      const response = await $api<PagedApiResponse<Workspace>>('/workspaces', {
        query: { limit: 'all' }
      })
      // useCurrentWorkspaceStore().setupWorkspace()
      return response
    } catch (error: any) {
      console.log('error:', error)
      return { error }error.cause)
    }
  }
But the problem that I'm getting is an error in the console/terminal which is: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug and also in browser console: 
ssr:warn Cannot stringify arbitrary non-POJOs Error 
    at log (node_modules/@nuxt/devalue/dist/devalue.mjs)
ssr:warn Cannot stringify arbitrary non-POJOs Error 
    at log (node_modules/@nuxt/devalue/dist/devalue.mjs)
I've been doing a little research on this but I can't understand why calling the fetchWorkspaces method gives this error, while the fetchUser method doesn't, even though I get the data back, if I do a console.log of the response of fetchWorkspaces, the data is there. Thanks in advance
Atinotes
Custom useFetch in Nuxt | Atinotes
1 Reply
dwol
dwol•8mo ago
Did you try passing the $pinia object? https://pinia.vuejs.org/ssr/nuxt.html#Awaiting-for-actions-in-pages
Pinia 🍍
Intuitive, type safe, light and flexible Store for Vue

Did you find this page helpful?