@operato/scene-graphql 0.1.3

package/src/graphql-client.ts

@@ -0,0 +1,185 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { ServerParseError } from '@apollo/client'
+import {
+  ApolloClient,
+  DefaultOptions,
+  from,
+  HttpLink,
+  HttpOptions,
+  InMemoryCache,
+  NormalizedCacheObject
+} from '@apollo/client/core'
+import { ErrorLink, onError } from '@apollo/client/link/error'
+import { Component, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+const defaultOptions: DefaultOptions = {
+  watchQuery: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'ignore'
+  },
+  query: {
+    fetchPolicy: 'no-cache', //'network-only'
+    errorPolicy: 'all'
+  },
+  mutate: {
+    errorPolicy: 'all'
+  }
+}
+
+const ERROR_HANDLER: ErrorLink.ErrorHandler = ({ operation, graphQLErrors, networkError }) => {
+  if (graphQLErrors) {
+    document.dispatchEvent(
+      new CustomEvent('notify', {
+        detail: {
+          level: 'error',
+          message: graphQLErrors[0].message,
+          ex: graphQLErrors
+        }
+      })
+    )
+  }
+
+  if (networkError) {
+    /* networkError가 ServerParseError 이거나 ServerError 인 경우에만 statusCode를 갖는다. */
+    switch ((networkError as ServerParseError).statusCode) {
+      case undefined /* in case this error is not a server side error */:
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              level: 'error',
+              message: networkError.message,
+              ex: networkError
+            }
+          })
+        )
+        break
+
+      case 401:
+        /* 401 에러가 리턴되면, 인증이 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 signin 프로세스를 진행할 수 있다. */
+        document.dispatchEvent(new CustomEvent('auth-required'))
+        break
+
+      case 403:
+        /* 403 에러가 리턴되면, 도메인 정보가 필요하다는 메시지를 dispatch 한다. 이 auth 모듈 등에서 이 메시지를 받아서 domain-register 프로세스 등을 진행할 수 있다. */
+        document.dispatchEvent(new CustomEvent('domain-required'))
+        break
+
+      default:
+        var { name, response, statusCode, bodyText, message } = networkError as ServerParseError
+        if (name == 'ServerParseError') {
+          message = `[ ${statusCode || ''} : ${response.statusText} ] ${bodyText}`
+        } else {
+          /* in case this error is instanceof ServerError */
+          message = `[ ${statusCode || ''} : ${response.statusText} ] ${message}`
+        }
+
+        document.dispatchEvent(
+          new CustomEvent('notify', {
+            detail: {
+              level: 'error',
+              message,
+              ex: networkError
+            }
+          })
+        )
+    }
+  }
+}
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'endpoint',
+      name: 'endpoint'
+    }
+  ],
+  help: 'scene/component/graphql'
+}
+
+export default class GraphqlClient extends DataSource(RectPath(Shape)) {
+  private static _image: HTMLImageElement
+  private _client?: ApolloClient<NormalizedCacheObject>
+
+  static get image() {
+    if (!GraphqlClient._image) {
+      GraphqlClient._image = new Image()
+      GraphqlClient._image.src = new URL('../icons/symbol-graphql-client.png', import.meta.url).href
+    }
+
+    return GraphqlClient._image
+  }
+
+  ready() {
+    super.ready()
+
+    this.init()
+  }
+
+  init() {
+    var { endpoint } = this.state
+
+    if (!endpoint) {
+      console.warn('endpoint not defined')
+      return
+    }
+
+    var cache = new InMemoryCache()
+    const httpOptions: HttpOptions = {
+      uri: endpoint,
+      credentials: 'include'
+    }
+
+    const client = new ApolloClient({
+      defaultOptions,
+      cache,
+      link: from([onError(ERROR_HANDLER), new HttpLink(httpOptions)])
+    })
+
+    this._client = client
+  }
+
+  get client(): ApolloClient<NormalizedCacheObject> | undefined {
+    return this._client
+  }
+
+  dispose() {
+    super.dispose()
+
+    try {
+      if (this._client) {
+        this._client.stop()
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    /*
+     * TODO role이 publisher 인지 subscriber 인지에 따라서 구분할 수 있는 표시를 추가할 것.
+     */
+
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, GraphqlClient.image, left, top, width, height)
+  }
+
+  onchangeData(data: any, before: any) {
+    super.onchangeData(data, before)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('graphql-client', GraphqlClient)

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

@@ -0,0 +1,233 @@
+import gql from 'graphql-tag'
+
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client/core'
+import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import { buildArgs } from '@operato/graphql'
+
+import GraphqlClient from './graphql-client'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'id-input',
+      label: 'client',
+      name: 'client',
+      property: {
+        component: 'graphql-client' // component의 type (null or undefined이면 모든 컴포넌트)
+      }
+    },
+    {
+      type: 'number',
+      label: 'period',
+      name: 'period',
+      placeholder: 'SECONDS'
+    },
+    {
+      type: 'graphql',
+      label: 'query',
+      name: 'query'
+    },
+    {
+      type: 'checkbox',
+      label: 'auto-start',
+      name: 'autoStart'
+    }
+  ],
+  'value-property': 'value',
+  help: 'scene/component/graphql'
+}
+
+class GraphQLQuery extends DataSource(RectPath(Shape)) {
+  public client?: ApolloClient<NormalizedCacheObject>
+
+  private _repeatTimer?: NodeJS.Timeout
+  private _isStarted: boolean = false
+
+  value: any
+
+  get nature() {
+    return NATURE
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('value' in after) {
+      if (after.value) this.requestData()
+    }
+  }
+
+  get period() {
+    return this.state.period * 1000
+  }
+
+  set period(period) {
+    this.setState('period', period)
+    this._initGraphqlQuery()
+  }
+
+  get repeatTimer() {
+    return this._repeatTimer
+  }
+
+  set repeatTimer(repeatTimer) {
+    this._stopRepeater()
+    this._repeatTimer = repeatTimer
+  }
+
+  get autoStart() {
+    return this.state.autoStart
+  }
+
+  set autoStart(autoStart) {
+    this.setState('autoStart', autoStart)
+  }
+
+  get query() {
+    var _query = this.state.query
+    var objToVal = (exp: any) => {
+      if (typeof exp === 'string') return exp
+      else return JSON.stringify(exp)
+    }
+    var changedQuery: string | undefined = (Component.buildSubstitutor(_query, this, objToVal) || (() => _query))()
+    try {
+      changedQuery = changedQuery!.replace(/\(.*\)/gi, params => {
+        let paramObject = eval(`({${params.slice(1, -1)}})`)
+        return '(' + buildArgs(paramObject) + ')'
+      })
+    } catch (e) {
+      console.log(e)
+    }
+
+    return changedQuery
+  }
+
+  get source() {
+    return this.getState('source')
+  }
+
+  set source(source) {
+    this.setState('source', source)
+  }
+
+  dispose() {
+    super.dispose()
+    this._stopRepeater()
+  }
+
+  ready() {
+    super.ready()
+    if (this.autoStart) {
+      this._initGraphqlQuery()
+    }
+  }
+
+  _initGraphqlQuery() {
+    if (!this.app.isViewMode) return
+
+    this._stopRepeater()
+    this._startRepeater()
+  }
+
+  _stopRepeater() {
+    if (this.repeatTimer !== undefined) {
+      clearTimeout(this._repeatTimer!)
+      delete this._repeatTimer
+    }
+
+    this._isStarted = false
+  }
+
+  _startRepeater() {
+    this._isStarted = true
+
+    // requestAnimationFrame 이 호출되지 않을 때는 requestData 호출도 하지 않도록 함.
+    var _ = () => {
+      if (!this._isStarted) {
+        return
+      }
+      this.requestData()
+      if (!Number.isNaN(this.period) && this.period > 0) {
+        this._repeatTimer = setTimeout(() => {
+          requestAnimationFrame(_)
+        }, this.period)
+      }
+    }
+    requestAnimationFrame(_)
+  }
+
+  async requestData() {
+    if (!this.app.isViewMode) return
+    var { client } = this.state
+    var query = this.query
+    var variables = this.value
+
+    if (client && query) {
+      this.client = (this.root.findById(client) as GraphqlClient)?.client
+      var response
+
+      if (typeof variables === 'object') {
+        response = await this.client?.query({
+          query: gql`
+            ${query}
+          `,
+          variables: variables
+        })
+      } else {
+        response = await this.client?.query({
+          query: gql`
+            ${query}
+          `,
+          errorPolicy: 'all'
+        })
+      }
+
+      console.log('response', response)
+      this.data = response
+    }
+  }
+}
+
+export class Query extends GraphQLQuery {
+  private static _image: HTMLImageElement
+
+  static get image() {
+    if (!Query._image) {
+      Query._image = new Image()
+      Query._image.src = new URL('../icons/symbol-graphql-query.png', import.meta.url).href
+    }
+
+    return Query._image
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, Query.image, left, top, width, height)
+  }
+}
+
+export class Mutation extends GraphQLQuery {
+  private static _image: HTMLImageElement
+
+  static get image() {
+    if (!Mutation._image) {
+      Mutation._image = new Image()
+      Mutation._image.src = new URL('../icons/symbol-graphql-mutation.png', import.meta.url).href
+    }
+
+    return Mutation._image
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, Mutation.image, left, top, width, height)
+  }
+}
+
+Component.register('graphql-query', Query)
+Component.register('graphql-mutation', Mutation)

