🛳️

microCMSのfiltersを作成するOSS(microcms-filter-query)を公開した

2022/04/09に公開約1,300字

私はよくmicroCMSを静的サイトのコンテンツやWebアプリケーションの組み込みとして利用しています。
その中で、コンテンツを取得する際によくfiltersというクエリを渡します。

https://document.microcms.io/content-api/get-list-contents#hdebbdc8e86

渡すクエリは、たとえば下記のような文字列です。

`gender[equals]women[and](age[less_than]${age}[or]age[equals]${age})`

このような文字列を複数管理、組み合わせて利用するのは流石に骨が折れます。

ただの文字列なので、タイポや、括弧のズレなども怖いです。

今回のモチベーションは、Type Safeにした上で、見通しをよくしたいです。
よろしくお願いします。

作ったもの(microcms-filter-query)

https://www.npmjs.com/package/microcms-filter-query

このパッケージを利用することで、microcmsのfiltersクエリをメソッドチェーンで作成することができます。

例えば gender[equals]women を作成するのであれば下記のように呼び出すことができます。

import { MicroCMSFilterQuery } from 'microcms-filter-query'

const filters = new MicroCMSFilterQuery().equals('gender', 'female').$excute()

TypeScriptを用いる場合

typescriptを用いる場合、下記のように型定義を渡してあげることで、フィールドとそのプロパティを型安全に指定することができます。

import { MicroCMSFilterQuery } from 'microcms-filter-query'

type Avatar = {
  id: string;
  name:string;
  age: number;
  gender: 'male' | 'female' | 'other';
} & MicroCMSListContent

const filters = new MicroCMSFilterQuery<Avatar>().equals('gender', 'female').$excute()

最後に

今回は自分がmicroCMSを扱う上で課題を感じた部分を支援ツールを作成するという形で解決を試みました。
同じような課題を感じていたり、興味のある方は、使っていただけますと嬉しいです!

まだ、カスタムフィールドを考慮したフィールド指定の型定義がまだ安定しないなど課題がありますが、今後も改善に努めていけたらと思います。

issueやコントリビュートも是非参加いただけますと...っ!

https://github.com/tsuki-lab/microcms-filter-query

Discussion

ログインするとコメントできます