@operato/scene-graphql 0.1.3

package/dist/graphql-subscription.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'string',
+            label: 'endpoint',
+            name: 'endpoint'
+        },
+        {
+            type: 'graphql',
+            label: 'query',
+            name: 'query'
+        }
+    ],
+    help: 'scene/component/graphql-subscription'
+};
+export default class GraphqlSubscription extends DataSource(RectPath(Shape)) {
+    static get image() {
+        if (!GraphqlSubscription._image) {
+            GraphqlSubscription._image = new Image();
+            GraphqlSubscription._image.src = new URL('../icons/symbol-graphql-subscription.png', import.meta.url).href;
+        }
+        return GraphqlSubscription._image;
+    }
+    dispose() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        if (this.client) {
+            this.client.unsubscribeAll();
+            this.client.close(true);
+        }
+        super.dispose();
+    }
+    render(context) {
+        var { left, top, width, height } = this.bounds;
+        context.beginPath();
+        this.drawImage(context, GraphqlSubscription.image, left, top, width, height);
+    }
+    ready() {
+        this._initGraphqlSubscription();
+    }
+    get nature() {
+        return NATURE;
+    }
+    _initGraphqlSubscription() {
+        if (!this.app.isViewMode)
+            return;
+        this.requestData();
+    }
+    async requestData() {
+        var { endpoint, query } = this.state;
+        var self = this;
+        this.client = new SubscriptionClient(endpoint, {
+            reconnect: true,
+            connectionParams: {
+                headers: {
+                    /*
+                      특정 도메인의 데이타만 받고자 하는 경우에, referer 정보를 제공해서 서버에서 서브도메인 정보를 취득하도록 한다.
+                      referer: location.href
+                      또는, 이미 서브도메인 정보를 알고 있다면,
+                      'x-things-factory-domain': '[subdomain]'
+                      을 보낼 수 있다.
+                      관련 정보를 보내지 않는다면, 사용자가 권한을 가진 모든 도메인의 데이타를 수신하게 된다.
+                    */
+                    referer: location.href
+                }
+            }
+        });
+        this.client.onConnected(() => {
+            const { unsubscribe } = this.client.request({ query }).subscribe({
+                next({ data }) {
+                    if (data) {
+                        self.data = data;
+                    }
+                }
+            });
+            this.unsubscribe = unsubscribe;
+        });
+    }
+}
+Component.register('graphql-subscription', GraphqlSubscription);
+//# sourceMappingURL=graphql-subscription.js.map

