GitHubにGraphQLでアクセスする(TypeScript/サーバレス)

GitHub GraphQL API v4 にアクセスし、情報を取得するためのプログラム解説です作成するもの ソースコード 最初に 認証機能 GitHubへのアクセス 上部エリア リポジトリ表示部分 まとめ

GitHubにGraphQLでアクセスする(TypeScript/サーバレス)

GitHub GraphQL API v4 にアクセスし、情報を取得するためのプログラム解説です作成するもの ソースコード

まとめ

今回のプログラムを作ってみて、GraphQLのクエリーを初めて触ってみたのですが、慣れていないせいもあって、欲しいデータにたどり着くまでかなり時間がかかりました。 さらにGitHubのAPIはRestだと取得できるのにGraphQLでは存在しないデータ(Trraficデータ)があって不便でした。この辺りは今後追加されることを期待します。

上部エリア

上部の表示やログイン処理の部分です 表示はReactで書いていますが、このアプリで書いたコンポーネントはpropsや標準stateは一切使っていません コンポーネント間のやりとりは@jswf/redux-moduleを使って、ReduxのStore経由になっていますTopArea.tsx LoginWindow.tsx LogoutWindow.tsx

リポジトリ表示部分

RepositorieList.tsx

GitHubへのアクセス

GraphQLgetRepositories.ts GitHubModule.ts

最初に

使用している主なパッケージ 前提条件 アプリケーションキーの発行

認証機能

OAuth認証にはFirebaseを利用しているので、アプリケーション登録のための初期設定さえ完了していれば、プログラム的には単純に書くことが出来ます。config.ts FirebaseGitAuthModule.ts

TypeScriptの環境構築

TypeScriptの基本文法を確認するのが主な場合は、「TypeScriptの実験環境の構築」を参照してください

TypeScriptの環境構築

TypeScriptの基本文法を確認するのが主な場合は、「TypeScriptの実験環境の構築」を参照してください

準備

AndroidStudioでテストプログラムの作成 Json用ライブラリの組み込み

準備

AndroidStudioでテストプログラムの作成 Json用ライブラリの組み込み