REST APIの呼びだし

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

`TodoService`の修正

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

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

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

次にTodosApiのインスタンスを作成し、TodoServiceのメソッドから呼びだすように修正します。 TodosApiにconfigを渡すことで、接続先を切り替えられるようにします。 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のダミーデータであるtodosとidが不要になるので削除します。

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が参照できるようになりました。実際にアプリを動かして、そのようになっていることを確認していきましょう。次の手順でアプリを操作してください。

APIサーバを起動
アプリを起動
ログイン
ToDo一覧の「全て」タブで全量（初回は0件）を確認
ToDo登録画面からToDoを登録
アプリを閉じる
アプリを起動
ToDo一覧の「全て」タブで登録したToDoがあることを確認

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

APIサーバを起動
アプリを起動
ログイン
ToDo一覧の「全て」タブで全量を確認
curlなどでToDoを登録
設定タブをタップして、設定画面を表示後、ホームタブをタップ（useFocusEffectでデータを再取得するため）
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の呼びだし中に画面の一部を操作不可にし、ユーザに処理中であることを伝えるインジケータを表示するように修正します。

TodoServiceの修正​

動作確認​

`TodoService`の修正

動作確認