Geekly Articles each Day

既製のGraphQLスキーマを使用して自動生成されたCMS

画像

GraphQL CMSの第2バージョン

以前の記事「 Well Russian。Original」で、MongooseでGraphQLを使用する場合、コードと時間を半分にする方法について説明しました。

今日は、GraphQLテクノロジーについても説明します。これを使用する場合、この記事は開発時間をかなり節約するのに役立ちます。 オリジナルの記事は英語でこちらにあります 。

»モジュール自体へのリンク： graphql-auto-generated-cms 。

ご想像のとおり、このモジュールは既製のGraphQLスキームを使用して、完全に機能するCMSを生成します。 管理パネルの開発に多くの時間を費やす必要はありません。また、プロジェクトとそのアーキテクチャのビジネスプロセスにもっと集中することができます。

このモジュールの重要な利点は、完成したコードやプロジェクトアーキテクチャに変更を加える必要がないことです。これにより、既成のプロジェクトであっても統合が可能な限り簡単になります。

このモジュールを使用するには2つの方法があります。

  1. 最初は最速で、新しいプロジェクトに適しています。 必要なのは、GraphQLスキーマと、GraphQLのメソッドとタイプの名前で簡単なパターンに従うことだけです。

  2. また、2番目の方法は、パターンに従う必要がなく、既に完了したプロジェクトに簡単に統合できます。 GraphQLスキーマとともに構成オブジェクトを提供する必要があるすべて。

現時点では、モジュールはGraphQLList、ネストされたオブジェクト、およびファイルのアップロードをサポートしていません;それらのサポートは将来のバージョンで実装される予定です。 現時点では、CMSで補完できる自作の機能とコンポーネントを使用して、これらの制限を簡単に回避できます。この記事では、その方法を検討します。

上記のすべてに基づいて、現在の記事をいくつかの段落に分けましょう。


一般規則


モジュールは、CMSサイドメニューで使用できるエンティティとしてgraphQLタイプを使用します。

ネストされたオブジェクトとしてのみ使用されるタイプを除外します。 したがって、1つの「Query」メソッドと少なくとも1つの「Mutation」メソッドを持つタイプのみがエンティティとして取得されます。

各タイプには「クエリ」[検索]を1つだけ設定できます。これは、オブジェクトの配列を取得したり、使用しているデータベースのタイプに応じて引数「id」または「_id」を使用して単一のオブジェクトを取得するために使用されます タイプには、次の「突然変異」メソッド[作成、更新、削除]を1つ以上含めることもできます。

Queryメソッドは、必ず次の引数をサポートする必要があります。

