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

作成：2023年1月1日
（本記事は次の記事の続きです「React Native + Expo + Amplify アプリを EAS でデプロイ」）

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

データモデルの設計

Amplify Studio の左側のリストの「Set up」の「Data」を選択します。ここでデータモデルを作成していきます。

Personモデルを作成していきます。「+ Add model」ボタンをクリックします。
最上部のフィールドに「Person」と入力します。
「+ Add a field」を押して新しいフィールドを追加して入力します。
Properties の Is required にチェックを入れます。
右上の「Save and Deploy」をクリックしてデプロイします。

プロジェクトのルートで 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」を開きます。

右にある「Create person」をクリックしてPersonデータを作成します。
電話番号のフォーマットは [phone] となります。

作成したらプルします。プルするリンクは、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

App.js

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

データが取れました！

参考リンク
・フルスタック React アプリケーションを構築する、　モジュール 4: GraphQL API とデータベースを追加する
　await API の使い方の参考
・Amplify Dev Center
　React Native での GraphQL の使い方
・How to Fix the “Unexpected reserved word (await)” Error in JavaScript
　エラー unexpected reserved word 'await' が出た時の対処