captivator
captivator
PostsComments
NNuxt
Created by captivator on 3/29/2025 in #❓・help
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,
    }
}
// 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', {
  /// ...
})
// 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>
<script setup lang="ts">
// layouts/default.vue
import { useUsersStore } from '~/extensions/users/store'
const usersStore = useUsersStore()
onMounted(() => {
    usersStore.fetchAuth()
})
</script>
34 replies