无法将 React 连接到 Graphcool 后端

Question

我正在尝试进行基本的 React + Graphcool 项目设置。

我已经初始化了 Graphcool 后端，所以我可以在以下位置看到 playground：https://api.graph.cool/simple/v1/MY-KEY

我可以在操场上运行这个查询并查看结果：

query {
    allGroups {
        id
        description
    }
}

但是我无法将其连接到 React 前端。这是我的 index.js:

import React from 'react';
import ReactDOM from 'react-dom';

// GraphQL
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

// Components
import App from './components/App/App';

const httpLink = new HttpLink({
    uri: 'https://api.graph.cool/simple/v1/MY-KEY',
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById('App'),
);

在App.js中：

import React from 'react';
import gql from 'graphql-tag';
import graphql from 'react-apollo';

const myQuery = gql`
    query {
        allGroups {
            id
            description
        }
    }
`;

const App = () => {
    return (
        <div>
            <h1>Application</h1>
            <h2>Groups:</h2>
        </div>
    );
};

// export default App;
export default graphql(myQuery)(App);

但是我得到一个错误：

Uncaught TypeError: (0 , _reactApollo2.default) is not a function

我不知道这是否相关，但我的 IDE 在 App.js 中的 'allGroups' 行给我以下错误：

cannot query field "allGroups" on type "Query"

Answer 1

那是 graphql 导入错误，让我们试试这个

In App.js:

 import { graphql, } from 'react-apollo';

Answer 2

Is this your address?

here is mine

你能看出区别吗？

Answer 3

你最好使用 graphcool play ground 来测试你的查询和变异 .然后连接到React.Otherwise，有很多细节需要调试。
这是我的程序

graphcool部署可以吗？
去游乐场模式可以吗？
查询和变异可以吗？
配置 apollo 客户端并连接到 React 组件。可以吗？
组件中console.log(this.props.data)可以吗?

这是我的流程。

最重要的是，当您添加一些模式和解析器时，您必须添加到 graphcool.yaml 文件中。否则，graphcool 无法找到您的架构和查询方法。

无法将 React 连接到 Graphcool 后端

Cant connect React to Graphcool backend

reactjs

graphcool