Question

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

我已经初始化了Graphcool后端，所以我可以在https://api.graph.cool/simple/v1/MY-KEY

看到游乐场

我可以在游乐场中运行此查询并查看结果：

<?php if ( get_option( 'woocommerce_enable_myaccount_registration' ) === 'yes' ) : ?>

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

query {
    allGroups {
        id
        description
    }
}

在App.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'),
);

但是我收到了一个错误：

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

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

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

Answer 1

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

在App.js中：

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

Answer 2

Is this your address?

here is mine

你能看出区别吗？

Answer 3

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

graphcool deploy可以吗？
去游乐场架构好吗？
查询和变异可以吗？
配置apollo客户端并连接到React组件。好吗？
在组件console.log（this.props.data）中可以吗？

这是我的流程。

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

无法将React连接到Graphcool后端

3 个答案: