@operato/scene-graphql 8.0.0-beta.1 → 8.0.0-beta.2

package/src/graphql-client.ts

@@ -1,185 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import {
-  ApolloClient,
-  DefaultOptions,
-  from,
-  HttpLink,
-  HttpOptions,
-  InMemoryCache,
-  NormalizedCacheObject,
-  ServerParseError
-} from '@apollo/client/core'
-import { ErrorLink, onError } from '@apollo/client/link/error'
-import { Component, ComponentNature, 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: ComponentNature = {
-  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

@@ -1,234 +0,0 @@
-import 'ses'
-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, client as localClient } from '@operato/graphql'
-
-import GraphqlClient from './graphql-client'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'id-input',
-      label: 'client',
-      name: 'client',
-      placeholder: 'leave blank to use origin server',
-      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)) {
-  private _repeatTimer?: number
-  private _isStarted: boolean = false
-
-  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 => {
-        const c = new Compartment({ console })
-        let paramObject = c.evaluate(`({${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 (query) {
-      const graphqlClient: ApolloClient<NormalizedCacheObject> =
-        (client && (this.root.findById(client) as GraphqlClient)?.client) || localClient
-
-      var response
-
-      if (typeof variables === 'object') {
-        response = await graphqlClient.query({
-          query: gql`
-            ${query}
-          `,
-          variables: variables
-        })
-      } else {
-        response = await graphqlClient.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

@@ -1,92 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-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,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      /* origin의 subscription 만을 허용하므로, 엔드포인트 속성은 무시한다. */
-      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 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()
-    }
-
-    super.dispose()
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-
-    context.beginPath()
-    this.drawImage(context, GraphqlSubscription.image, left, top, width, height)
-  }
-
-  ready() {
-    super.ready()
-
-    if (this.app.isViewMode) {
-      this.requestData()
-    }
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  async requestData() {
-    var { query } = this.state
-
-    const { unsubscribe } = await subscribe(
-      {
-        query: gql`
-          ${query}
-        `
-      },
-      {
-        next: ({ data }: { data: any }) => {
-          if (data) {
-            this.data = data
-          }
-        }
-      }
-    )
-
-    this.unsubscribe = unsubscribe
-  }
-}
-
-Component.register('graphql-subscription', GraphqlSubscription)

package/src/index.ts

@@ -1,5 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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/tsconfig.json

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