効率的に角度データグリッドにデータをバインドし、

43830 ワード
angular javascript webdev テキストリンク
このブログの記事を使用してご案内しますGraphQL データをSyncfusion Angular Data Grid コンポーネント、ソート、フィルタリング、およびCRUDアクションを実行します.

グラフ


によるとGraphQL GraphSQLは、あなたのAPIのためのクエリ言語であり、サーバー側のランタイムは、データを定義する型システムを使用してクエリを実行するためのランタイムです.

グラムAPI対REST API


Graphqlには1つのエンドポイントしかありません.したがって、REST APIより効率的なクライアントAPIです.
REST APIとGraphSQLの比較
REST API
グラフィカルなAPI
複数のエンドポイントを取得します.
シングルエンドポイント.
JSONデータ交換をサポートします.
JSONデータ交換をサポートします.
すべての種類のデータベースで動作できます.
すべての種類のデータベースで動作できます.

REST API


前に言ったように、残りのAPIには複数のエンドポイントがあります.それで、それは各々のデータ操作のためにサーバに別々の要求を送ります.
次の画像を参照.

例:
REST APIを使用したソーシャルメディアアプリケーションを検討してください.それには、ユーザーID、ポスト、カウントのような詳細、およびフォロワーカウントを取得する個々のHTTP APIリクエストを送信する必要があります.
次の画像を参照.

グラフ


Graphqlには1つのエンドポイントしかありません.これは、単一の要求で複数のクエリを送信します.したがって、パフォーマンスはREST APIよりずっと良いです.
次の画像を参照.
例:
GraphSQLを使用して、単一のHTTPリクエストを送信することにより、ソーシャルメディアアプリケーションのユーザーID、ポスト、カウント、およびフォロワーカウントを簡単に取得できます.
次の画像を参照.

グラフの基礎


Graphqlから始めるには、次のようになります.
  • スキーマと型
  • クエリ
  • 突然変異
  • レゾルバ

    • スキーマと型


    GraphSQL APIは型に基づいて構成されているので、フィールド名の正確な型をデータに基づいて定義する必要があります.The schema GraphSQL実装における基本的な概念です.以下はGraphSQLの基本スキーマ宣言の例です.
    type Order {
  OrderID: Int!
  CustomerID: String!
  Employees: [Employee]
}

type Employee {
  EmployeeID: Int!
  FirstName: String!
  LastName: String // it accept null value.
}

    クエリ


    グラフquery は、GraphSQLサーバからデータを読み出したりフェッチしたりするために使用されます.以下は、GraphSQLの基本的なクエリ宣言の例です.
    {
  Employee{
   EmployeeID
   FirstName
  }
}

    突然変異


    グラフmutation は、GraphSQLサーバのCRUDアクションを実行するために使用されます.以下はGraphSQLの基本的な突然変異宣言の例です.
    Mutation: { // Perform Insert
 createOrder: (parent, { value }, context, info) => {
 return value;
 }}

    レゾルバ


    グラフresolver GraphSQLクエリを処理するのに役立ちます.以下はGraphSQLの基本リゾルバー宣言の例です.
    const resolvers = {
 Query: {
  getOrders: (parent, { datamanager }, context, info) => {
   if (datamanager.search) {
     // Perform searching
   }
 }
}

    GraphqlAdaptorによるSyncFusion DataManager


    The GraphQLAdaptor 我々の中でSyncfusion DataManager コンポーネントは、GraphSQLサーバーからデータを取得します.これは、必要な引数をサーバーに送信することによって、ページング、ソート、およびフィルタリングのようなCRUDとデータ操作を実行します.
    このGraphqlAdaptorは、syncfusionコンポーネントのデータを管理することができます.

    シンクフィリング角度データグリッド


    核融合Angular Data Grid 表形式でデータを表示する機能豊富なコントロールです.その機能は、データのバインド、編集、Excelのようなフィルタリング、および選択が含まれます.また、Excel、CSVファイル、およびPDF形式にデータをエクスポートをサポートします.
    GraphSQLサーバーを介してSyncfusion角度データグリッド内のデータをバインドし、ソート、フィルター処理、およびその他のCRUD操作を行う方法を参照してください.

    必要なソフトウェア

  • Node.js (version 12.14 and above)

    • サーバの設定


    まず、Graphpack NPMパッケージ
    次に、次のコードをパッケージに含めます.Glygサーバを設定するJSONファイル.
    パッケージ.JSON
    {
 "name": "graphql-server",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "dev": "graphpack --port 4200",
 "build": "graphpack build"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "graphpack": "^1.0.9"
 },
 "dependencies": {
  "@syncfusion/ej2-data": "^19.2.55"
 }
}

    データベースファイルの作成


    次に、データベースファイルを作成します.私はこのデータベースファイルdbに名前を付けます.js
    次のコード例を参照してください.
    export let filterData = [
 {
   OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date("07 12 1996 02:00:23"),
   ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
   ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
 },
 {
   OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date("07 12 1996 00:03:23"),
   ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
   ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
 },
 {
   OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date("07 12 1996 00:00:23"),
   ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
   ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
 },
 {
   OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
   ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
   ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
 }
]

    スキーマ定義の作成


    次に、次のコードを使用して、GraphSQLサーバーのスキーマを作成します.私はこのスキーマを名前するつもりです.グラフ.
    #Grid sort direction

