LearnApollo项目：React Native基础查询教程（2/6）-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00057/article/details/148506231

LearnApollo项目：React Native基础查询教程（2/6）

learnapollo 👩🏻‍🏫 Learn Apollo - A hands-on tutorial for Apollo GraphQL Client (created by Graphcool) 项目地址: https://gitcode.com/gh_mirrors/le/learnapollo

前言

本教程是LearnApollo项目中React Native技术栈的第二部分，将带领开发者学习如何使用Apollo Client进行GraphQL基础查询操作。通过本教程，你将掌握在React Native应用中查询并显示个人训练师信息的方法。

准备工作

在开始之前，请确保你已经完成了以下准备工作：

确保开发环境已配置React Native开发所需工具
了解基本的React Native组件开发知识
熟悉JavaScript ES6语法特性

GraphQL服务器数据结构

我们的Pokedex应用后端提供了以下核心数据结构：

type Trainer {
  id: String!
  name: String!
  ownedPokemons: [Pokemon]
}

type Pokemon {
  id: String!
  url: String!
  name: String!
  trainer: Trainer
}

这个结构定义了：

训练师(Trainer)拥有ID、名称和拥有的宝可梦列表
宝可梦(Pokemon)包含ID、图片URL、名称和所属训练师信息

构建训练师查询

基本查询语法

要查询特定名称的训练师信息，我们可以使用以下GraphQL查询语句：

query TrainerQuery {
  Trainer(name: "你的名字") {
    id
    name
  }
}

在React Native中实现查询

在React Native应用中，我们需要使用graphql-tag包提供的gql模板标签来定义查询：

import gql from 'graphql-tag';

const TrainerQuery = gql`
  query TrainerQuery {
    Trainer(name: "你的名字") {
      id
      name
    }
  }
`;

将查询与组件连接

使用react-apollo

react-apollo包提供了graphql高阶组件(HOC)，可以将GraphQL查询结果注入到React组件中：

import { graphql } from 'react-apollo';

const PokedexWithData = graphql(TrainerQuery)(Pokedex);

处理查询状态

注入的data属性包含以下重要状态：

loading: 布尔值，表示查询是否正在进行中
error: 查询过程中出现的错误信息
Trainer: 查询成功后返回的训练师数据

完善Pokedex组件

添加PropTypes验证

首先为组件添加对data属性的类型检查：

static propTypes = {
  data: React.PropTypes.shape({
    loading: React.PropTypes.bool,
    error: React.PropTypes.object,
    Trainer: React.PropTypes.object,
  }).isRequired,
}

实现渲染逻辑

根据查询状态渲染不同UI：

render() {
  // 错误处理
  if (this.props.data.error) {
    return <Text>加载出错</Text>;
  }
  
  // 加载状态
  if (this.props.data.loading || !this.props.data.Trainer) {
    return <Text>加载中...</Text>;
  }
  
  // 成功状态
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        你好, {this.props.data.Trainer.name}!
      </Text>
      <Text style={styles.subtitle}>
        你的图鉴中有0只宝可梦
      </Text>
    </View>
  );
}

样式优化建议

为了使UI更加美观，可以添加以下样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f2f2f2',
  },
  title: {
    marginTop: 64,
    padding: 16,
    fontSize: 24,
    textAlign: 'center',
  },
  subtitle: {
    padding: 16,
    paddingTop: 0,
    fontSize: 18,
    textAlign: 'center',
  },
});