apollo-composable "import not found: DefaultApolloClient"

[longfellowone]

Describe the bug
App does not load "import not found: DefaultApolloClient"

To Reproduce

1. git clone https://github.com/longfellowone/todo-vue.git
2. npm run dev

Expected behavior
No error

Versions
vue: 3.0.0-rc.5
apollo-composable: 4.0.0-alpha.10
apollo-boost: 0.4.9

Additional context
No other imports working from apollo-composable (useQuery etc.)

[pepsighan]

I think the problem is with vite. I am using a similar setup and its not working.

[justinwaite]

Seeing this as well. As a temporary workaround, you can import the default export like so:

import apollo from '@vue/apollo-composable` 

and then use the other exports from there:

  app.provide(apollo.DefaultApolloClient, apolloClient)

Edit:
That being said, I can't get 4.0.0-alpha.10 to work with Vue 3. I end up with an error when trying to query:

Uncaught (in promise) TypeError: Cannot read property '_apolloAppTracking' of undefined

So good luck, let me know if you get it working.

[pepsighan]

@justinwaite I tried the same thing but encountered the same error.

[lzurbriggen]

@pepsighan Yes, this seems to be an Issue with either vite or the packaging of the library. The imports work fine in a webpack project.

@justinwaite There are 2 changes I had to make to get queries working, the first one is the error you mentioned:

1. may be an issue with either vue-demi or more likely an API change in a newer version of the composition-api. Issue is this line: const root: any = getCurrentInstance().$root. I temporarily fixed this by replacing $root with root.
2. the second issue occurs on this line on onServerPrefetch. Temporarily fixed by removing the whole function call (I don't use SSR)

I believe this is related to #1011

[longfellowone]

@justinwaite
@pepsighan
@lzurbriggen

If looking for a fix to

Uncaught (in promise) TypeError: Cannot read property '_apolloAppTracking' of undefined

See #1011 (comment)

[jessielaf]

Hi I am running into this issue with nuxt on 4.0.0-alpha.10. I cannot use another version because of #1081. Is there any work around?

[jsbroks]

Once I upgrade to

├─ @nuxtjs/[email protected]
└─ @vue/[email protected]

using apollo composition alpha-10

I get this error

[jsbroks]

v1.0.0-beta.22

BREAKING CHANGES
getCurrentInstance: The internal vm can be accessed with getCurrentInstance().proxy

So it needs to be getCurrentInstance().proxy.$root

[madmod]

The following vite plugin worked for me:

    {
      name: 'fix-apollo-composable',
      enforce: 'post',
      transform(src, id) {
        if (id.includes('@vue/apollo-composable/dist/useQuery.js')) {
          return {
            code: src
              .replace(/onServerPrefetch,/, '')
              .replace(/\:\sonServerPrefetch\(/, ': (')
              .replace(/onServerPrefetch/, 'null')
              .replace(/(.* require\("vue"\);)/m, ''),
            id,
          }
        }
      },
    },

Edit
I also had to add @vue/apollo-composable to optimizeDeps.exclude in order for the dev build to work.

[abdullahseba]

How come this is taking so long to fix? The example in the docs causes this error so it's not an edge case!

https://v4.apollo.vuejs.org/guide-composable/query.html#usequery