Question

我正在尝试使用Vue + Apollo（后端中的Postgraphile GraphQL服务器）设置一个非常简单的查询。

在我的组件中（在脚本标签中）：

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"

到处搜索，找不到任何有类似错误的人...

有任何线索吗？我应该从哪里开始看？谢谢！

Answer 1

watchQuery返回的是可观察的，而不是诺言。请参见Apollo docs for ApolloClient.watchQuery或（假设您正在使用vue-apollo）the actual code。

这意味着您将想要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)
  }
})

Answer 2

您必须在WrappedApp上添加ApolloPrivder和ApolloClient，如：

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。

Answer 3

我不确定为什么会这样。但是我在反应中遇到了同样的错误。 1. Apollo查询应包装在ApooloProvider中，以将react（我认为也应该类似）与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>

由于apolloClient中的问题，您可能会收到此错误。对我来说，它抛出了错误，因为我的apolloClient是一个返回了promise（在A中提到）的fn。因此，即使在解决诺言之前，仍要尝试执行useQuery挂钩，但是ApolloProvider尚未解决客户端问题（客户端具有诸如WatchQuery（）之类的基本fns来处理useQuery挂钩，因此它会返回错误）。我从客户端删除了异步，然后我的错误得到了解决，因为阿波罗客户端很容易被提供商使用。

Vue + Apollo：TypeError：this.getClient（...）。watchQuery不是函数

3 个答案: