Reputation: 5958
I've been able of making a simple graphql server with express-graphql.
In http://localhost:8080/graphql
for the query:
{
grocers {
_id
name
description
location
},
products(grocerId: "585676ef987ed341fed7fdd2") {
name
}
}
I get the following:
{
"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 far so good. Now I want to query from React Native. I've been trying to do so with the Apollo client. For now, i've been able to query with the vanilla method as explained in their docs, and I get the correct results.
But now i'm struggling for doing it with the react apollo tool as explained here http://dev.apollodata.com/react/. Here's the 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>
);
}
});
... I don't know exactly how apollo works, I'm also new to React Native and GraphQl so basically i'm fairly lost. The documentation doesn't help me much :/
Upvotes: 0
Views: 1300
Reputation: 7818
GrocerListViewWithData
but only use GrocerListView
in AlpuzonPage
.GrocerListView
you should access this.props.data
instead of data
and you also have to wait for this.props.data.loading
to finish loadingThis is the updated 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);
If you want to experiment with a working example for React Native with Apollo, check Learn Apollo, there is also a React Native and an Exponent JS track :)
Upvotes: 1