Openapi-fetch とOpenapi-typescriptを使ってみた！ I tried openapi-fetch and openapi-typescript!

このスライドはReact Osaka 2025 02で発表した際に使ったものです！
I used this slide in my presentation at React Osaka 2025 02!

- https://react-osaka.connpass.com/event/341614/

Transcript

1. Openapi-fetch と Openapi-typescriptを使ってみた！ I tried openapi-fetch and openapi-typescript! © Nabe-cyan(t-pot.me)
2. はじめに First of all • 職場では基本的に1人で開発しているので、我流なコーディングなどが含ま れているかもしれません。話の途中での様々な指摘・アドバイスは超歓迎で す^^ • Since I am basically a one-person developer at my workplace, there may be some my-way coding etc. Any advice/recommendation is super welcome even during the talk :]
3. Openapi-fetch/Openapi-typescript を使った ことのある方 ✋ Anyone who have used Openapi-fetch/Openapi-typescript ? ✋
4. OpenAPIのスキーマファイルについて知っている・ 扱ったことのある方 ✋ Anyone who know about or have worked with OpenAPI schema files✋
5. OpenAPIとは / What is OpenAPI • RESTful APIの仕様を記述するための標準フォーマット • JSONまたはYAML形式でAPIのエンドポイント、リクエスト/レスポンスの形式、認証方法 などを定義可能 • APIの設計、ドキュメント生成、コード生成、テストの自動化などが容易になる original answer: https://chatgpt.com/share/67ac5f40-5e10-8007-9093-12a278a33f63 • Standard format for describing RESTful API specifications • API endpoints, request/response formats, authentication methods, etc. can be defined in JSON or YAML format • Facilitates API design, document generation, code generation, test automation, etc.
6. Openapi-fetch/Openapi-typescriptとは What is Openapi-fetch/Openapi-typescript • レポジトリ/the repo is here👉 : github.com/openapi-ts/openapi-typescript • スキーマファイルをもとにTypeScriptの型・fetchクライアントの生成が可能なライ ブラリ • Library that can generate TypeScript type and fetch clients based on schema files OpenAPI TS OpenAPI fetch Schemas into types スキーマファイルを型に変換 ✓ Gen fetch client from schemas fetchクライアントをスキーマファイルから生成 ✓
7. 今回試した例 / Example I tried this time • github.com/htnabe/openapi-ts-fetch-example • 典型的なWeb API, アプリサーバーの構成 • Typical Web API, app server configuration • 次のURLのスキーマファイルを利用 • Next URL’s schema file is used https://petstore3.swagger.io/ /packages 　　┣ /libs (schemas) 　　┣ /web-api 　　┗ /web-app (vite + react)
8. 唯一困ったポイント / Only one troubling point • 上手く書かないとfetchのたびにクライアントを生成する必要がある • If not written well, it is necessary to generate a client for each fetch. • C#のシングルトンサービス（一つのインスタンスを使いまわす）パター ンのようにクライアントを使いまわしたかった • I wanted to use the client like the singleton service (use one instance of a service) pattern in C#
9. openapi-fetchでのclientの作り方・使い方 How to create/use a fetch client with OF import createClient from "openapi-fetch"; import type { paths } from "./my-openapi-3-schema"; const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" }); const {data} = await client.GET("/blogposts/{post_id}", { params: { path: { post_id: "123" }, … https://github.com/openapi-ts/openapi-typescript/tree/main/packages/openapi-fetch ⚠ If we follow this instruction, we have to define the client every time…
10. 解決策 / Solution (½) const apiClient = createClient<paths>({ baseUrl: "http://localhost:5200" }); export const ApiClientContext = createContext(apiClient); export const ApiClientProvider = ({ children }: { children: ReactNode }) => { return ( <ApiClientContext.Provider value={apiClient}> {children} </ApiClientContext.Provider> ); } • Decided to use `useContext`
11. 解決策 / Solution (2/2) function App() { const apiClient = useContext(ApiClientContext); useEffect(() => { const fetchData = async () => { const response = await apiClient.GET("/pet/{petId}", { params: { path: { petId: 10, }, }, }); …; • Can call the client from anywhere like this
12. あまりReactに関係ないけど気になっていること Not really related with React, but something I'm curious about • TSで動かせ、かつスキーマファイルから自動生成可能なWeb APIサー バーが見つからない • I couldn’t find any Web API server frameworks that can be automatically generated from the schema files and can run on TS ◦ Express + JSのサーバーのみopenapi-generatorで生成可能？ ◦ Only Express + JS server can be generated with openapi-generator? ◦ ほかに便利なライブラリってありますか？ ◦ Any other useful libraries?