如何使用react和react-apollo從graphql服務器獲取數據？

經過大約6-8小時的嘗試，我正在訴諸幫助。 我只需要查詢我的graphql服務器以及作爲道具輸入到我的反應組件中的響應數據（請參閱ParameterBox.js）。請讓我知道我做錯了什麼。如何使用react和react-apollo從graphql服務器獲取數據？

僅供參考：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);

來源

2017-09-24 Kevin Danikowski

對於基本查詢here，您可能會發現查看Apollo文檔很有幫助。

當您用graphql HOC包裝組件時，它會將您的查詢發送到服務器，然後將結果作爲this.props.data提供給您的組件。因此，您的特定查詢的結果將在this.props.data.params處找到（操作名稱，AllParamsQuery未在返回的數據中引用）。

要記住的另一件事是GraphQL是異步的，所以雖然props.data將始終可用，但最初它將是空的。您的渲染邏輯將需要通過驗證this.props.data.params在呈現它之前的真實情況來說明這一事實。您還可以檢查查詢是否爲still in flight or has completed。

編輯：因爲你定義的名稱屬性（AllParamsQuery）傳遞給graphql()配置對象中，查詢結果將作爲該道具，而不是data - 即「this.props.AllParamsQuery.params` 。

來源

2017-09-24 21:29:16

謝謝！我一直把它定義爲國家，但它並沒有處於國家的狀態。但是'this.props.data.params'不起作用，'this.props.AllParamsQuery.params'工作。如果我不想使用'data'而不是'AllParamsQuery'，我需要將props數據設置爲查詢。 –

對不起，完全錯過了你傳遞一個名稱到配置。我更新了答案，以反映:) –

如何使用react和react-apollo從graphql服務器獲取數據？

回答

相關問題