{ offset: number, limit: number, id: number || _id: string //      }

引数「offset」および「limit」は、すぐに50tを取得するのではなく、ページ分割してサーバーからデータをバッチで受信するために使用されます。 アプリケーションがハングするだけのオブジェクト。

サーバー側では、これは次のようになります。

 let {offset, limit} = args; return new Promise((resolve, reject) => { Ingredients.find(query).skip(offset).limit(limit).exec((err, res) => err ? reject(err) : resolve(res)); });

id引数は、1つのインスタンスを取得するために使用されます。 「findOne」などのメソッドを使用して「id」を使用して単一の要素を返す場合、graphQLは単一の要素であっても配列を予期するため、配列内で必ず返してください。

仕事の準備

インストール：

 npm i -S graphql-auto-generating-cms

サーバー側では、GrpahQLスキーマを処理するミドルウェアを実行する必要があります。以下の例では、エンドポイントとしてURL "/ graphql_cms_endpoint"を使用します。

 … import express from 'express'; import graphqlCMS from 'graphql-auto-generating-cms/lib/middleware'; import schema from '../schema'; const printSchema = require('graphql/utilities/schemaPrinter').printSchema; let app = express(); let config = {schema: printSchema(schema)} app.use('/graphql_cms_endpoint', graphqlCMS(config)); … app.listen(port)

その後、クライアント側でReactコンポーネントを使用できます。 別のリンクから、または通常のReactコンポーネントとしてダウンロードできます。

ルーター内：

 ... import GraphqlCMS from 'graphql-auto-generating-cms'; export default ( <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}> <Route path='/graphql-cms' endpoint='/graphql_cms_endpoint' graphql='/graphql' components={GraphqlCMS} /> … </Router>

またはコンポーネントとして：

 <GraphqlCMS endpoint='/graphql_cms_endpoint' graphql='/graphql' />

「エンドポイント」プロパティでは、サーバー側で使用したものと同じURLを指定します。

「graphql」プロパティで、GraphQL APIへのリンク。

2番目のオプションは、認証機能などでCMSを補完する場合に適しています。 ナビゲーションバー、認証システムなどを使用して、レイアウトの子コンポーネントとして挿入するだけです。

パターンを使用した最初の使用方法


追加の構成なしでCMSを迅速に生成するには、GrpahQLの「クエリ」および「突然変異」メソッドの名前で次の単純なパターンに従う必要があります。

 [graphql Type name]_[action]

例：

 productType_find productType_create productType_update productType_remove

CMSのメニュー項目と入力フィールドの並べ替えは、オブジェクトのプロパティの順序と同じです。

たとえば、スキームで次の型の順序を指定した場合：

 { productType: {}, userType: {}, categoryType: {}, ... }

次に、サイドバーで、メニュー項目は同じ順序になります。

 productType userType categoryType

タイプフィールドの順序にも同じことが当てはまり、それらの順序は、要素の1つのインスタンスを表示するためのページのUIを構築するため、または新しい要素を追加するための基礎として採用されます。

 let productType = new GraphQLObjectType({ name: 'productType', fields: { _id: {type: GraphQLString}, title: {type: GraphQLString}, shortDescription: {type: GraphQLString}, price: {type: GraphQLString}, isPublished: {type: GraphQLBoolean}, createdAt: {type: GraphQLString}, updatedAt: {type: GraphQLString}, bulletPoints: {type: GraphQLString}, scienceShort: {type: GraphQLString}, scienceFull: {type: GraphQLString}, } });

したがって、サイドメニューの項目の順序を変更する場合、または入力フィールドの順序を変更する場合は、GrpahQLスキーマのプロパティを交換するだけです。

構成オブジェクトを使用した2番目のユースケース


2番目の方法の利点：


それがどのように機能するかを見てみましょう。これに必要なのは、サーバー側で設定オブジェクトを展開することです。 「スキーマ」を除くすべてのフィールドはオプションです。

 let config = {schema: printSchema(schema)} app.use('/graphql_cms_endpoint', graphqlCMS(config)); 

 let config = { schema: printSchema(schema), //  "printed"  [required] exclude: ['paymentType', 'invoiceType'], //graphql       CMS rules: { //       graphQL  categoryType: { //   graphQL  label: 'Categories', //         listHeader: { //         //   [id]   [title] //           //  UI     “String” + “ “ + “String” id: ['id'], title: ['description'] }, resolvers: { //      naming  //       // Query's  Mutation's     find: { resolver: 'getCategories' // Query method name }, create: { resolver: 'addCategory' // Mutation method name allowed: true }, update: { resolver: 'updateCategory' // Mutation method name allowed: true }, remove: { allowed: false //       //       //    ,  true //  “find”,    } }, fields: { _id: {}, sortNumber: { label: 'custom field name to show in UI', inputControl: 'input', // can be “input” or “textarea” inputType: 'number', // can be any input type: date, text, file etc. disabled: true, //     exclude: false, //      CMS }, name: {}, //       //        createdAt: {}, updatedAt: {}, isPublished: {} } } } }

コンポーネントと機能でCMSを補完する


ReactコンポーネントにCMSメニュー項目を追加することもできます。たとえば、統計や一般的なダッシュボードなどのカスタムソリューションなどの追加機能を使用できます。

このために、クライアント側のもう1つのプロパティ「newMenuItems」をコンポーネントに追加するだけです。

 <Route path='/graphql-cms' endpoint='/graphql_cms_endpoint' graphql='/graphql' newMenuItems={customPages} components={GraphqlCMS} />

追加のメニュー項目とコンポーネントを含む配列を送信するために、配列内のオブジェクトの構造は次のとおりです。

 let customPages = [ { label: 'Custom Page', secret: 'uniqeForEachComponentSecret', view: { secret: 'sameUniqeComponentSecret', component: CustomDashboard //  React  } } ]

上記のコードは次のようになります。



ご清聴ありがとうございました。このモジュールがお役に立てば幸いです。

GitHubの「スター」プロジェクトについて知りたい場合は、現在、モジュールの新しいバージョンに取り組んでいます。
新しいバージョンに含まれるもの：


次の更新では、自動生成されたCMSは、CMSの要件の90％を満たします。GraphQLスキーマを使用するだけです！

» コード例
GitHub

作業バージョンのスクリーンショット：





Source: https://habr.com/ru/post/J314204/

More articles:


All Articles