Vue + Apollo: TypeError: this.getClient (...). WatchQuery не является функцией - PullRequest
Новая
       71

Vue + Apollo: TypeError: this.getClient (...). WatchQuery не является функцией

0 голосов
/ 03 октября 2018

Я пытаюсь настроить очень простой запрос, используя Vue + Apollo (Postgraphile GraphQL сервер в бэкэнде).

В моем компоненте у меня (в теге script): 

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

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

В ../contants/graphql У меня есть: 

import gql from 'graphql-tag';

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

В моей конечной точке Graphiql приведенный выше запрос работает без проблем.

Однако, когда я запускаю его в Vue, я получаю следующеесообщение на консоли: 

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

Искал везде и не смог найти никого с похожей ошибкой ...

Есть подсказки?С чего мне начать смотреть?Спасибо !!

Ответы [ 2 ]

0 голосов
/ 22 августа 2019

Вы должны добавить ApolloPrivder и ApolloClient на WrappedApp, например: 

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'));

Я знаю, что это для React, но примените то же самое к VUE.

0 голосов
/ 06 апреля 2019

watchQuery возвращает наблюдаемое вместо обещания.См. Документы Apollo для ApolloClient.watchQuery или (при условии, что вы используете vue-apollo) фактический код .

Это означает, что вы захотите subscribeна watchQuery (как для observable) вместо then (как для promise) - например, так: 

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