4

我正在尝试使用 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"

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

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

4

3 回答 3

1

watchQuery正在返回一个可观察的而不是一个承诺。请参阅Apollo 文档了解ApolloClient.watchQuery或（假设您正在使用vue-apollo）实际代码。

这意味着你会想要（就像你对 an所做subscribe的那样），而不是做 a （就像你对 a所做的那样）——就像这样：watchQueryobservablethenpromise

apolloClient.watchQuery({
  query: yourQuery,
  variables: yourVariables
}).subscribe({
  next: (body) => {
    console.log('success', body)
    commit(MY_ACTION, body)
  },
  error: (error, done) => {
    console.error(error)
  }
})
于 2019-04-06T12:08:38.340 回答
0

我不确定为什么会在 vue 中发生这种情况。但我在反应中遇到了同样的错误。1. Apollo 查询应该包装在 ApooloProvider 中，以便将 react（我认为它在 vue 中也应该类似）与 apollo 连接起来。

一个）

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 是一个返回承诺的 fn（在 A 中提到）。所以即使在 promise 被解决之前，useQuery 钩子正在尝试执行，但是 ApolloProvider 还没有解决客户端（它有像 WatchQuery() 这样的基本 fns 来处理 useQuery 钩子，所以它返回一个错误）。我从客户端中删除了异步，然后我的错误得到了修复，因为提供者可以随时使用 apollo 客户端。

于 2020-06-15T06:25:03.597 回答
0

您必须在 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。

于 2019-08-22T15:19:42.377 回答