您将要创造的
在这些教程中，我将向您展示如何使用AWS AppSync和React Native创建GraphQL数据库并与之交互。 该应用程序将具有实时和脱机功能，我们通过AppSync开箱即用。
在这篇文章中，我们将通过完成React Native客户端的构建来总结所有内容。 该项目有点太复杂，无法逐步介绍，但是我将解释项目架构并向您展示源代码的关键部分。
应用程序架构和文件夹结构概述
我们的应用程序将具有一个主要入口点，该入口点将包含两个选项卡式视图。 一个选项卡将从GraphQL数据库中列出城市，另一个选项卡是添加新城市的输入表单。 “ 城市”选项卡将是一个导航器，允许用户导航到各个城市。
我们将主要组件存储在源文件夹中，并将在src目录中拥有其他文件夹来保存我们的GraphQL变异，查询和订阅。
我们还将有一个资产文件夹来保存我们的图像。
创建和配置React Native Client
作为参考，请在GitHub repo教程中查看该应用程序的最终代码 ，但我将概述从头开始创建该应用程序所采取的一些步骤。
首先，我们使用Expo创建了一个新的React Native应用程序。
进入新创建的项目后，我们就安装了依赖项。 对于GraphQL和AppSync功能，我们使用以下依赖项：
aws-appsync
aws-appsync-react
graphql-tag
react-apollo
uuid我们还在UI设计中使用了以下依赖项：
react-navigation
react-native-elements
react-native-vector-icons另外，一旦安装了Vector Icons库，我们就将其链接：
react-native link react-native vector-icons 安装依赖项后，我们从AppSync控制台下载了AppSync.js文件。 在AppSync项目控制台中，我们在底部选择了React Native ，然后单击橙色的“ 下载”按钮以下载此配置文件。
此配置文件包含我们创建新客户端所需的AppSync客户端信息。
配置提供者和商店
在应用程序的顶层，我们将进行配置以将AppSync API与React Native客户端连接起来。 如果您以前使用过Redux或React Apollo，这将是很熟悉的。 如果还没有，请记住， Provider的ApolloProvider （在我们的情况下为ApolloProvider ）都可以访问其给定的功能。
以下代码是我们的新App.js文件，它是从index.js入口点导入的主要组件。
import React from 'react'
import Tabs from './src/Tabs'
import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { ApolloProvider } from 'react-apollo';
import appSyncConfig from './aws-exports';
const client = new AWSAppSyncClient({
url: appSyncConfig.graphqlEndpoint,
region: appSyncConfig.region,
auth: {
type: appSyncConfig.authType,
apiKey: appSyncConfig.apiKey,
}
});
const WithProvider = () => (
);
export default WithProvider 在此文件中，我们将结合使用来自aws-appsync的AWSAppSyncClient构造函数以及我们的aws- exports.js文件中的配置来设置一个新的AppSync客户端，该文件提供GraphQL API URL，区域，身份验证类型和身份验证API密钥。
然后我们总结我们的主要入口点，将举行我们的标签导航的Tabs.js文件，在ApolloProvider并传入的AppSync客户作为客户端的道具。 我们还将Tabs组件包装在从aws-appsync-react导入的Rehydrated组件中。 这将确保我们在呈现UI之前已从异步存储中读取并重新缓存了缓存。
现在，我们的应用程序将能够从AppSync端点查询数据，并执行变异和订阅！
导航
该应用程序的主要入口是选项卡式导航，该选项卡通过React Navigation在Tabs.js文件中实现。
我们在这里所做的是创建和导出具有两个选项卡的TabNavigator 。 这些是：
- 城市 ：此组件列出了我们的城市，它本身就是一个导航器组件。 该组件是一个导航器，因为我们希望能够导航到每个单独的城市并查看城市中的位置。
- AddCity ：此组件是我们可以添加新城市的一种形式。
可重复使用的组件
这个程序只有一个可重用的组件，一个自定义的TextInput 。 由于我们将一遍又一遍地复制这种样式和功能，因此我们决定使其成为自己的组件。 输入组件在Input.js中实现。
城市清单和城市导航
该应用程序的主视图是我们将从GraphQL检索的城市列表。 我们希望能够从每个列出的城市导航到该城市的详细视图，我们可以在其中添加位置。
为此，我们使Cities.js成为自己的StackNavigator，而City.js则是我们在选择城市时导航到的组件。 单击“城市”中的Cities ，我们会将其名称和ID作为道具传递给“ City 。
Cities.js
在此组件中，我们将使用listCities查询进行获取，并且还将订阅NewCitySubscription ，以便在添加新城市（甚至来自其他客户端）时，我们将处理该订阅并更新城市阵列。 listCities查询使我们的组件中可用的城市数组this.props.cities 。
City.js
在此组件中，我们从导航（作为props.navigation.state.params.city ）传递给城市作为道具。 我们使用城市id值通过listLocations查询获取所选城市的位置列表。 我们使用NewLocationSubscription订阅以类似于在Cities.js中订阅新城市的方式订阅新位置。 当添加新城市时，我们还提供了optimisticResponse和update功能。
新增城市
最后，我们需要在AddCity.js文件中实现将新城市添加到GraphQL API的功能 。 为此，我们将一个变体与一个将调用createCity的表单一起传递给表单输入值。
AddCity具有我们在GraphQL组成中定义的onAdd函数，该函数不仅将新城市写入GraphQL数据库，而且还通过使用optimisticResponse和update的组合来实现乐观UI。
变异，查询和订阅
突变，查询和订阅是与我们的GraphQL API集成的核心功能。 在我们的应用程序中，使用AppSync客户端在Cities.js ， City.js和AddCity.js文件中实现了此功能。
让我们仔细看看在我们的代码中如何实现突变，查询和订阅。
查询
首先，让我们看一下如何创建和导出可以与AppSync模式中的listCities查询进行交互的GraphQL查询。 此代码包含在src / queries / ListCities.js文件中。
import gql from 'graphql-tag';
export default gql`
query listCities {
listCities {
items {
name
country
id
}
}
}` 接下来，我们导入此查询在Cities.js文件，与一些助手一起从react-apollo ，及导线上部分，我们希望能够获得使用该数据compose和graphql从react-apollo 。
import { compose, graphql } from 'react-apollo'
import ListCities from './queries/ListCities'
class Cities extends React.Component {
// class definition here
// now have access to this.props.cities
}
export default compose(
graphql(ListCities, {
props: props => ({
cities: props.data.listCities ? props.data.listCities.items : [],
})
})
)(CityList) 现在，我们可以从GraphQL服务器访问城市数组作为道具。 我们可以使用this.props.cities来映射来自GraphQL的citys数组。
变异
要创建一个突变，首先我们需要创建一个基本的GraphQL突变并将其导出。 我们在src / mutations / CreateCity.js文件中执行此操作。
import gql from 'graphql-tag'
export default gql`
mutation addCity($name: String!, $country: String!, $id: ID!) {
createCity(input: {
name: $name, country: $country, id: $id
}) {
name
country
id
}
}
`现在，我们可以将这种突变（以及Apollo帮助器）导入AddCity.js文件中，并在组件中使用它：
import { compose, graphql } from 'react-apollo'
import AddCityMutation from './mutations/AddCity'
class AddCity extends React.Component {
// class definition here
// now have access to this.props.onAdd()
}
export default compose(
graphql(AddCityMutation, {
props: props => ({
onAdd: city => props.mutate({
variables: city
})
})
})
)(AddCity) 现在，我们可以访问名为onAdd的道具，该道具将要发送给该对象的对象传递给突变！
订阅内容
订阅使我们可以订阅数据更改，并在我们的应用程序中实时更新它们。 如果我们要通过添加或删除城市来更改数据库，则希望我们的应用程序实时更新。
首先，我们需要创建突变并将其导出，以便可以在客户端中访问它。 我们将其保存在src / subscriptionsNewCitySubscriptions.js文件中。
import gql from 'graphql-tag'
export default gql`
subscription NewCitySub {
onCreateCity {
name
country
id
}
}`;现在我们可以将订阅导入并附加到Cities.js中 。 我们已经研究了如何从API中获取城市。 现在让我们更新此功能，以订阅新的更改并在添加新城市时更新city数组。
import AllCity from './queries/AllCity'
import NewCitiesSubscription from './subscriptions/NewCitySubscription';
import { compose, graphql } from 'react-apollo'
class Cities extends React.Component {
componentWillMount(){
this.props.subscribeToNewCities();
}
render() {
// rest of component here
}
}
export default compose(
graphql(ListCities, {
options: {
fetchPolicy: 'cache-and-network'
},
props: (props) => {
return {
cities: props.data.listCities ? props.data.listCities.items : [],
subscribeToNewCities: params => {
props.data.subscribeToMore({
document: NewCitiesSubscription,
updateQuery: (prev, { subscriptionData: { data : { onCreateCity } } }) => {
return {
...prev,
listCities: {
__typename: 'CityConnection',
items: [onCreateCity, ...prev.listCities.items.filter(city => city.id !== onCreateCity.id)]
}
}
}
})
}
}
}
})
)(Cities) 我们添加了一个名为subscribeToNewCities的新道具，我们在componentDidMount中将其称为。 在订阅中，我们传入一个文档（订阅定义）和updateQuery来描述我们希望在更新时发生的事情。
我们从传递给updateQuery函数的道具中解构createCity （包含突变），并返回所有现有值以及包含先前城市以及从createCity获得的新城市数据的更新过的listCities数组。
乐观的用户界面
如果我们不想等待订阅从API返回最新数据以更新UI怎么办？
如果用户创建了一个新城市，我们希望在收到后端服务的确认之前，将其自动添加到“ citys”数组并在应用程序中进行渲染。
我们可以使用一些技术和功能轻松地做到这一点。
让我们将AddCityMutation更新为以下内容（您可以在AddCity.js源文件中查看此代码）：
import { compose, graphql } from 'react-apollo'
import AddCityMutation from './mutations/AddCity'
class AddCity extends React.Component {
// class definition here
// now have access to this.props.onAdd()
}
export default compose(
graphql(AddCityMutation, {
props: props => ({
onAdd: city => props.mutate({
variables: city,
optimisticResponse: {
__typename: 'Mutation',
createCity: { ...city, __typename: 'City' }
},
update: (proxy, { data: { createCity } }) => {
const data = proxy.readQuery({ query: ListCities });
data.listCities.items.unshift(createCity);
proxy.writeQuery({ query: ListCities, data });
}
})
})
})
)(AddCity)在这里，我们向mutate函数参数对象添加了两个新属性：
-
optimisticResponse定义您希望更新功能中可用的新响应。 -
update有两个参数，代理（允许您从缓存中读取）和要用于进行更新的数据。 我们读取当前的缓存（proxy.readQuery），将其添加到项目数组中，然后再写回缓存，这将更新我们的UI。
结论
GraphQL越来越成为主流。 围绕GraphQL的许多复杂性与管理后端和API层有关。 但是，诸如AppSync之类的工具消除了这种复杂性，使开发人员无需花费大部分时间在服务器上进行配置和工作。
我期待着在这个领域有更多的创新，迫不及待地想看看我们在2018年还会看到什么！
如果您有兴趣将AppSync与Serverless框架一起使用，请查看有关如何将两者一起使用的出色介绍 。
如果您想了解有关AWS AppSync的更多信息，建议您看一下AppSync主页和构建GraphQL客户端的文档 。
如果您想为这个项目做贡献，可以连接到我们的GitHub repo 。 如果您有任何想法，请随时向我们发送PR，或将该应用程序用作您下一个React Native GraphQL项目的入门者！
翻译自: https://code.tutsplus.com/tutorials/code-an-app-with-graphql-react-native-and-aws-appsync-the-app--cms-30569