如何使用 apollo 获取数据并对本机做出反应
How to fetch data with apollo and react native
我已经能够使用 express-graphql 制作一个简单的 graphql 服务器。
在http://localhost:8080/graphql
中查询:
{
grocers {
_id
name
description
location
},
products(grocerId: "585676ef987ed341fed7fdd2") {
name
}
}
我得到以下信息:
{
"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"
}
]
}
}
到目前为止一切顺利。现在我想从 React Native 查询。我一直在尝试与 Apollo 客户端一起这样做。现在,我已经能够按照他们的文档中的说明使用 vanilla 方法进行查询,并且得到了正确的结果。
但现在我正在努力使用此处解释的 React apollo 工具来做到这一点 http://dev.apollodata.com/react/。这是代码:
// ...
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>
);
}
});
...我不知道 apollo 是如何工作的,我也是 React Native 和 GraphQl 的新手,所以基本上我很迷茫。文档对我帮助不大:/
- 您正在定义
GrocerListViewWithData
但仅在 AlpuzonPage
中使用 GrocerListView
。
- 在
GrocerListView
中您应该访问 this.props.data
而不是 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);
如果您想使用 Apollo 试验 React Native 的工作示例,请查看 Learn Apollo,还有 React Native 和 Exponent JS 轨道 :)
我已经能够使用 express-graphql 制作一个简单的 graphql 服务器。
在http://localhost:8080/graphql
中查询:
{
grocers {
_id
name
description
location
},
products(grocerId: "585676ef987ed341fed7fdd2") {
name
}
}
我得到以下信息:
{
"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"
}
]
}
}
到目前为止一切顺利。现在我想从 React Native 查询。我一直在尝试与 Apollo 客户端一起这样做。现在,我已经能够按照他们的文档中的说明使用 vanilla 方法进行查询,并且得到了正确的结果。
但现在我正在努力使用此处解释的 React apollo 工具来做到这一点 http://dev.apollodata.com/react/。这是代码:
// ...
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>
);
}
});
...我不知道 apollo 是如何工作的,我也是 React Native 和 GraphQl 的新手,所以基本上我很迷茫。文档对我帮助不大:/
- 您正在定义
GrocerListViewWithData
但仅在AlpuzonPage
中使用GrocerListView
。 - 在
GrocerListView
中您应该访问this.props.data
而不是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);
如果您想使用 Apollo 试验 React Native 的工作示例,请查看 Learn Apollo,还有 React Native 和 Exponent JS 轨道 :)