package/dist/graphql-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-subscription.js","sourceRoot":"","sources":["../src/graphql-subscription.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { SubscriptionClient } from 'subscriptions-transport-ws'\n\nimport { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'endpoint',\n      name: 'endpoint'\n    },\n    {\n      type: 'graphql',\n      label: 'query',\n      name: 'query'\n    }\n  ],\n  help: 'scene/component/graphql-subscription'\n}\n\nexport default class GraphqlSubscription extends DataSource(RectPath(Shape)) {\n  private static _image: HTMLImageElement\n  private client?: SubscriptionClient\n  private unsubscribe?: () => void\n\n  static get image() {\n    if (!GraphqlSubscription._image) {\n      GraphqlSubscription._image = new Image()\n      GraphqlSubscription._image.src = new URL('../icons/symbol-graphql-subscription.png', import.meta.url).href\n    }\n\n    return GraphqlSubscription._image\n  }\n\n  dispose() {\n    if (this.unsubscribe) {\n      this.unsubscribe()\n    }\n    if (this.client) {\n      this.client.unsubscribeAll()\n      this.client.close(true)\n    }\n\n    super.dispose()\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    context.beginPath()\n    this.drawImage(context, GraphqlSubscription.image, left, top, width, height)\n  }\n\n  ready() {\n    this._initGraphqlSubscription()\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  _initGraphqlSubscription() {\n    if (!this.app.isViewMode) return\n\n    this.requestData()\n  }\n\n  async requestData() {\n    var { endpoint, query } = this.state\n    var self = this\n\n    this.client = new SubscriptionClient(endpoint, {\n      reconnect: true,\n      connectionParams: {\n        headers: {\n          /* \n            특정 도메인의 데이타만 받고자 하는 경우에, referer 정보를 제공해서 서버에서 서브도메인 정보를 취득하도록 한다.\n            referer: location.href\n            또는, 이미 서브도메인 정보를 알고 있다면,\n            'x-things-factory-domain': '[subdomain]'\n            을 보낼 수 있다.\n            관련 정보를 보내지 않는다면, 사용자가 권한을 가진 모든 도메인의 데이타를 수신하게 된다.\n          */\n          referer: location.href\n        }\n      }\n    })\n\n    this.client.onConnected(() => {\n      const { unsubscribe } = this.client!.request({ query }).subscribe({\n        next({ data }) {\n          if (data) {\n            self.data = data\n          }\n        }\n      })\n\n      this.unsubscribe = unsubscribe\n    })\n  }\n}\n\nComponent.register('graphql-subscription', GraphqlSubscription)\n"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import Client from './graphql-client';
+import { Mutation, Query } from './graphql-query-and-mutation';
+import Subscription from './graphql-subscription';
+declare const _default: (typeof Client | typeof Query | typeof Mutation | typeof Subscription)[];
+export default _default;

package/dist/index.js

@@ -0,0 +1,5 @@
+import Client from './graphql-client';
+import { Mutation, Query } from './graphql-query-and-mutation';
+import Subscription from './graphql-subscription';
+export default [Client, Query, Mutation, Subscription];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,kBAAkB,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAC9D,OAAO,YAAY,MAAM,wBAAwB,CAAA;AAEjD,eAAe,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAA","sourcesContent":["import Client from './graphql-client'\nimport { Mutation, Query } from './graphql-query-and-mutation'\nimport Subscription from './graphql-subscription'\n\nexport default [Client, Query, Mutation, Subscription]\n"]}

package/dist/templates/graphql-client.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        strokeStyle: string;
+        endpoint: string;
+    };
+};
+export default _default;

package/dist/templates/graphql-client.js

@@ -0,0 +1,19 @@
+const icon = new URL('../../icons/icon-graphql-client.png', import.meta.url).href;
+export default {
+    type: 'graphql-client',
+    description: 'graphql-client',
+    group: 'dataSource',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'graphql-client',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        fillStyle: 'cyan',
+        strokeStyle: 'darkgray',
+        endpoint: '/'
+    }
+};
+//# sourceMappingURL=graphql-client.js.map

package/dist/templates/graphql-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-client.js","sourceRoot":"","sources":["../../src/templates/graphql-client.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEjF,eAAe;IACb,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,gBAAgB;IAC7B,KAAK,EAAE,YAAY;IACnB,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,UAAU;QACvB,QAAQ,EAAE,GAAG;KACd;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/icon-graphql-client.png', import.meta.url).href\n\nexport default {\n  type: 'graphql-client',\n  description: 'graphql-client',\n  group: 'dataSource',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'graphql-client',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    fillStyle: 'cyan',\n    strokeStyle: 'darkgray',\n    endpoint: '/'\n  }\n}\n"]}

package/dist/templates/graphql-mutation.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        autoStart: boolean;
+        period: number;
+        query: string;
+    };
+};
+export default _default;

package/dist/templates/graphql-mutation.js

@@ -0,0 +1,23 @@
+const icon = new URL('../../icons/icon-graphql-mutation.png', import.meta.url).href;
+export default {
+    type: 'graphql-mutation',
+    description: 'graphql-mutation',
+    group: 'dataSource',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'graphql-mutation',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        autoStart: false,
+        period: 0,
+        query: `mutation {
+  resolverName ( patches:[] ) {
+    id
+  }
+}`
+    }
+};
+//# sourceMappingURL=graphql-mutation.js.map

package/dist/templates/graphql-mutation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-mutation.js","sourceRoot":"","sources":["../../src/templates/graphql-mutation.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,uCAAuC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEnF,eAAe;IACb,IAAI,EAAE,kBAAkB;IACxB,WAAW,EAAE,kBAAkB;IAC/B,KAAK,EAAE,YAAY;IACnB,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;;;;EAIT;KACC;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/icon-graphql-mutation.png', import.meta.url).href\n\nexport default {\n  type: 'graphql-mutation',\n  description: 'graphql-mutation',\n  group: 'dataSource',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'graphql-mutation',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    autoStart: false,\n    period: 0,\n    query: `mutation {\n  resolverName ( patches:[] ) {\n    id\n  }\n}`\n  }\n}\n"]}

