GraphQL + Amplify + React Native + Expo でデータアクセス

作成：2023年1月1日
（本記事は次の記事の続きです「[React Native + Expo + Amplify アプリを EAS でデプロイ](https://qiita.com/RYO_/items/cea6184ddeaf6c1dbb4f)」）

アプリと Amplify の間で GraphQL でデータをやり取りしてみます。

# データモデルの設計
Amplify Studio の左側のリストの「Set up」の「Data」を選択します。ここでデータモデルを作成していきます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/3dcf7fd2-2992-35d0-08ea-16ac0d33795a.png">

Personモデルを作成していきます。「+ Add model」ボタンをクリックします。
最上部のフィールドに「Person」と入力します。
「+ Add a field」を押して新しいフィールドを追加して入力します。
Properties の Is required にチェックを入れます。
右上の「Save and Deploy」をクリックしてデプロイします。
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/012a6692-ffbe-6b3c-014e-75fa6709240e.png">
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/8e40b7ba-16b2-6cee-2044-6f615ce118d5.png">
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/3f1dcbe8-a1e4-02f3-f2c9-7a4c673503fd.png">


プロジェクトのルートで 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 │
└──────────┴─────────────────────────────┴───────────┴───────────────────┘
```

続いて、データを作成します。Amplify Studio の「Manage」の「Content」を開きます。
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/d1be7f30-f917-12d1-a9aa-a614072a9e45.png">

右にある「Create person」をクリックしてPersonデータを作成します。
電話番号のフォーマットは +81 090 1234 5678 となります。
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/08c284cf-bbb0-14f1-5063-0021718d9e32.png">
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/edbede67-3330-9d14-7ea8-f819177eaf91.png">

作成したらプルします。プルするリンクは、Amlifyコンソールの「ローカル設定手順」にあります。
```
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 しておきます。
```
amplify push
```

App.js で API と graphqlOperation を import します。
```
import { API, graphqlOperation, Amplify } from 'aws-amplify';
```
そして、 listPoople も import します。
```
import { listPeople } from './src/graphql/queries';
```
await API.graphql でデータベースからデータを取ってきます。
App.jsのコードへのリンク：[ブランチqiita20230101](https://github.com/ryoyuki6/expo-amplify20221231/blob/qiita20230101/App.js)
```javascript:App.js
const apiData = await API.graphql({ query: listPeople});
```
データが取れました！
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298045/1618d58c-de69-a168-ea76-d7c6e05742c9.png">

参考リンク
・[フルスタック React アプリケーションを構築する、　モジュール 4: GraphQL API とデータベースを追加する](https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/module-four/)
　await API の使い方の参考
・[Amplify Dev Center](https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/react-native/)
　React Native での GraphQL の使い方
・[How to Fix the “Unexpected reserved word (await)” Error in JavaScript](https://codingbeautydev.com/blog/javascript-unexpected-reserved-word-await/)
　エラー unexpected reserved word 'await' が出た時の対処