发布日期：2023年1月1日
（本文章是以下文章的续集：“使用EAS部署React Native + Expo + Amplify应用程序”）

让我们尝试在应用程序和Amplify之间使用GraphQL交换数据。

数据模型的设计

在项目根目录下，执行 amplify pull。已添加“API”类别。

amplify pull --appId d3ua18*** --envName dev


Pre-pull status:

    Current Environment: dev
    
┌──────────┬─────────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name               │ Operation │ Provider plugin   │
├──────────┼─────────────────────────────┼───────────┼───────────────────┤
│ Auth     │ expoamplify20221222c8f18c47 │ Update    │ awscloudformation │
├──────────┼─────────────────────────────┼───────────┼───────────────────┤
│ Api      │ expoamplify20221222         │ Delete    │ awscloudformation │
└──────────┴─────────────────────────────┴───────────┴───────────────────┘

⚠️ Local changes detected.
⚠️ Pulling changes from the cloud will override your local changes.
? Are you sure you would like to continue? Yes
⠦ Fetching updates to backend environment: dev from the cloud.⠋ Building resourc⠙ Fetching updates to backend environment: dev from the cloud.✅ GraphQL schema compiled successfully.

Edit your schema at /Users/***expo-amplify20221222/amplify/backend/api/expoamplify20221222/schema.graphql or place .graphql files in a directory at /Users/***expo-amplify20221222/amplify/backend/api/expoamplify20221222/schema
✔ Successfully pulled backend environment dev from the cloud.
✅ 
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/***/expo-amplify20221222/amplify/backend/api/expoamplify20221222/schema.graphql or place .graphql files in a directory at /Users/***/expo-amplify20221222/amplify/backend/api/expoamplify20221222/schema
Successfully generated models. Generated models can be found in /Users/***/expo-amplify20221222/src
Post-pull status:

    Current Environment: dev
    
┌──────────┬─────────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name               │ Operation │ Provider plugin   │
├──────────┼─────────────────────────────┼───────────┼───────────────────┤
│ Auth     │ expoamplify20221222c8f18c47 │ No Change │ awscloudformation │
├──────────┼─────────────────────────────┼───────────┼───────────────────┤
│ Api      │ expoamplify20221222         │ No Change │ awscloudformation │
└──────────┴─────────────────────────────┴───────────┴───────────────────┘

完成后执行一个pull操作。 pull操作的链接在Amplify控制台的“本地设置步骤”中。

amplify pull --appId d3ua18**** --envName dev

执行 amplify mock 将创建 /src/graphql。

% amplify mock
✅ GraphQL schema compiled successfully.

Edit your schema at /Users/***/amplify/backend/api/expoamplify20221231/schema.graphql or place .graphql files in a directory at /Users/***/amplify/backend/api/expoamplify20221231/schema
Creating new table DataStore
Creating new table PersonTable
Running GraphQL codegen
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions sr
c/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, muta
tions and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply 
nested] 2
✔ Generated GraphQL operations successfully and saved at src/graphql
AppSync Mock endpoint is running at http://172.20.10.6:20002
^C^Aborted!

通过代码使用GraphQL进行数据访问。

使用npm进行安装。

npm install aws-amplify @react-native-async-storage/async-storage @react-native-community/netinfo

我会放大推送。

amplify push

在App.js中，导入API和graphqlOperation。

import { API, graphqlOperation, Amplify } from 'aws-amplify';

然后，也要引入listPeople库。

import { listPeople } from './src/graphql/queries';

使用 await API.graphql 从数据库中获取数据。
App.js 代码链接：qiita20230101 分支的链接。

const apiData = await API.graphql({ query: listPeople});

参考链接
– 创建全栈React应用程序，模块4：添加GraphQL API和数据库
– 参考使用await API的方法
– Amplify开发者中心
– 在React Native中使用GraphQL的方法
– 如何修复JavaScript中的“意外保留字(await)错误”
– 处理出现“意外保留字await”错误的方法