package/dist/templates/graphql-query.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        autoStart: boolean;
+        period: number;
+        query: string;
+    };
+};
+export default _default;

package/dist/templates/graphql-query.js

@@ -0,0 +1,31 @@
+const icon = new URL('../../icons/icon-graphql-query.png', import.meta.url).href;
+export default {
+    type: 'graphql-query',
+    description: 'graphql-query',
+    group: 'dataSource',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'graphql-query',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        autoStart: true,
+        period: 0,
+        query: `query {
+  boards {
+    items {
+      id
+      name
+      description
+      thumbnail
+      createdAt
+      updatedAt
+    }
+    total
+  }
+}`
+    }
+};
+//# sourceMappingURL=graphql-query.js.map

package/dist/templates/graphql-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-query.js","sourceRoot":"","sources":["../../src/templates/graphql-query.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,oCAAoC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEhF,eAAe;IACb,IAAI,EAAE,eAAe;IACrB,WAAW,EAAE,eAAe;IAC5B,KAAK,EAAE,YAAY;IACnB,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,IAAI;QACf,MAAM,EAAE,CAAC;QACT,KAAK,EAAE;;;;;;;;;;;;EAYT;KACC;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/icon-graphql-query.png', import.meta.url).href\n\nexport default {\n  type: 'graphql-query',\n  description: 'graphql-query',\n  group: 'dataSource',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'graphql-query',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    autoStart: true,\n    period: 0,\n    query: `query {\n  boards {\n    items {\n      id\n      name\n      description\n      thumbnail\n      createdAt\n      updatedAt\n    }\n    total\n  }\n}`\n  }\n}\n"]}

package/dist/templates/graphql-subscription.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        lineWidth: number;
+        endpoint: string;
+        requestType: string;
+        query: string;
+    };
+};
+export default _default;

package/dist/templates/graphql-subscription.js

@@ -0,0 +1,26 @@
+const icon = new URL('../../icons/icon-graphql-subscription.png', import.meta.url).href;
+export default {
+    type: 'graphql-subscription',
+    description: 'graphql-subscription',
+    group: 'dataSource',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'graphql-subscription',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        lineWidth: 1,
+        endpoint: 'ws://localhost:3000/subscriptions',
+        requestType: 'mutation',
+        query: `subscription {
+  systemRebooted {
+    name
+    version
+    description
+  }
+}`
+    }
+};
+//# sourceMappingURL=graphql-subscription.js.map

