【日本語変数名で学ぶ】axiosのqueryパターンを実装で利用する

新しいFEのメンバーをむかえる日が並行した仕事のリリース日だったGENYAです。

tl;dr

axiosのqueryパターンを使いたい場合は axios/lib/helpers/buildURLを読み込み、使う。

import buildURL from "axios/lib/helpers/buildURL";
const axiosの生成Query = buildURL(現在のURL, { a: "", b: 1, c: [1, 2, 3] });
// out => https://6bth3.csb.app/?a=&b=1&c[]=1&c[]=2&c[]=3

課題感

Ruby on RailsのRANSACKが受け取れるqueryのパターンがbracketなquery情報だった。

どうせならaxiosのquery生成のパターンと全く同じ実装を使えた方がミスがなくてよいねという話しになりました。

※ query-stringも arrayFormat: bracketを指定することで同じことが実現できます。

import buildURL from "axios/lib/helpers/buildURL";
const 現在のURL = `${global.location.href}`;
const axiosの生成Query = buildURL(現在のURL, {
  a: "",
  b: 1,
  c: -1,
  d: null,
  e: false,
  f: true,
  g: [1, 2, 3],
  h: { いろはに: "ほへと" }
});

export function App() {
  return (
    <p>{axiosの生成Query}</p>
  );
}

// => https://6bth3.csb.app/?a=&b=1&c=-1&e=false&f=true&g[]=1&g[]=2&g[]=3&h=%7B%22%E3%81%84%E3%82%8D%E3%81%AF%E3%81%AB%22:%22%E3%81%BB%E3%81%B8%E3%81%A8%22%7D

まとめ

複数の実装を持ってくるのではなく、同一の実装にまとめることで複雑度を１つ取り除くことができました。
こういった実装を積み重ねしていくことで抽象度を下げていければ良いですね。