Wie man Daten mit apollo holt und natives reagiert

Question

Ich bin in der Lage gewesen, einen einfachen graphql Bediener mit Eil-graphql zu bilden.

In http://localhost:8080/graphql für die Abfrage:

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

ich folgendes:

{ 
    "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" 
     } 
    ] 
    } 
} 

So weit so gut. Jetzt möchte ich von React Native abfragen. Ich habe es mit dem Apollo-Client versucht. Im Moment konnte ich mit der Vanilla-Methode wie in ihren Dokumenten beschrieben abfragen, und ich bekomme die richtigen Ergebnisse.

Aber jetzt kämpfe ich dafür mit dem reaktiven Apollo-Werkzeug wie hier erklärt . Hier ist der Code:

// ... 

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> 
    ); 
    } 
}); 

... Ich weiß nicht genau, wie apollo funktioniert, ich bin auch neu zu reagieren Einheimische und GraphQl so dass im Grunde bin ich ziemlich verloren. Die Dokumentation hilft mir nicht viel:/

Answer 1

• Sie GrocerListViewWithData definieren, sondern nur GrocerListView in AlpuzonPage verwenden.
• In GrocerListView sollten Sie this.props.data statt data zugreifen und auch für this.props.data.loading warten müssen geladen ist

Dies ist der aktualisierte Code:

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); 

Wenn Sie mit einem Arbeits experimentieren Beispiel für React Native mit Apollo, check Learn Apollo, gibt es auch eine React Native und eine Exponent JS Spur :)