Rails Ranger は、Ruby on Rails APIのデフォルトを活用して、JavaScriptクライアントを作成する際の作業を楽にすることに焦点を当てたライブラリです。 これは本質的に、強力な Axios ライブラリをラップする薄いレイヤーでありながら、そのフルパワーを提供します。

インストール

$ yarn add rails-ranger

# or
$ npm install —-save rails-ranger

基本設定

最も基本的な設定は次のようになります。

api-client.js
import RailsRanger from 'rails-ranger'

const config = {
  axios: { baseURL: 'http://api.myapp.com' }
}

export default new RailsRanger(config)

ここで重要な注意点の1つは、 axios オプション内で送信するものはすべてそのままAxiosに渡されるため、必要に応じて構成できることです。

使用法

では、どのようにしてリクエストを開始しますか? このような:

some-front-end-component.js
import api from 'api-client'

api.list('users').then((response) => {
  // your code
})

それでは、ここで何が起こっているのかを分析してみましょう。

  1. 構成セクションに表示されている前のファイルでセットアップしたクライアントをインポートします。
  2. 私たちは list それからの関数、これは単なるエイリアスです index. これにより、 http://api.myapp.com/users URL。
  3. 内部で受け取るJSON response.data すべてのキーが自動的にスネークケースに変換されます!

また、次のようなネストされたリソースを利用できます。

api.resource(users, 1)
   .list('blogPosts', { hideDrafts: true })
   .then((response) => {
  // your code
})

そして、これは次のように要求します。

http://api.myapp.com/users/1/blog_posts&hide_drafts=true

Rails Rangerがリソースとパラメーターをキャメルケースからスネークケースに変換したため、アプリの各部分(クライアントとAPI)が推奨される標準で通信できることに注意してください。

みんな幸せ! 🎉

その他の機能

Rails Rangerでできるその他のことには、名前の付いたルートの使用、URLへの補間、生のHTTPリクエストの作成などがあります。

Rails Rangerのアクションとメソッドの完全なリストは、包括的なドキュメントで確認できます。 😄

ボーナス:パスビルダーとしてのRailsRangerの使用

Rails Rangerを単なるパスビルダーとして使用し、お気に入りのクライアントでリクエストを自分で処理することもできます。

import { RouteBuilder } from RailsRanger
const routes = new RouteBuilder

route = routes.create('users', { name: 'John' })
// => { path: '/users', params: { name: 'John' }, method: 'post' }

フレームワークの十分に確立された標準を活用すれば、Ruby onRailsAPIへのAJAXリクエストの作成は楽しいものになります。

このようにして、キャメルケースとスネークケースの間の変換などの反復的なタスクの処理から解放され、セマンティックな方法でエンドポイントにアクセスすることに集中できます。 🤠