如何使用 react 和 react-apollo 从 graphql 服务器获取数据？

Question

经过大约 6-8 小时的尝试，我求助于您。 我只想查询我的 graphql 服务器和响应数据作为道具输入我的反应组件（参见 ParameterBox.js）。 请让我知道我在做什么错误的。

供参考：INDEX.JS 文件（可能正确）

import React from 'react';
import ReactDOM from 'react-dom';
import {
    ApolloClient,
    createNetworkInterface,
    ApolloProvider,
} from 'react-apollo';
import App from './App';


const networkInterface = createNetworkInterface({
    uri: 'http://localhost:3001/graphql'
});
const client = new ApolloClient({
    networkInterface: networkInterface
});

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

供参考：APP.JS FILE（我认为是正确的）

//App.js
import React, { Component } from 'react';
import ParameterBox from './ParameterBox';

class App extends Component {
    render(){
        return(
            <div>
                <ParameterBox />
            </div>
        )
    }
}
export default App;

PARAMETERBOX.JS FILE（这里是问题所在，某处...）

//ParameterBox.js
import React, { Component } from 'react';
import axios from 'axios';
import { gql, graphql } from 'react-apollo';
import ParameterList from './ParameterList';

class ParameterBox extends Component {
    constructor (props) {
        super(props);
        this.state = { data: [] };
        this.loadParamsFromServer = this.loadParamsFromServer.bind(this);
    }
    //*** Old Method ***/
    // I still set my data using the old methods of API urls. I want to switch to GraphQL
    loadParamsFromServer(){
        axios.get('http://localhost:3001/api/params')
            .then (res => {
                this.setState({ data: res.data });
            })
    }
    //**** end old method ****/
    componentDidMount() {
        this.loadParamsFromServer();
    }
    render(){
        return(
            <div >
                <h2> Parameters: </h2>
                <p> HOW DO I GET IT HERE? {this.props.AllParamsQuery } </p>
                <ParameterList
                    data={ this.state.data }/>
            </div>
        )
    }
}

const AllParams = gql`
    query AllParamsQuery {
        params {
            id,
            param,
            input
        }
    }`;

export default graphql(AllParams, {name: 'AllParamsQuery'})(ParameterBox);

Answer 1

您可能会发现查看基本查询的 Apollo 文档很有帮助 here。

当您使用 graphql HOC 包装您的组件时，它会将您的查询发送到服务器，然后将结果作为 this.props.data 提供给您的组件。因此，您的特定查询的结果将在 this.props.data.params 处找到（返回数据中未引用操作名称 AllParamsQuery）。

要记住的另一件事是 GraphQL 是异步的，因此虽然 props.data 始终可用，但最初它是空的。您的渲染逻辑需要在尝试渲染之前通过验证 this.props.data.params 是否真实来说明这一事实。您还可以检查查询是否为 still in flight or has completed.

Edit：因为你在传给graphql()的config对象里面定义了一个名字属性（AllParamsQuery），你的查询结果将作为该道具而不是 data 可用——即 'this.props.AllParamsQuery.params`.

如何使用 react 和 react-apollo 从 graphql 服务器获取数据？

how to get data from graphql server using react and react-apollo?

javascript

reactjs

graphql

react-apollo