package/src/graphql-subscription.ts

@@ -0,0 +1,110 @@
+/*
+ * 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)) {
+  private static _image: HTMLImageElement
+  private client?: SubscriptionClient
+  private unsubscribe?: () => void
+
+  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: CanvasRenderingContext2D) {
+    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)

package/src/index.ts

@@ -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]

package/src/templates/graphql-client.ts

@@ -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: '/'
+  }
+}

package/src/templates/graphql-mutation.ts

@@ -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
+  }
+}`
+  }
+}

package/src/templates/graphql-query.ts

@@ -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
+  }
+}`
+  }
+}

package/src/templates/graphql-subscription.ts

@@ -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
+  }
+}`
+  }
+}

package/src/templates/index.ts

@@ -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]

package/things-scene.config.js

@@ -0,0 +1,5 @@
+import templates from './dist/templates'
+
+export default {
+  templates
+}

package/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "label.client": "Client Component ID",
+  "label.endpoint": "Endpoint",
+  "label.auto-start": "Auto Start",
+  "label.period": "Period",
+  "label.query": "Query"
+}

package/translations/ko.json

@@ -0,0 +1,7 @@
+{
+  "label.client": "클라이언트 컴포넌트 ID",
+  "label.endpoint": "엔드포인트",
+  "label.auto-start": "자동 시작",
+  "label.period": "Period",
+  "label.query": "Query"
+}

package/translations/zh.json

@@ -0,0 +1,7 @@
+{
+  "label.client": "Client Component ID",
+  "label.endpoint": "Endpoint",
+  "label.auto-start": "Auto Start",
+  "label.period": "Period",
+  "label.query": "Query"
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "src",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node"]
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}