@operato/scene-graphql 1.0.0-alpha.6 → 1.0.0

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

@@ -20,7 +20,7 @@ Graphql API를 사용할 수 있는 데이타소스 컴포넌트 패미리이다
 ## properties for graphql-query/mutation
 
 - client component ID
-  - endpoint가 설정된 graphql-client의 ID를 설정한다.
+  - endpoint가 설정된 graphql-client의 ID를 설정한다. 비워두면 origin 서버의 graphql 클라이언트가 사용된다.
 - period
   - 주기적인 query/mutation 호출이 필요한 경우에 그 주기를 second 단위로 설정한다.
 - query
@@ -32,4 +32,22 @@ Graphql API를 사용할 수 있는 데이타소스 컴포넌트 패미리이다
 
 - query/mutation 결과는 바로 이 컴포넌트의 data속성이 되므로, 그 결과를 데이터바인딩에 적용할 수 있다.
 - 데이타의 형태는 query에 의해서 결정된다.
+  - 예를 들어 쿼리가 다음과 같다면, items 를 접근하기 위한 접근자(accessor)는 'data.boards.items' 가 된다.
+
+```
+query {
+  boards {
+    items {
+      id
+      name
+      description
+      thumbnail
+      createdAt
+      updatedAt
+    }
+    total
+  }
+}
+```
+
 - 실제 데이터의 형태는 크롬 브라우저의 개발자 도구의 'Network' - 'XHR'에서 확인할 수 있다.

package/helps/scene/component/graphql.md

@@ -20,7 +20,7 @@ It is a family of data source components that can use Graphql API.
 ## properties for graphql-query/mutation
 
 - client component ID
-  - Set the ID of the graphql-client where the endpoint is configured.
+  - Set the ID of the graphql-client where the endpoint is configured. If not set, the graphql client for the origin server is used.
 - period
   - When periodic query/mutation call is needed, set the period in second unit.
 - query
@@ -32,4 +32,22 @@ It is a family of data source components that can use Graphql API.
 
 - 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.
+  - For example, if the query is as follows, the accessor to access items is 'data.boards.items'
+
+```
+query {
+  boards {
+    items {
+      id
+      name
+      description
+      thumbnail
+      createdAt
+      updatedAt
+    }
+    total
+  }
+}
+```
+
 - 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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@operato/scene-graphql",
   "description": "Graphql datasource component for things-scene",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,23 +26,21 @@
     "migration": "things-factory-migration"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@hatiolab/things-scene": "^2.7.34",
-    "@operato/graphql": "^1.0.0-alpha.51",
-    "jsonwebtoken": "^8.5.1",
-    "subscriptions-transport-ws": "^0.11.0"
+    "@apollo/client": "^3.6.9",
+    "@hatiolab/things-scene": "^3.0.19",
+    "@operato/graphql": "^1.0.0"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@operato/board": "^1.0.0-alpha.51",
-    "@things-factory/builder": "^5.0.0-alpha.28",
-    "@things-factory/operato-board": "^5.0.0-alpha.28",
+    "@things-factory/builder": "^5.0.0-zeta.28",
+    "@things-factory/operato-board": "^5.0.0-zeta.28",
     "@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",
+    "graphql-tag": "^2.12.6",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
@@ -61,5 +59,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3807e89728ce6cd472cfd732f4da9676c7b21541"
+  "gitHead": "41d54d5fd010844be20b670f46119e4c06d6850e"
 }

package/src/graphql-client.ts

@@ -2,7 +2,6 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { ServerParseError } from '@apollo/client'
 import {
   ApolloClient,
   DefaultOptions,
@@ -10,7 +9,8 @@ import {
   HttpLink,
   HttpOptions,
   InMemoryCache,
-  NormalizedCacheObject
+  NormalizedCacheObject,
+  ServerParseError
 } from '@apollo/client/core'
 import { ErrorLink, onError } from '@apollo/client/link/error'
 import { Component, ComponentNature, DataSource, RectPath, Shape } from '@hatiolab/things-scene'

package/src/graphql-query-and-mutation.ts

@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client/core'
 import { Component, ComponentNature, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import { buildArgs } from '@operato/graphql'
+import { buildArgs, client as localClient } from '@operato/graphql'
 
 import GraphqlClient from './graphql-client'
 
@@ -15,6 +15,7 @@ const NATURE: ComponentNature = {
       type: 'id-input',
       label: 'client',
       name: 'client',
+      placeholder: 'leave blank to use origin server',
       property: {
         component: 'graphql-client' // component의 type (null or undefined이면 모든 컴포넌트)
       }
@@ -41,8 +42,6 @@ const NATURE: ComponentNature = {
 }
 
 class GraphQLQuery extends DataSource(RectPath(Shape)) {
-  public client?: ApolloClient<NormalizedCacheObject>
-
   private _repeatTimer?: NodeJS.Timeout
   private _isStarted: boolean = false
 
@@ -163,19 +162,21 @@ class GraphQLQuery extends DataSource(RectPath(Shape)) {
     var query = this.query
     var variables = this.value
 
-    if (client && query) {
-      this.client = (this.root.findById(client) as GraphqlClient)?.client
+    if (query) {
+      const graphqlClient: ApolloClient<NormalizedCacheObject> =
+        (client && (this.root.findById(client) as GraphqlClient)?.client) || localClient
+
       var response
 
       if (typeof variables === 'object') {
-        response = await this.client?.query({
+        response = await graphqlClient.query({
           query: gql`
             ${query}
           `,
           variables: variables
         })
       } else {
-        response = await this.client?.query({
+        response = await graphqlClient.query({
           query: gql`
             ${query}
           `,

package/src/graphql-subscription.ts

@@ -2,9 +2,10 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { SubscriptionClient } from 'subscriptions-transport-ws'
+import { gql } from 'graphql-tag'
 
 import { Component, ComponentNature, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+import { subscribe } from '@operato/graphql'
 
 const NATURE: ComponentNature = {
   mutable: false,
@@ -12,6 +13,7 @@ const NATURE: ComponentNature = {
   rotatable: true,
   properties: [
     {
+      /* origin의 subscription 만을 허용하므로, 엔드포인트 속성은 무시한다. */
       type: 'string',
       label: 'endpoint',
       name: 'endpoint'
@@ -27,7 +29,6 @@ const NATURE: ComponentNature = {
 
 export default class GraphqlSubscription extends DataSource(RectPath(Shape)) {
   private static _image: HTMLImageElement
-  private client?: SubscriptionClient
   private unsubscribe?: () => void
 
   static get image() {
@@ -43,10 +44,6 @@ export default class GraphqlSubscription extends DataSource(RectPath(Shape)) {
     if (this.unsubscribe) {
       this.unsubscribe()
     }
-    if (this.client) {
-      this.client.unsubscribeAll()
-      this.client.close(true)
-    }
 
     super.dispose()
   }
@@ -59,51 +56,36 @@ export default class GraphqlSubscription extends DataSource(RectPath(Shape)) {
   }
 
   ready() {
-    this._initGraphqlSubscription()
+    super.ready()
+
+    if (this.app.isViewMode) {
+      this.requestData()
+    }
   }
 
   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 }) {
+    var { query } = this.state
+
+    const { unsubscribe } = await subscribe(
+      {
+        query: gql`
+          ${query}
+        `
+      },
+      {
+        next: ({ data }: { data: any }) => {
           if (data) {
-            self.data = data
+            this.data = data
           }
         }
-      })
+      }
+    )
 
-      this.unsubscribe = unsubscribe
-    })
+    this.unsubscribe = unsubscribe
   }
 }