如何使用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`。