Ionic-angularでGraphQLデータを取得する / ionicを使用したhybridなアプリを開発する忘備録02

2020.03.25

第 2 回目は、フロントエンド側で ionic v4(angular) を構築して Graphql で値を取得していきたいと思います。

作業工程動画

Ionic のコマンドラインを global にインストールします。

npm i -g ionic

次は Ionic のコマンドラインを使ってプロジェクトを作成します

ionic start --type=angular

プロジェクト名など聞かれますので任意の名前入力したり、選択したりします。

今回はプロジェクト名を　frontend として template を blank として進めます。

プロジェクトに移動して動作を確認します。

cd frontend
ionic serve

angular のコマンドラインも使用するので、global にインストールします。

npm install -g @angular/cli

angular を最新のバージョンにアップデートします。

ng update @angular/cli @angular/core

angular-apollo コマンドで使用することで依存パッケージや GraphQL 接続用のファイルを作成します。 (Angular を最新版にしないとこのコマンドでエラーが出て進めなかったので注意)

ng add apollo-angular

環境変数 gitignore に追加した上で、必要な情報を記載します。

export const environment = {
  production: false,
  graphqlUri: 'GraphQLのエンドポイント',
}

取得する GraphQL エンドポイントを環境変数で追加します。

最後に GraphQL からの値を取得・表示できるかテストします。

太郎・次郎・三郎などと name が表示出来ていれば、オッケーです。

今回作成したコードはこちらにありますのでご参考ください Github リポジトリ