メインコンテンツまでスキップ

REST APIの呼びだし

ToDoアプリからREST APIを呼び出して、サーバから取得したデータを画面に表示していきましょう。まずは、TodoServiceでAPIクライアントを使うように修正します。

TodoServiceの修正

TodoServiceの各メソッドから、適切なAPIクライアントのメソッドを呼びだすように修正していきます。

共通的な設定をしているconfigと自動生成されたTodosApibackendからimportします。

src/services/TodoService.ts
import {TodosApi, config} from 'backend';

次にTodosApiのインスタンスを作成し、TodoServiceのメソッドから呼びだすように修正します。 TodosApiconfigを渡すことで、接続先を切り替えられるようにします。 TodoServiceの3つのメソッドは以下のようになります。

const todosApi = new TodosApi(config);

const getTodos = async () => {
return await todosApi.getTodos();
};

const postTodo = async (text: string) => {
return await todosApi.postTodo({newTodo: {text}});
};

const putTodo = async (id: number, completed: boolean) => {
return await todosApi.putTodo({todoId: id, todoStatus: {completed}});
};

ここまではServiceでtype ToDoを定義していましたが、Open APIドキュメントで定義されているモデルを利用するように修正します。 また、メソッドを修正するとTodoServiceのダミーデータであるtodosidが不要になるので削除します。

TodoServiceを次のソースコードで上書きしてください。

src/services/TodoService.ts
import {TodosApi, config} from 'backend';

const todosApi = new TodosApi(config);

export type {Todo} from 'backend';

const getTodos = async () => {
return await todosApi.getTodos();
};

const postTodo = async (text: string) => {
return await todosApi.postTodo({newTodo: {text}});
};

const putTodo = async (id: number, completed: boolean) => {
return await todosApi.putTodo({todoId: id, todoStatus: {completed}});
};

export const TodoService = {
getTodos,
postTodo,
putTodo,
};

動作確認

これでToDoアプリから登録したToDoが保存され、アプリを再起動しても、前に登録したToDoが参照できるようになりました。 実際にアプリを動かして、そのようになっていることを確認していきましょう。次の手順でアプリを操作してください。

  1. APIサーバを起動
  2. アプリを起動
  3. ログイン
  4. ToDo一覧の「全て」タブで全量(初回は0件)を確認
  5. ToDo登録画面からToDoを登録
  6. アプリを閉じる
  7. アプリを起動
  8. ToDo一覧の「全て」タブで登録したToDoがあることを確認

また、自分で起動しているアプリ以外から登録されたデータも参照できるようになっています。次の手順を実施して、他の人がToDoを追加したときの動作を確認してみましょう。

  1. APIサーバを起動
  2. アプリを起動
  3. ログイン
  4. ToDo一覧の「全て」タブで全量を確認
  5. curlなどでToDoを登録
  6. 設定タブをタップして、設定画面を表示後、ホームタブをタップ(useFocusEffectでデータを再取得するため)
  7. curlなどで登録したToDoが表示される
curlでの登録
curl http://localhost:9080/api/todos -X POST -d "{\"text\": \"アプリ外からの登録\"}" -H "Content-Type: application/json"
注記

Windowsのコマンドプロンプトで上記コマンドを実行すると文字化けします。

以下のような内容のファイルをUTF-8で作成し、-d "{\"text\": \"アプリ外からの登録\"}"のかわりに-d@${作成したファイル名}を指定してcurlコマンドを実行してください。

{
"text": "アプリ外からの登録"
}

これで、REST APIを呼びだせるようになりました。しかし、このままではAPIを呼びだしている間も画面が操作可能のままになってしまいますし、ユーザにアプリが処理中であることを伝えられません。

そこで、次はAPIの呼びだし中に画面の一部を操作不可にし、ユーザに処理中であることを伝えるインジケータを表示するように修正します。