Vue + Apollo: TypeError: this.getClient(...).watchQuery is not a function

Question

I am trying to setup a very simple query using Vue + Apollo (Postgraphile GraphQL server in the backend).

In my component I have (in the script tag):

import { CURRENT_USER_QUERY } from '../constants/graphql';

export default {
  name: 'User',
  data() {
    return {
      currentUser: undefined,
    };
  },
  apollo: {
    currentUser: CURRENT_USER_QUERY,
  },
};

In ../contants/graphql I have:

import gql from 'graphql-tag';

export const CURRENT_USER_QUERY = gql`
  query CurrentUserQuery {
    currentUser {
      id
      username
    }
  }
`;

In my Graphiql endpoint, the query above works without any problems.

However, when I run it in Vue, I get the following message on console:

[Vue warn]: Error in created hook: "TypeError: 
this.getClient(...).watchQuery is not a function"

Searched everywhere and could not find anyone with a similar error...

Any clues? Where should I start looking at? Thanks!!

wow I do not really remember, but looking at it now after more months of experience, I'd start by fixing the code above... it should be apollo: { currentUser: {query: CURRENT_USER_QUERY }} — Daniel da Rocha, Jan 14 '20 at 07:34

score 1 · Answer 1 · answered Apr 06 '19 at 12:08

watchQuery is returning an observable instead of a promise. See Apollo docs for ApolloClient.watchQuery or (assuming you're using vue-apollo) the actual code.

This means you'll want to subscribe to the watchQuery (as you'd for an observable), instead of doing a then (as you'd do for a promise) – like so:

apolloClient.watchQuery({
  query: yourQuery,
  variables: yourVariables
}).subscribe({
  next: (body) => {
    console.log('success', body)
    commit(MY_ACTION, body)
  },
  error: (error, done) => {
    console.error(error)
  }
})

score 0 · Answer 2 · answered Jun 15 '20 at 06:25

i am not sure why this is happening in vue. but i got same error in react. 1. Apollo queries should be wrapped in ApooloProvider to connect react(i think it should be similiar in vue also) with apollo.

A)

const client = async () => {// remove the async as it will cause trouble
    const client = new ApolloClient({
        link,
        cache,
        defaultOptions,
    });
    return client;
};

const apolloClient = client();
<ApolloProvider client={apolloClient}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
</ApolloProvider>

you might be getting this error because of an issue in the apolloClient. for me it was throwing the error because my apolloClient was a fn that returns a promise(mentioned in A). so even before the promise is resolved, the useQuery hook is trying to be executed, but the ApolloProvider doesn't have the client resolved yet(which have the essential fns like WatchQuery() to handle useQuery hook, so it returns an error). i removed the async from the client then my error is fixed, since the apollo client is readily available for the provider.

score -1 · Answer 3 · answered Aug 22 '19 at 15:19

You must add the ApolloPrivder and ApolloClient on the WrappedApp like :

import React from 'react';
import { render } from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-components';

import App from './App';

const client = new ApolloClient({
    uri: 'http://localhost:2370/graphql'
});

const WrappedApp = (
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
);

render(WrappedApp, document.getElementById('root'));

I know this is for React but apply the same thing to the VUE.

Vue + Apollo: TypeError: this.getClient(...).watchQuery is not a function

3 Answers3