OpenAPI定義からReactのクライアントコード生成ツールにOrvalを採用した｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
こんにちは。エンジニアの牧田です。 先日から新規のプロジェクトでReactを書いていたのですが、その時にOpenAPI定義からReactのクライアントコードを生成するツールについていろいろと調査したので、今回はその紹介をしたいと思います。 結論としては、Orval を採用してみることにしました。 背景 スキーマ駆動開発はいいですよね。最近ではだいぶ浸透しているように感じます。スキーマ駆動開発には多くのメリットがありますが、開発者としてはやはりフロントエンドとバックエンドそれぞれの型定義が自動生成で一致するので安心感があります。 今回はスキーマとしてOpenAPIを使うという前提で話をしていきます。スキーマ駆動開発をする際の悩みどころとして、コード生成ツールとして何を使うかという問題があると思います。今回はフロントエンドに絞って実際に使用したツールを紹介しようと思います。 さまざまなコード生
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナ
はじめに 筆者はOpenAPIスキーマからRTK Queryのコードを生成するrtk-query-codegen-openapiに2020年頃からコントリビュートを続けていました. rtk-query-codegen-openapiは現在rtk-incubatorリポジトリではなく、redux-toolkit/packages/rtk-query-codegen-openapiに統合されています. 今回は、RTK Queryを幾つかの現場で本番運用して得られた優位性を公開します. 他ツールとの機能比較 RTK QueryとReact Queryが作成したマトリックスがある為、リンクだけ貼って省略します RTK Queryが作成したマトリックス React Queryが作成したマトリックス Best Futures of RTK Query 他のdata fetchingライブラリと比べても
restful-reactで始めるOpenAPI
型を生成してみる Get localhost:8080/users このような、ユーザー一覧を取得するエンドポイントを想定してみましょう。 まずopenapiのymlを定義します。 openapi: 3.0.0 info: description: "restful-react example." title: "test endpoints" version: "1.0.0" servers: - url: http://localhost:8080 paths: /users: get: description: get users operationId: get users responses: 200: $ref: "#/components/responses/users" components: schemas: user: type: object properties:
APIクライアントとスタブAPIサーバーのプログラムを自動生成して、疎通確認をする
はじめに 今回はAPIクライアントとスタブAPIサーバー（以下、スタブサーバー）のプログラムを自動生成して、 疎通確認を行います。プログラムの自動生成にはOpenAPI Generatorを使います。 APIクライアントは、Create React Appで作成するプロジェクトに導入します。 スタブサーバーは、なるべく手間をかけずにローカルに立てる方針で進めていきたいと思います。 環境 Windows10 Node.js v14.16.0 npm v6.14.11 Yarn 1.22.10 プロジェクトを作成する 下記のコマンドを実行して、「react-openapi-sample」という名前のReact+TypeScriptのプロジェクトを作成します。 npx create-react-app react-openapi-sample --template=typescript プロジェ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