input Sort {
  name: String!
  direction: String!
}

#Grid aggregates type

input Aggregate {
  field: String!
  type: String!
}

#Syncfusion DataManager query params

input DataManager {
  skip: Int
  take: Int
  sorted: [Sort]
  group: [String]
  table: String
  select: [String]
  where: String
  search: String
  requiresCounts: Boolean,
  aggregates: [Aggregate],
  params: String
}

# Grid field names
input OrderInput {
  OrderID: Int!
  CustomerID: String
  EmployeeID: Int
  ShipCity: String
  ShipCountry: String
}

type Order {
  OrderID: Int!
  CustomerID: String
  EmployeeID: Int
  ShipCity: String
  ShipCountry: String
}

# need to return type as 'result (i.e. current pager data)' and count (i.e., the total number of records in your database)
type ReturnType {
  result: [Order]
  count: Int
  aggregates: String
}

type Query {
  getOrders(datamanager: DataManager): ReturnType
}

type Mutation {

  createOrder(value: OrderInput): Order!
  updateOrder(key: Int!, keyColumn: String, value: OrderInput): Order
  deleteOrder(key: Int!, keyColumn: String, value: OrderInput): Order!
}

    GraphSQLサーバーのリゾルバと突然変異の作成


    次に、GraphSQLサーバーのリゾルバと突然変異を作成します.このリゾルバに名前を付けます.js
    次のコード例を参照してください.
    const resolvers = {
 Query: {
  getOrders: (parent, { datamanager }, context, info) => {
   var ret = DataUtil.processData(datamanager, filterData);
   return ret;
  }
 },

 Mutation: {

  createOrder: (parent, { value }, context, info) => {
   const newOrder = value;
   filterData.push(newOrder);
   return newOrder;

  },
  updateOrder: (parent, { key, keyColumn, value }, context, info) => {
   let newOrder = filterData.find(order => order.OrderID === parseInt(key));
   newOrder.CustomerID = value.CustomerID;
   newOrder.EmployeeID = value.EmployeeID;
   newOrder.ShipCity = value.ShipCity;
   newOrder.ShipCountry = value.ShipCountry;
   return newOrder;
  },
  deleteOrder: (parent, { key, keyColumn, value }, context, info) => {
   const orderIndex = filterData.findIndex(order => order.OrderID === parseInt(key));
   if (orderIndex === -1) throw new Error("Order not found." + value);

   const deletedOrders = filterData.splice(orderIndex, 1);

   return deletedOrders[0];
  }
 }
};

