1

我试图获得一个基本的 React + Graphcool 项目设置。

我已经初始化了 Graphcool 后端，所以我可以在以下位置看到操场：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"
4

3 回答 3

1

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

在 App.js 中：

 import { graphql, } from 'react-apollo';
于 2018-01-04T11:36:20.907 回答
0

你最好使用 graphcool play ground 来测试你的 query 和 mutation。然后连接到 React。否则，有很多细节要调试。
这是我的程序

  1. graphcool 部署可以吗？

  2. 去游乐场模式可以吗？

  3. 查询和变异可以吗？

  4. 配置 apollo 客户端并连接到 React 组件。好吗？

  5. 在组件中 console.log(this.props.data) 可以吗？

    这是我的流量。

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

于 2018-01-18T13:21:30.340 回答
0

这是你的地址吗？

这是我的

你能看出区别吗？

于 2018-01-18T13:10:49.067 回答