无法将 React 连接到 Graphcool 后端

Posted 2023-03-10

【中文标题】无法将 React 连接到 Graphcool 后端

【英文标题】：Cant connect React to Graphcool backend

【发布时间】：2018-06-14 03:05:06

【问题描述】：

我正在尝试获得一个基本的 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"

【参考方案1】：

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

在 App.js 中：

 import  graphql,  from 'react-apollo';

【讨论】：

我仍然收到错误：未捕获的类型错误：_super.call 不是函数。 4.js:sourcemap:12210 组件出现上述错误。未捕获的类型错误：_super.call 不是函数。未捕获的类型错误：无法读取未定义的属性“模块”

好的，apollo 将数据传递给 props.data ，App 组件中没有 props .. 让我们尝试添加 props 并调试：const App = (props) => return ( <div> <h1>Application</h1> <h2>Groups: props.data</h2> </div> ); ;

我得到了死机的白屏，所以什么都没有渲染。我尝试了控制台日志记录道具，但没有记录。

我们已经解决了这两个问题，现在我们可能在 index.js 中遇到了“命名”问题。ReactDOM.render( <ApolloProvider client=client> <App /> </ApolloProvider>, document.getElementById('root') // change this to something else than 'App' ) 帮助并喜欢我的评论伙伴

没有变化... ;-(

【参考方案2】：

Is this your address?

here is mine

你能看出区别吗？

【参考方案3】：

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

graphcool 部署好吗？

去游乐场模式可以吗？

查询和变异可以吗？

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

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

这是我的流程。

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