[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

---> at src/components/HelloApollo.vue

at src/App.vue

[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: [] }) }

the problem was when i exported the plug-in 
```js
// 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.