apollo로 데이터를 가져 와서 네이티브로 반응하는 방법

Question

나는 express-graphql로 간단한 graphql 서버를 만들 수 있었다. 쿼리에 대한 http://localhost:8080/graphql에서

:

{ 
    "data": { 
    "grocers": [ 
     { 
     "_id": "58567074987ed341fed7fcb1", 
     "name": "Martina", 
     "description": "Las mejores verduras de la alpujarra", 
     "location": "Ugíjar" 
     }, 
     { 
     "_id": "585676ef987ed341fed7fdd2", 
     "name": "Antonio", 
     "description": "Leña y calorcito para todos!", 
     "location": "Ugíjar" 
     } 
    ], 
    "products": [ 
     { 
     "name": "Concierto de guitarra" 
     } 
    ] 
    } 
} 

지금까지 너무 좋은 :

{ 
     grocers { 
     _id 
     name 
     description 
     location 
     }, 
     products(grocerId: "585676ef987ed341fed7fdd2") { 
     name 
     } 
    } 

나는 다음과 같은 얻을. 이제 React Native에서 쿼리하고 싶습니다. 나는 Apollo 클라이언트와 그렇게하려고 노력해 왔습니다. 당분간, 나는 그들의 문서에서 설명한 바닐라 방법으로 질의 할 수 있었고 올바른 결과를 얻었다.

하지만 여기서는 설명 된대로 반응하는 아폴로 도구로 처리하는 데 어려움을 겪고 있습니다. http://dev.apollodata.com/react/ 나는, 나 또한 그래서 기본적으로 내가 상당히 잃었어요 기본 및 GraphQl을 반응 새로 온 정확히 아폴로 작품 모르는 ...

// ... 

const networkInterface = createNetworkInterface({ uri: 'http://localhost:8080/graphql' }); 

const client = new ApolloClient({ 
    networkInterface 
}); 

class Alpuzon extends Component { 

    constructor() { 
    super(...arguments); 

    } 

    _renderScene(route, navigator) { 
    if (route.id === 1) { 
     return <AlpuzonPage navigator={navigator} /> 
    } else if (route.id === 2) { 
     return <PageTwo navigator={navigator} /> 
    } 

    return false; 
    } 

    _configureScene() { 
    return Navigator.SceneConfigs.FloatFromRight; 
    } 

    render() { 
    return (
     <ApolloProvider client={client}> 
     <Navigator 
      initialRoute={{ id: 1 }} 
      renderScene={this._renderScene} 
      configureScene={this._configureScene} 
     /> 
     </ApolloProvider> 
    ); 
    } 
} 

// ... 

let AlpuzonPage = React.createClass({ 

    _handlePress() { 
    this.props.navigator.push({id: 2}); 
    }, 

    render() { 

    const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`; 

    class GrocerListView extends Component { 
     render() { 
     <ListView 
      dataSource={data.grocers} 
      renderRow={(obj) => <Text>{obj.name}</Text>} 
     /> 
     } 
    } 

    GrocerListView.propTypes = { 
     data: PropTypes.shape({ 
     loading: PropTypes.array.isRequired, 
     grocers: PropTypes.array 
     }).isRequired 
    }; 

    const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView); 

    return (
     <View style={{ flex: 1, flexDirection: 'column'}}> 
     <GrocerListView /> 
     </View> 
    ); 
    } 
}); 

: 여기에 코드입니다. 문서는 많은 나에게 도움이되지 않습니다 : 당신은 GrocerListViewWithData를 정의하지만 AlpuzonPage에 GrocerListView를 사용하는/

Answer 1

• . GrocerListView에서
• 대신 data의 this.props.data에 액세스해야하며 또한로드를 완료 this.props.data.loading 기다릴 필요가

이있는 업데이트 된 코드 :

let AlpuzonPage = React.createClass({ 

    _handlePress() { 
    this.props.navigator.push({id: 2}); 
    }, 

    render() { 

    return (
     <View style={{ flex: 1, flexDirection: 'column'}}> 
     <GrocerListViewWithData /> 
     </View> 
    ); 
    } 
}); 

class GrocerListView extends Component { 
    render() { 
    if (this.props.data.loading) { 
     return (<div>Loading</div>) 
    } 

    <ListView 
     dataSource={this.props.data.grocers} 
     renderRow={(obj) => <Text>{obj.name}</Text>} 
    /> 
    } 
} 

GrocerListView.propTypes = { 
    data: PropTypes.shape({ 
    loading: PropTypes.array.isRequired, 
    grocers: PropTypes.array 
    }).isRequired 
}; 

const getGrocersQuery = gql`query getGrocersQuery { grocers { name } }`; 

const GrocerListViewWithData = graphql(getGrocersQuery)(GrocerListView); 

것은 당신이 작동 실험 할 경우 예 : React Native with Apollo, 확인 Learn Apollo, React Native 및 Exponent JS 트랙이 있습니다.