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

Question

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

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

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文件（这是问题所在，某处...）

//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文档中的基本查询会有所帮助。

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

要记住的另一件事是GraphQL是异步的，因此props.data将始终可用，但最初将为空。 渲染逻辑之前，您的渲染逻辑将需要通过验证this.props.data.params是否真实来解决这一问题。 您还可以检查查询是否仍在进行中或已完成 。

编辑 ：因为您在传递给graphql()的配置对象中定义了名称属性（ AllParamsQuery ），所以查询结果将作为该道具而不是data可用-即'this.props.AllParamsQuery.params`。