package/dist/templates/graphql-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphql-subscription.js","sourceRoot":"","sources":["../../src/templates/graphql-subscription.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,2CAA2C,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEvF,eAAe;IACb,IAAI,EAAE,sBAAsB;IAC5B,WAAW,EAAE,sBAAsB;IACnC,KAAK,EAAE,YAAY;IACnB,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,mCAAmC;QAC7C,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE;;;;;;EAMT;KACC;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/icon-graphql-subscription.png', import.meta.url).href\n\nexport default {\n  type: 'graphql-subscription',\n  description: 'graphql-subscription',\n  group: 'dataSource',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'graphql-subscription',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    lineWidth: 1,\n    endpoint: 'ws://localhost:3000/subscriptions',\n    requestType: 'mutation',\n    query: `subscription {\n  systemRebooted {\n    name\n    version\n    description\n  }\n}`\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,48 @@
+declare const _default: ({
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        strokeStyle: string;
+        endpoint: string;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        autoStart: boolean;
+        period: number;
+        query: string;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        lineWidth: number;
+        endpoint: string;
+        requestType: string;
+        query: string;
+    };
+})[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,6 @@
+import graphqlClient from './graphql-client';
+import graphqlMutation from './graphql-mutation';
+import graphqlQuery from './graphql-query';
+import graphqlSubscription from './graphql-subscription';
+export default [graphqlClient, graphqlQuery, graphqlMutation, graphqlSubscription];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,mBAAmB,MAAM,wBAAwB,CAAA;AAExD,eAAe,CAAC,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,CAAC,CAAA","sourcesContent":["import graphqlClient from './graphql-client'\nimport graphqlMutation from './graphql-mutation'\nimport graphqlQuery from './graphql-query'\nimport graphqlSubscription from './graphql-subscription'\n\nexport default [graphqlClient, graphqlQuery, graphqlMutation, graphqlSubscription]\n"]}

package/helps/scene/component/graphql-subscription.ko.md

@@ -0,0 +1,19 @@
+# graphql subscription
+
+Graphql publish 서비스로부터 푸시되는 메시지를 수신하고자하는 데이타소스 컴포넌트이다.
+
+## properties
+
+- endpoint
+  - Graphql Service를 제공하는 서버의 접속 정보를 입력한다.
+  - graphql-client 컴포넌트에서 설정한다.
+  - 현재는 서버 인증에 대한 기능이 없으므로, 인증을 요구하지 않는 서비스나 이미 인증을 통과한 경우에 사용한다.(Origin 서버 등)
+    - eg. 'ws://localhost:3000/subscriptions'
+- query
+  - subscription query를 설정한다.
+
+## chrome 브라우저에서 데이타 수신 확인하기
+
+- subscription 데이타는 바로 이 컴포넌트의 data속성이 되므로, 그 결과를 데이터바인딩에 적용할 수 있다.
+- subscription 데이타의 형태는 query에 의해서 결정된다.
+- 실제 subscription 데이터의 형태는 크롬 브라우저의 개발자 도구의 'Network' - 'WS'에서 확인할 수 있다.

package/helps/scene/component/graphql-subscription.md

@@ -0,0 +1,19 @@
+# graphql subscription
+
+It is a data source component that wants to receive messages pushed from the Graphql publish service.
+
+## properties
+
+- endpoint
+  - Enter the connection information of the server providing the Graphql Service.
+  - Configured in the graphql-client component.
+  - Currently, there is no function for server authentication, so it is used for services that do not require authentication or when authentication has already passed (Origin server, etc.).
+    - eg. 'ws://localhost:3000/subscriptions'
+- query
+  - Set the subscription query.
+  
+## Confirm receipt of data in the chrome browser
+
+- Since the subscription data becomes the data property of this component, the result can be applied to data binding.
+- The type of subscription data is determined by query.
+- You can check the actual subscription data type in'Network'-'WS' of the developer tool of Chrome browser.

package/helps/scene/component/graphql-subscription.zh.md

@@ -0,0 +1,19 @@
+# graphql subscription
+
+它是一个数据源组件，接收从Graphql发布服务推送的消息。
+
+## properties
+
+- endpoint
+  - 输入提供Graphql服务的服务器的连接信息。
+  - 在graphql-client组件中配置。
+  - 当前，尚无用于服务器身份验证的功能，因此它用于不需要身份验证或已通过身份验证的服务（原始服务器等）。
+    - eg. 'ws://localhost:3000/subscriptions'
+- query
+  - subscription query를 설정한다.
+
+## 在Chrome浏览器中确认收到数据
+
+- 由于订阅数据成为该组件的数据属性，因此可以将结果应用于数据绑定。
+- 订阅数据的类型由graphql query确定。
+- 您可以在Chrome浏览器的开发人员工具的“网络”-“ WS”中检查实际的订阅数据形态。

package/helps/scene/component/graphql.ko.md

@@ -0,0 +1,35 @@
+# graphql
+
+Graphql API를 사용할 수 있는 데이타소스 컴포넌트 패미리이다.
+
+- graphql-client
+  - Graphql 컴포넌트 패미리에서 사용할 서버를 연결하는 컴포넌트이다.
+- graphql-query
+- graphql-mutation
+
+## properties for graphql-client
+
+- endpoint
+  - Graphql Service를 제공하는 서버의 접속 정보를 입력한다.
+  - graphql-client 컴포넌트에서 설정한다.
+  - 현재는 서버 인증에 대한 기능이 없으므로, 인증을 요구하지 않는 서비스나 이미 인증을 통과한 경우에 사용한다.(Origin 서버 등)
+    - '/graphql'
+    - 'http://localhost:3000/graphql'
+  - 이 컴포넌트는 graphql-query 또는 graphql-mutation 컴포넌트의 client component ID 속성에 설정되는 용도이다.
+
+## properties for graphql-query/mutation
+
+- client component ID
+  - endpoint가 설정된 graphql-client의 ID를 설정한다.
+- period
+  - 주기적인 query/mutation 호출이 필요한 경우에 그 주기를 second 단위로 설정한다.
+- query
+  - 호출하고자 하는 graphql query를 설정한다.
+- auto start
+  - 보드가 시작될 때 자동으로 호출할 지 여부를 설정한다.
+
+## chrome 브라우저에서 데이타 수신 확인하기
+
+- query/mutation 결과는 바로 이 컴포넌트의 data속성이 되므로, 그 결과를 데이터바인딩에 적용할 수 있다.
+- 데이타의 형태는 query에 의해서 결정된다.
+- 실제 데이터의 형태는 크롬 브라우저의 개발자 도구의 'Network' - 'XHR'에서 확인할 수 있다.

package/helps/scene/component/graphql.md

@@ -0,0 +1,35 @@
+# graphql
+
+It is a family of data source components that can use Graphql API.
+
+- graphql-client
+  - Graphql component This is a component that connects the server to be used in the family.
+- graphql-query
+- graphql-mutation
+
+## properties for graphql-client
+
+- endpoint
+  - Enter the connection information of the server providing the Graphql Service.
+  - Configured in the graphql-client component.
+  - Currently, there is no function for server authentication, so it is used for services that do not require authentication or when authentication has already passed (Origin server, etc.).
+    - '/graphql'
+    - 'http://localhost:3000/graphql'
+  - This component is for setting in the client component ID property of the graphql-query or graphql-mutation component.
+
+## properties for graphql-query/mutation
+
+- client component ID
+  - Set the ID of the graphql-client where the endpoint is configured.
+- period
+  - When periodic query/mutation call is needed, set the period in second unit.
+- query
+  - Set the graphql query to be called.
+- auto start
+  - Set whether to call automatically when the board starts.
+
+## Confirm receipt of data in the chrome browser
+
+- Since the query/mutation result becomes the data property of this component, the result can be applied to data binding.
+- The type of data is determined by query.
+- The actual data format can be checked in'Network'-'XHR' of the developer tools of the Chrome browser.

package/helps/scene/component/graphql.zh.md

@@ -0,0 +1,35 @@
+# graphql
+
+它是可以使用Graphql API的一系列数据源组件。
+
+- graphql-client
+  - Graphql组件这是连接要在系列中使用的服务器的组件。
+- graphql-query
+- graphql-mutation
+
+## properties for graphql-client
+
+- endpoint
+  - 输入提供Graphql服务的服务器的连接信息。
+  - 在graphql-client组件中配置。
+  - 当前，尚无用于服务器身份验证的功能，因此它用于不需要身份验证或已通过身份验证的服务（原始服务器等）。
+    - '/graphql'
+    - 'http://localhost:3000/graphql'
+  - 该组件用于在graphql-query或graphql-mutation组件的客户端组件ID属性中进行设置。
+
+## properties for graphql-query/mutation
+
+- client component ID
+  - 设置配置端点的graphql-client的ID。
+- period
+  - 需要定期执行query/mutation时，请以秒为单位设置周期。
+- query
+  - 设置要调用的graphql查询。
+- auto start
+  - 看板启动时是否自动调用。
+
+## 在Chrome浏览器中确认收到数据
+
+- 由于`query/mutation`结果成为该组件的数据属性，因此该结果可以应用于数据绑定。
+- 数据类型由查询确定。
+- 实际数据形态可以在Chrome浏览器的开发人员工具的“network”-“ XHR”中查看。

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@operato/scene-graphql",
+  "description": "Graphql datasource component for things-scene",
+  "version": "0.1.3",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "author": "heartyoh",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/graphql"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.5.6",
+    "@hatiolab/things-scene": "^2.7.33",
+    "@operato/graphql": "^0.3.20",
+    "jsonwebtoken": "^8.5.1",
+    "subscriptions-transport-ws": "^0.11.0"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.3.20",
+    "@things-factory/builder": "^4.0.38",
+    "@things-factory/operato-board": "^4.0.38",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "f3275af95afaf8389224e1e507df6155cbf39382"
+}