반응 및 반응 - 아폴로를 사용하여 graphql 서버에서 데이터를 얻는 방법은 무엇입니까?

Question

약 6 ~ 8 시간 후에 나는 도움을 요청하고 있습니다. 내가 원하는 것은 graphql 서버와 응답 데이터를 내 반응 구성 요소에 props로 입력하는 것입니다 (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 
import React, { Component } from 'react'; 
import ParameterBox from './ParameterBox'; 

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

PARAMETERBOX.JS (나는 그것이 올바른 생각) 파일을 APP.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

기본 검색어 인 here에 대한 아폴로 설명서를 검토하는 것이 도움이 될 수 있습니다.

graphql HOC로 구성 요소를 래핑하면 쿼리가 서버로 전송 된 다음 구성 요소에서 결과를 this.props.data으로 사용할 수있게됩니다. 따라서 특정 쿼리에 대한 결과는 this.props.data.params에 있습니다 (작업 이름, AllParamsQuery은 반환 된 데이터 내에서 참조되지 않습니다).

다른 점을 염두에 두어야 할 점은 GraphQL이 비동기 적이므로 props.data은 항상 사용 가능하지만 초기에는 비어 있습니다. 렌더링 로직은 렌더링을 위해 tyring하기 전에 this.props.data.params이 진실인지 확인함으로써 그 사실을 설명해야합니다. 쿼리가 still in flight or has completed인지 여부도 확인할 수 있습니다.

편집 : 당신은 당신이 graphql()에 전달하는 구성 객체 내부의 이름 속성 (AllParamsQuery)를 정의하기 때문에, 쿼리 결과가 소품 대신 data로 사용할 수 있습니다 - 즉, 'this.props.AllParamsQuery.params` .