[Vue warn]: Error in created hook: "TypeError: Cannot read property 'watchQuery' of undefined"

[baloodevil]

Following the manual instructions and creating a simple HelloApollo.vue component, I get the following when trying to run it...

webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:602 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'watchQuery' of undefined"

found in

---> <HelloApollo> at src/components/HelloApollo.vue <App> at src/App.vue <Root>

[Akryum]

Please provide a minimal reproduction in repository or codesandbox

[joshnuss]

I ran into this error too.

It happens if you accidentally define your apolloProvider without a defaultClient.

Incorrect way:

const apolloProvider = new VueApollo(defaultClient); // missing { }

Correct way:

const apolloProvider = new VueApollo({ defaultClient });

[annymosse]

getting same problem with a fresh vue app and i have the following problems

• on the beginning i install it though this vueCLI

>vue add apollo

then i got vue-cli-plugin-apollo module not found then i install it manually by

>vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

and got same problem till i deleted vue-cli-plugin-apollo from package.json then the npm run serve work well and i got on the browser this error

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'watchQuery' of undefined"

my GraphQL query was :

<script>
import gql from "graphql-tag";

export default {
  apollo: {
    articles: gql`
      query {
        articles
      }
    `
  },
  data: () => ({
      articles: []
  })
}
</script>

the problem was when i exported the plug-in

// wrong
export const apolloClient = new ApolloClient({
  link: httpLink,
  cache
})

// correct
const apolloClient = new ApolloClient({
  link: httpLink,
  cache
});
export default apolloClient;

[fujifilmfan]

joshnuss wrote, "It happens if you accidentally define your apolloProvider without a defaultClient."

This also happens if you intentionally define your apolloProvider without a defaultClient 😄 :

const apolloProvider = new VueApollo({
    clients: {
        dataciteApolloClient,
        githubApolloClient,
        gitlabApolloClient,
    },
    // defaultClient: dataciteApolloClient,
    errorHandler (error) {
        console.log('Global error handler')
        console.error(error)
    },
});

I don't want a default client because I want the client explicitly set alongside the query. It's not a big deal to add the default, and I can still use the default client explicitly. It just won't be enforced.