元の記事
GraphQL スキーマにはリスト データ型が存在することがよくあり、一般的な要件は、いくつかの入力変数に基づいてリストをフィルター処理することです。フィルタリングは、ユーザーが必要なデータのみを取得できるようにする重要な機能であり、アプリケーションをより効率的で使いやすくします。
データベースの前にある Prisma など、クエリをサポートする外部データソースを使用する場合、フィルタリングに使用できるライブラリやリソースが多数あります。ただし、GraphQL オブジェクトのリストを返す独自のリゾルバーを作成する場合は、フィルタリング ロジックを抽象化し、スキーマ全体で再利用できるようにすることが有益です。
書籍リストの単純な GraphQL スキーマを考えてみましょう:
type Book { title: String price: Float } type Query { books: [Book] }
次のリゾルバは、単純なリストから書籍のリストを返します。これは任意のデータ ソースです。
const books = [ { title: 'The Great Gatsby', price: 10.99 }, { title: 'To Kill a Mockingbird', price: 12.99 }, // more books ]; const resolvers = { Query: { books: () => books, }, };
この例では、ユーザーが次の基準に基づいて書籍をフィルタリングする必要があると仮定します。
タイトルの始まり
価格が範囲内にあり、
より小さいか大きい。
GraphQL で個別のフィルターとロジックを定義する方法
フィルターを実装する 1 つの方法は、それぞれを個別に定義することです。これには、GraphQL スキーマの入力タイプを変更し、リゾルバー ロジックにフィルターを実装することが含まれます。
スキーマを更新してこれらの新しい入力変数を含めることで、許可されるフィルターとそれらの使用に必要なパラメーターを表現できるようになります。
input BookFilter { titleStartsWith: String priceLessThan: Float priceGreaterThan: Float } type Query { books(filter: BookFilter): [Book] }
更新されたリゾルバーは次のようになります:
const resolvers = { Query: { books: (_, { filter }) => { return books.filter(book => { if (filter.titleStartsWith && !book.title.startsWith(filter.titleStartsWith)) { return false; } if (filter.priceLessThan !== undefined && book.price >= filter.priceLessThan) { return false; } if (filter.priceGreaterThan !== undefined && book.price <p>この構文でクエリを作成することは、かなり理解しやすいです。 GraphQL リゾルバーにフィルター引数を指定し、必要に応じてこれらのフィルター入力フィールドに値を指定します。</p> <h3> このアプローチの利点 </h3> <p>ユーザーに使用を許可するフィルターのみがサポートされます。</p> <p>これは GraphQL 型検証システムによってサポートされており、許可されている内容以外のフィルタリングは許可されません。バックエンド自体のリゾルバー コードは、許可されていないフィルターさえサポートしません。</p> <h3> このアプローチの欠点 </h3> <p>GraphQL スキーマとコードの実装で各フィルターを個別に定義する必要があります。</p> <p>このコードを異なる GraphQL オブジェクト間で簡単に共有することはできません。ビデオもあり、それらをフィルタリングしたい場合は、ビデオ用の新しいフィルタリング入力タイプが必要になります。 (フィルター入力に一般化することもできますが、その場合、書籍とビデオは異なるものにはなりません。)</p> <p>新しいフィルターの要件がある場合は、コードを変更して入力フィルター タイプに追加し、それをサポートするようにリゾルバー コードを更新する必要があります。</p> <p>たとえば、先頭だけでなく任意の場所に部分文字列を含むタイトルをフィルタリングしたい場合、これは新しいフィルタ入力であり、リゾルバの新しい実装です。</p> <h2> Sift クエリ言語をフィルター入力として受け入れることによる任意のフィルター処理 </h2> <p>私が見つけた興味深いライブラリ sift を使用すると、MongoDB クエリ構文を使用して、JavaScript で任意のデータのリストを簡単にフィルタリングできます。これは本当に素晴らしいと思いますし、GraphQL で任意のフィルタリングを有効にすることができます。ヘッドレス CMS Strapi は、GraphQL クエリを有効にするためによりカスタム ソリューションに移行する前に、以前は Sift を使用していました!</p> <p>私がこれに最も興奮したのは、一部の ORM やプロバイダーが GraphQL サービスに組み込んでいる便利な自動フィルタリングをある程度再現する方法のように思えたからです。また、データが特定のデータベースから取得されたものでなくても問題ありません。</p> <p>上記のスキーマを次のように書き換えることもできます:<br> </p> <pre class="brush:php;toolbar:false">input SiftQueryInput { field: String filter: String } type Query { books(filter: [SiftQueryInput]): [Book] }
そしてリゾルバーは次のことを行います:
const sift = require('sift').default; const resolvers = { Query: { books: (_, { filter }) => { const siftQuery = filter.reduce((acc, { field, filter }) => { acc[field] = JSON.parse(filter); return acc; }, {}); return books.filter(sift(siftQuery)); }, }, };
それでは、これはどのように機能するのでしょうか? 「The」で始まるすべての書籍をクエリしたいとします。次のクエリを実行できます:
query { books(filter: [{ field: "title", filter: "{\"$regex\": \"^The\"}" }]) { title price } }
次の変数を使用します:
{ "filter": [ { "field": "title", "filter": "{\"$regex\": \"^The\"}" } ] }
そして予想どおり、「華麗なるギャツビー」のみにフィルタリングされたリストが返されます!
別の例として、文字「i」を含み、価格が 10 を超える書籍をフィルタリングする場合は、次の変数を指定します。
{ "filter": [ { "field": "title", "filter": "{\"$regex\": \"i\"}" }, { "field": "price", "filter": "{\"$gt\": 10}" } ] }
そして、『アラバマ物語』という本を取り戻します!
クエリ、スキーマ、リゾルバーでは何も変更する必要がないことに注目してください。他のアプローチでは新しいフィルター入力が必要だったまったく新しいフィルターを、Sift クエリ構文を使用して変数内でのみ表現することができました!
このアプローチの利点
Sift がサポートするフィルタリング ロジックをクエリで表現できるようになりました。別のフィルターに新しい要件が追加された場合でも、新しい入力タイプやリゾルバー ロジックで更新する必要はありません。
同じフィルタリング方法をすべてのタイプで使用できます。 SiftQueryInput のリストを受け入れるだけで、それらの Sift 入力を処理してオブジェクトのリストに適用するバックエンド実装は、リストのタイプによって変わりません。
これにより、オブジェクトの形状が変更されたり、ネストされたりした場合に、オブジェクトを簡単にサポートできます。ドット構文を使用してオブジェクトのネストされたプロパティにアクセスできるため、SiftQueryInput.field は String 型になります。
たとえば、次の Sift クエリを含めることによるフィルタリングが可能です: { field: 'author.name.last', filter: JSON.stringify({ $eq: "Orwell" }) }
欠点と注意点
もちろん、これはエラーが発生しやすい Sift クエリ言語を表現するために文字列を使用しています。そのため、このアプローチを使用するには慎重な検証とエラー処理が必要です。
汎用の SiftQueryInput 型を使用してユーザーのフィルターを収集すると、GraphQL のタイプ セーフが失われます。フィールドが存在すること、またはここでフィルターによって正しい方法で使用されていることを確認する方法がありません。
リストのデータは、フィルタリング リゾルバーが実行される時点で完全に解決される必要があります。まだ解決されていないクエリの下位のフィールドにはアクセスできません。ただし、データが独自のクエリを実行する DB から取得されていない状況では、おそらく JSON ファイルまたは REST API 応答から取得されている可能性があります。
今後の改善点
この場合、GraphQL の安全性が失われるのは残念だと思います。ビルド時に可能な Sift Query オプションを GraphQL スキーマにコンパイルできる可能性があるため、構文は文字列に依存せずに、Sift の実際をより類似して反映します。
結論
結論として、GraphQL で Sift.js を使用すると、任意のフィルタリングを実装する柔軟かつ強力な方法が提供されます。これにより、ソースに関係なく、リスト内のプレーン JavaScript オブジェクトに対して、通常 ORM や特定の GraphQL ベンダー向けに予約されている自動クエリの利点がもたらされます。
あらゆるタイプに適用できる柔軟なクエリ言語を備えた汎用フィルタリング「エンジン」を GraphQL サーバーに提供することで、フィルタリングのロジックが GraphQL クライアントに移されます。これにより、フィルターの反復処理が大幅に高速化され、フィルターでのより高度な表現が可能になります。
GraphQL でのフィルタリングの実装に関するご意見や経験をぜひお聞かせください。以下のコメント欄で共有してください。
以上がGraphQL: Sift.js で任意のリスト フィルタリングを有効にする方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