export default resolvers;

    GraphSQLサーバを走らせる


    最後に、次のコマンドを使用して、GraphSQLサーバーを実行します.
    npm run dev
    したがって、GraphSQLサーバーを構成しました.

    SyncFusion角度データグリッドコンポーネントを追加する


    これらの手順に従って、SyncFusion角度データグリッドコンポーネントをアプリケーションに追加します.
  • 参照Getting started with Angular Data Grid documentation . 次に、角度の環境を設定し、アプリケーションにSyncfusion角度データグリッドコンポーネントを追加します.
  • 次に、src/appに次のコードを追加します.コンポーネント.HTML、src/app.コンポーネント.ソート、フィルタリング、ページング、およびその他のCRUD操作を実行するTSファイル.
    [ app . component . html ]
    • <ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true" [allowFiltering]="true"
 [editSettings]="editSettings" [toolbar]="toolbar">
 <e-columns>
  <e-column field='OrderID' headerText='Order ID' isPrimaryKey="true" textAlign='Right' width=90></e-column>
  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
  <e-column field='EmployeeID' headerText='Freight' textAlign='Right' width=90></e-column>
  <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
  <e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
 </e-columns>
</ejs-grid>
    [ app . component . ts ]
    export class AppComponent {
 public data!: DataManager;
 public pageSettings!: PageSettingsModel;
 public editSettings!: Object;
 public toolbar!: string[];
 ngOnInit(): void {
  // Add the Syncfusion DataManager GrpahQLAdaptor for fetching data from GraphQL server
  this.data = new DataManager({
   url: "http://localhost:4200/", adaptor: new GraphQLAdaptor({
    response: {
     result: 'getOrders.result',
     count: 'getOrders.count'
    },
    query: `query getOrders($datamanager: DataManager) {
     getOrders(datamanager: $datamanager) {
      count,
      result{
       OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry}
      }
     }`,
     // mutation for performing CRUD
     getMutation: function (action: any): string {
      if (action === 'insert') {
       return `mutation CreateOrderMutation($value: OrderInput!){
        createOrder(value: $value){
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }}`;
      }
      if (action === 'update') {
       return `mutation Update($key: Int!, $keyColumn: String,$value: OrderInput){
        updateOrder(key: $key, keyColumn: $keyColumn, value: $value) {
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }
      }`;
     } else {
       return `mutation Remove($key: Int!, $keyColumn: String, $value: OrderInput){
        deleteOrder(key: $key, keyColumn: $keyColumn, value: $value) {
         OrderID, CustomerID, EmployeeID, ShipCity, ShipCountry
        }
       }`;
      }
     }
   })
 });
 this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true } // enable editing
 this.toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"]; // enable toolbar option
 }
}
    注意:詳細はEditing in Angular Data Grid documentation .

    アプリケーションを実行する


    最後に、次のコマンドを使用してアプリケーションを実行します.
    npm start
    今、簡単にソート、ページング、フィルタリングを実行することができますし、角データグリッドコンポーネントのCRUD操作を実行します.
    次のGIF画像を参照してください.

    Graphqlを用いた角度データグリッドにおけるCRUD操作の実行

    Githubリファレンス


    詳しくはBinding Data to Angular Data Grid using GraphQL demo on GitHub .

    結論


    読書ありがとう!私は今、私たちのsyncfusionでGraphSQLサーバーを使用する方法の明確なアイデアを持ってほしいAngular Data Grid データをバインドし、その中でCRUD操作を行うコンポーネント.GraphSQLは、単一のエンドポイントを持つように、それはあなたの時間を節約し、大幅にデータを取得しながら生産性を向上させます.このブログの記事の手順を試してみてください、下記のコメントのセクションであなたのフィードバックを残す!
    SyncFusion DataGridコンポーネントは、Blazor , ASP .正味のCore , MVC , WebForms ), JavaScript , Angular , React , Vue , Xamarin , Flutter , UWP , WinForms , WPF , and WinUI のりば偉大なアプリケーションを構築するために使用!
    既存の顧客のために、重要なStudioの新しいバージョンは、ダウンロードから入手可能ですLicense and Downloads ページ.まだSyncFusionの顧客でない場合は、私たちの30日を試すことができますfree trial 当社の利用可能な機能をチェックアウトします.
    あなたは私たちを介して私達に連絡することができますsupport forum , support portal , or feedback portal . 私たちはあなたが成功するためにここにいる!

    関連ブログ

  • How to Build a CRUD App in Angular
  • How to Update Data Without Re-rendering an Entire Grid in Angular
  • A Complete Guide to Running a Full-Stack Angular Application in a Monorepo
  • Best Practices for JWT Authentication in Angular Apps
    • 【Dockerインストールチュートリアル】CentOS 7.5インストールDocker
    Debian rsyslog.conf Linux man page