NuxtN
Nuxt•10mo ago•
33 replies
captivator

cannot import 'useApollo' composable from another composable

in my nuxt app, i decided to use @nuxtjs/apollo as the apollo client because it sets up things for me.
to make usage of it more conveneint, i made a composable useGlobalApollo which exposes the default client.
// composables/useGlobalApollo.ts
export const useGlobalApollo = () => {
    const nuxtApollo = useApollo()

    if (!nuxtApollo.clients?.default) {
        throw new Error('Default apollo client was not found. Initialize it first before using it!')
    }

    return {
        client: (nuxtApollo.clients?.default ?? {}) as typeof nuxtApollo.clients.default,
        helpers: nuxtApollo,
    }
}

then, i use it in my pinia stores to fetch using graphql. here is an example auth store:
// extensions/users/store.ts (this is how i organize my project, into different modules under the folder extensions)
const apollo = useGlobalApollo()

export const useUsersStore = defineStore('users', {
  /// ...
})

then i just use the users store whenever needed during auth. currenlty im using it in a page for login and default layout.
<script setup lang="ts">
// layouts/default.vue
import { useUsersStore } from '~/extensions/users/store'
const usersStore = useUsersStore()
onMounted(() => {
    usersStore.fetchAuth()
})
</script>
Was this page helpful?