ar_sync 1.0.5 → 1.1.1

data/package.json

@@ -11,7 +11,7 @@
     "actioncable": "^5.2.0",
     "@types/actioncable": "^5.2.0",
     "eslint": "^5.16.0",
-    "typescript": "3.7.2",
+    "typescript": "3.9.5",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
     "@typescript-eslint/parser": "^1.6.0"
   }

data/src/core/ArSyncApi.ts

@@ -10,12 +10,17 @@ async function apiBatchFetch(endpoint: string, requests: object[]) {
   if (res.status === 200) return res.json()
   throw new Error(res.statusText)
 }
-
+type FetchError = {
+  type: string
+  message: string
+  retry: boolean
+}
 interface PromiseCallback {
-  resolve: (data: object) => void
-  reject: (error: object) => void
+  resolve: (data: any) => void
+  reject: (error: FetchError) => void
 }
 
+type Request = { api: string; params?: any; query: any; id?: number }
 class ApiFetcher {
   endpoint: string
   batches: [object, PromiseCallback][] = []
@@ -23,7 +28,15 @@ class ApiFetcher {
   constructor(endpoint: string) {
     this.endpoint = endpoint
   }
-  fetch(request: object) {
+  fetch(request: Request) {
+    if (request.id != null) {
+      return new Promise((resolve, reject) => {
+        this.fetch({ api: request.api, params: { ids: [request.id] }, query: request.query }).then((result: any[]) => {
+          if (result[0]) resolve(result[0])
+          else reject({ type: 'Not Found', retry: false })
+        }).catch(reject)
+      })
+    }
     return new Promise((resolve, reject) => {
       this.batches.push([request, { resolve, reject }])
       if (this.batchFetchTimer) return
@@ -49,7 +62,7 @@ class ApiFetcher {
             const result = results[i]
             const callbacks = callbacksList[i]
             for (const callback of callbacks) {
-              if (result.data) {
+              if (result.data !== undefined) {
                 callback.resolve(result.data)
               } else {
                 const error = result.error || { type: 'Unknown Error' }
@@ -73,7 +86,7 @@ const syncFetcher = new ApiFetcher('/sync_api')
 const ArSyncApi = {
   domain: null as string | null,
   _batchFetch: apiBatchFetch,
-  fetch: (request: object) => staticFetcher.fetch(request),
-  syncFetch: (request: object) => syncFetcher.fetch(request),
+  fetch: (request: Request) => staticFetcher.fetch(request),
+  syncFetch: (request: Request) => syncFetcher.fetch(request),
 }
 export default ArSyncApi

data/src/core/ArSyncStore.ts

@@ -1,47 +1,56 @@
-import ArSyncAPI from './ArSyncApi'
+import ArSyncApi from './ArSyncApi'
 
-const ModelBatchRequest = {
-  timer: null,
-  apiRequests: {} as {
-    [api: string]: {
-      [queryJSON: string]: {
-        query
-        requests: {
-          [id: number]: {
-            id: number
-            model?
-            callbacks: ((model) => void)[]
-          }
-        }
+class ModelBatchRequest {
+  timer: number | null = null
+  apiRequests = new Map<string,
+    Map<string,
+      {
+        query,
+        requests: Map<number, {
+          id: number
+          model?
+          callbacks: {
+            resolve: (model: any) => void
+            reject: (error?: any) => void
+          }[]
+        }>
       }
-    }
-  },
+    >
+  >()
   fetch(api: string, query, id: number) {
     this.setTimer()
-    return new Promise(resolve => {
+    return new Promise((resolve, reject) => {
       const queryJSON = JSON.stringify(query)
-      const apiRequest = this.apiRequests[api] = this.apiRequests[api] || {}
-      const queryRequests = apiRequest[queryJSON] = apiRequest[queryJSON] || { query, requests: {} }
-      const request = queryRequests.requests[id] = queryRequests.requests[id] || { id, callbacks: [] }
-      request.callbacks.push(resolve)
+      let apiRequest = this.apiRequests.get(api)
+      if (!apiRequest) this.apiRequests.set(api, apiRequest = new Map())
+      let queryRequests = apiRequest.get(queryJSON)
+      if (!queryRequests) apiRequest.set(queryJSON, queryRequests = { query, requests: new Map() })
+      let request = queryRequests.requests.get(id)
+      if (!request) queryRequests.requests.set(id, request = { id, callbacks: [] })
+      request.callbacks.push({ resolve, reject })
     })
-  },
+  }
   batchFetch() {
-    const { apiRequests } = this as typeof ModelBatchRequest
-    for (const api in apiRequests) {
-      const apiRequest = apiRequests[api]
-      for (const { query, requests } of Object.values(apiRequest)) {
-        const ids = Object.values(requests).map(({ id }) => id)
-        ArSyncAPI.syncFetch({ api, query, params: { ids } }).then((models: any[]) => {
-          for (const model of models) requests[model.id].model = model
-          for (const { model, callbacks } of Object.values(requests)) {
-            for (const callback of callbacks) callback(model)
+    this.apiRequests.forEach((apiRequest, api) => {
+      apiRequest.forEach(({ query, requests }) => {
+        const ids = Array.from(requests.keys())
+        ArSyncApi.syncFetch({ api, query, params: { ids } }).then((models: any[]) => {
+          for (const model of models) {
+            const req = requests.get(model.id)
+            if (req) req.model = model
           }
+          requests.forEach(({ model, callbacks }) => {
+            callbacks.forEach(cb => cb.resolve(model))
+          })
+        }).catch(e => {
+          requests.forEach(({ callbacks }) => {
+            callbacks.forEach(cb => cb.reject(e))
+          })
         })
-      }
-    }
-    this.apiRequests = {}
-  },
+      })
+    })
+    this.apiRequests.clear()
+  }
   setTimer() {
     if (this.timer) return
     this.timer = setTimeout(() => {
@@ -50,6 +59,7 @@ const ModelBatchRequest = {
     }, 20)
   }
 }
+const modelBatchRequest = new ModelBatchRequest
 
 type ParsedQuery = {
   attributes: Record<string, ParsedQuery>
@@ -57,31 +67,42 @@ type ParsedQuery = {
   params: any
 } | {}
 
+type Unsubscribable = { unsubscribe: () => void }
+
 class ArSyncContainerBase {
   data
-  listeners
-  networkSubscriber
+  listeners: Unsubscribable[] = []
+  networkSubscriber?: Unsubscribable
   parentModel
   parentKey
   children: ArSyncContainerBase[] | { [key: string]: ArSyncContainerBase | null }
   sync_keys: string[]
-  onConnectionChange
-  constructor() {
-    this.listeners = []
-  }
+  onConnectionChange?: (status: boolean) => void
   replaceData(_data, _sync_keys?) {}
   initForReload(request) {
     this.networkSubscriber = ArSyncStore.connectionManager.subscribeNetwork((state) => {
-      if (state) {
-        ArSyncAPI.syncFetch(request).then(data => {
-          if (this.data) {
+      if (!state) {
+        if (this.onConnectionChange) this.onConnectionChange(false)
+        return
+      }
+      if (request.id != null) {
+        modelBatchRequest.fetch(request.api, request.query, request.id).then(data => {
+          if (this.data && data) {
             this.replaceData(data)
             if (this.onConnectionChange) this.onConnectionChange(true)
             if (this.onChange) this.onChange([], this.data)
           }
         })
       } else {
-        if (this.onConnectionChange) this.onConnectionChange(false)
+        ArSyncApi.syncFetch(request).then(data => {
+          if (this.data && data) {
+            this.replaceData(data)
+            if (this.onConnectionChange) this.onConnectionChange(true)
+            if (this.onChange) this.onChange([], this.data)
+          }
+        }).catch(e => {
+          console.error(`failed to reload. ${e}`)
+        })
       }
     })
   }
@@ -103,8 +124,8 @@ class ArSyncContainerBase {
     for (const l of this.listeners) l.unsubscribe()
     this.listeners = []
   }
-  static compactQuery(query: ParsedQuery) {
-    function compactAttributes(attributes: Record<string, ParsedQuery>) {
+  static compactQueryAttributes(query: ParsedQuery) {
+    function compactAttributes(attributes: Record<string, ParsedQuery>): [ParsedQuery, boolean] {
       const attrs = {}
       const keys: string[] = []
       for (const key in attributes) {
@@ -118,13 +139,13 @@ class ArSyncContainerBase {
       if (Object.keys(attrs).length === 0) {
         if (keys.length === 0) return [true, false]
         if (keys.length === 1) return [keys[0], false]
-        return [keys]
+        return [keys, false]
       }
       const needsEscape = attrs['attributes'] || attrs['params'] || attrs['as']
       if (keys.length === 0) return [attrs, needsEscape]
       return [[...keys, attrs], needsEscape]
     }
-    function compactQuery(query: ParsedQuery) {
+    function compactQuery(query: ParsedQuery): ParsedQuery {
       if (!('attributes' in query)) return true
       const { as, params } = query
       const [attributes, needsEscape] = compactAttributes(query.attributes)
@@ -138,10 +159,9 @@ class ArSyncContainerBase {
       if (attributes !== true) result.attributes = attributes
       return result
     }
-    try{
     const result = compactQuery(query)
+    if (typeof result === 'object' && 'attributes' in result) return result.attributes
     return result === true ? {} : result
-  }catch(e){throw JSON.stringify(query)+e.stack}
   }
   static parseQuery(query, attrsonly: true): Record<string, ParsedQuery>
   static parseQuery(query): ParsedQuery
@@ -179,13 +199,19 @@ class ArSyncContainerBase {
   }
   static _load({ api, id, params, query }, root) {
     const parsedQuery = ArSyncRecord.parseQuery(query)
-    const compactQuery = ArSyncRecord.compactQuery(parsedQuery)
-    if (id) {
-      return ModelBatchRequest.fetch(api, compactQuery, id).then(data => new ArSyncRecord(parsedQuery, data, null, root))
+    const compactQueryAttributes = ArSyncRecord.compactQueryAttributes(parsedQuery)
+    if (id != null) {
+      return modelBatchRequest.fetch(api, compactQueryAttributes, id).then(data => {
+        if (!data) throw { retry: false }
+        const request = { api, id, query: compactQueryAttributes }
+        return new ArSyncRecord(parsedQuery, data, request, root)
+      })
     } else {
-      const request = { api, query: compactQuery, params }
-      return ArSyncAPI.syncFetch(request).then((response: any) => {
-        if (response.collection && response.order) {
+      const request = { api, query: compactQueryAttributes, params }
+      return ArSyncApi.syncFetch(request).then((response: any) => {
+        if (!response) {
+          throw { retry: false }
+        } else if (response.collection && response.order) {
           return new ArSyncCollection(response.sync_keys, 'collection', parsedQuery, response, request, root)
         } else if (response instanceof Array) {
           return new ArSyncCollection([], '', parsedQuery, response, request, root)
@@ -222,6 +248,7 @@ class ArSyncRecord extends ArSyncContainerBase {
   id: number
   root
   query
+  queryAttributes
   data
   children: { [key: string]: ArSyncContainerBase | null }
   paths: string[]
@@ -231,15 +258,13 @@ class ArSyncRecord extends ArSyncContainerBase {
     this.root = root
     if (request) this.initForReload(request)
     this.query = query
+    this.queryAttributes = query.attributes || {}
     this.data = {}
     this.children = {}
     this.replaceData(data)
   }
-  setSyncKeys(sync_keys: string[]) {
-    this.sync_keys = sync_keys
-    if (!this.sync_keys) {
-      this.sync_keys = []
-    }
+  setSyncKeys(sync_keys: string[] | undefined) {
+    this.sync_keys = sync_keys ?? []
   }
   replaceData(data) {
     this.setSyncKeys(data.sync_keys)
@@ -249,8 +274,8 @@ class ArSyncRecord extends ArSyncContainerBase {
       this.data.id = data.id
     }
     this.paths = []
-    for (const key in this.query.attributes) {
-      const subQuery = this.query.attributes[key]
+    for (const key in this.queryAttributes) {
+      const subQuery = this.queryAttributes[key]
       const aliasName = subQuery.as || key
       const subData = data[aliasName]
       const child = this.children[aliasName]
@@ -291,9 +316,9 @@ class ArSyncRecord extends ArSyncContainerBase {
         }
       }
     }
-    if (this.query.attributes['*']) {
+    if (this.queryAttributes['*']) {
       for (const key in data) {
-        if (!this.query.attributes[key] && this.data[key] !== data[key]) {
+        if (!this.queryAttributes[key] && this.data[key] !== data[key]) {
           this.mark()
           this.data[key] = data[key]
         }
@@ -302,8 +327,8 @@ class ArSyncRecord extends ArSyncContainerBase {
     this.subscribeAll()
   }
   onNotify(notifyData: NotifyData, path?: string) {
-    const { action, class_name, id } = notifyData
-    const query = path && this.query.attributes[path]
+    const { action, class_name: className, id } = notifyData
+    const query = path && this.queryAttributes[path]
     const aliasName = (query && query.as) || path;
     if (action === 'remove') {
       const child = this.children[aliasName]
@@ -314,7 +339,7 @@ class ArSyncRecord extends ArSyncContainerBase {
       this.onChange([aliasName], null)
     } else if (action === 'add') {
       if (this.data[aliasName] && this.data[aliasName].id === id) return
-      ModelBatchRequest.fetch(class_name, ArSyncRecord.compactQuery(query), id).then(data => {
+      modelBatchRequest.fetch(className, ArSyncRecord.compactQueryAttributes(query), id).then(data => {
         if (!data || !this.data) return
         const model = new ArSyncRecord(query, data, null, this.root)
         const child = this.children[aliasName]
@@ -325,12 +350,17 @@ class ArSyncRecord extends ArSyncContainerBase {
         model.parentModel = this
         model.parentKey = aliasName
         this.onChange([aliasName], model.data)
+      }).catch(e => {
+        console.error(`failed to load ${className}:${id} ${e}`)
       })
     } else {
       const { field } = notifyData
       const query = field ? this.patchQuery(field) : this.reloadQuery()
-      if (query) ModelBatchRequest.fetch(class_name, query, id).then(data => {
+      if (!query) return
+      modelBatchRequest.fetch(className, query, id).then(data => {
         if (this.data) this.update(data)
+      }).catch(e => {
+        console.error(`failed to load patch ${className}:${id} ${e}`)
       })
     }
   }
@@ -345,34 +375,29 @@ class ArSyncRecord extends ArSyncContainerBase {
     }
   }
   patchQuery(key: string) {
-    const val = this.query.attributes[key]
-    if (!val) return
-    let { attributes, as, params } = val
-    if (attributes && Object.keys(val.attributes).length === 0) attributes = null
-    if (!attributes && !as && !params) return key
-    const result: { attributes?; as?; params? } = {}
-    if (attributes) result.attributes = attributes
-    if (as) result.as = as
-    if (params) result.params = params
-    return result
+    const subQuery = this.queryAttributes[key]
+    if (subQuery) return { [key]: subQuery }
   }
   reloadQuery() {
     if (this.reloadQueryCache) return this.reloadQueryCache
-    const reloadQuery = this.reloadQueryCache = { attributes: [] as any[] }
-    for (const key in this.query.attributes) {
+    let arrayQuery = [] as string[] | null
+    const hashQuery = {}
+    for (const key in this.queryAttributes) {
       if (key === 'sync_keys') continue
-      const val = this.query.attributes[key]
+      const val = this.queryAttributes[key]
       if (!val || !val.attributes) {
-        reloadQuery.attributes.push(key)
+        arrayQuery?.push(key)
+        hashQuery[key] = true
       } else if (!val.params && Object.keys(val.attributes).length === 0) {
-        reloadQuery.attributes.push({ [key]: val })
+        arrayQuery = null
+        hashQuery[key] = val
       }
     }
-    return reloadQuery
+    return this.reloadQueryCache = arrayQuery || hashQuery
   }
   update(data) {
     for (const key in data) {
-      const subQuery = this.query.attributes[key]
+      const subQuery = this.queryAttributes[key]
       if (subQuery && subQuery.attributes && Object.keys(subQuery.attributes).length > 0) continue
       if (this.data[key] === data[key]) continue
       this.mark()
@@ -392,12 +417,14 @@ class ArSyncRecord extends ArSyncContainerBase {
   }
 }
 
+type Ordering = { first?: number; last?: number; orderBy: string; direction: 'asc' | 'desc' }
 class ArSyncCollection extends ArSyncContainerBase {
   root
   path: string
-  order: { limit: number | null; key: string; mode: 'asc' | 'desc' } = { limit: null, mode: 'asc', key: 'id' }
+  ordering: Ordering = { orderBy: 'id', direction: 'asc' }
   query
-  compactQuery
+  queryAttributes
+  compactQueryAttributes
   data: any[]
   children: ArSyncRecord[]
   aliasOrderKey = 'id'
@@ -406,31 +433,28 @@ class ArSyncCollection extends ArSyncContainerBase {
     this.root = root
     this.path = path
     this.query = query
-    this.compactQuery = ArSyncRecord.compactQuery(query)
+    this.queryAttributes = query.attributes || {}
+    this.compactQueryAttributes = ArSyncRecord.compactQueryAttributes(query)
     if (request) this.initForReload(request)
-    if (query.params && (query.params.order || query.params.limit)) {
-      this.setOrdering(query.params.limit, query.params.order)
+    if (query.params) {
+      this.setOrdering(query.params)
     }
     this.data = []
     this.children = []
     this.replaceData(data, sync_keys)
   }
-  setOrdering(limit: unknown, order: unknown) {
-    let mode: 'asc' | 'desc' = 'asc'
-    let key: string = 'id'
-    if (order === 'asc' || order === 'desc') {
-      mode = order
-    } else if (typeof order === 'object' && order) {
-      const keys = Object.keys(order)
-      if (keys.length > 1) throw 'multiple order keys are not supported'
-      if (keys.length === 1) key = keys[0]
-      mode = order[key] === 'asc' ? 'asc' : 'desc'
-    }
-    const limitNumber = (typeof limit === 'number') ? limit : null
-    if (limitNumber !== null && key !== 'id') throw 'limit with custom order key is not supported'
-    const subQuery = this.query.attributes[key]
-    this.aliasOrderKey = (subQuery && subQuery.as) || key
-    this.order = { limit: limitNumber, mode, key }
+  setOrdering(ordering: { first?: unknown; last?: unknown; orderBy?: unknown; direction?: unknown }) {
+    let direction: 'asc' | 'desc' = 'asc'
+    let orderBy: string = 'id'
+    let first: number | undefined = undefined
+    let last: number | undefined = undefined
+    if (ordering.direction === 'desc') direction = ordering.direction
+    if (typeof ordering.orderBy === 'string') orderBy = ordering.orderBy
+    if (typeof ordering.first === 'number') first = ordering.first
+    if (typeof ordering.last === 'number') last = ordering.last
+    const subQuery = this.queryAttributes[orderBy]
+    this.aliasOrderKey = (subQuery && subQuery.as) || orderBy
+    this.ordering = { first, last, direction, orderBy }
   }
   setSyncKeys(sync_keys: string[]) {
     if (sync_keys) {
@@ -439,26 +463,26 @@ class ArSyncCollection extends ArSyncContainerBase {
       this.sync_keys = []
     }
   }
-  replaceData(data: any[] | { collection: any[]; order: any }, sync_keys: string[]) {
+  replaceData(data: any[] | { collection: any[]; ordering: Ordering }, sync_keys: string[]) {
     this.setSyncKeys(sync_keys)
-    const existings: { [key: string]: ArSyncRecord } = {}
-    for (const child of this.children) existings[child.data.id] = child
+    const existings = new Map<number, ArSyncRecord>()
+    for (const child of this.children) existings.set(child.data.id, child)
     let collection: any[]
-    if ('collection' in data && 'order' in data) {
-      collection = data.collection
-      this.setOrdering(data.order.limit, data.order.mode)
-    } else {
+    if (Array.isArray(data)) {
       collection = data
+    } else {
+      collection = data.collection
+      this.setOrdering(data.ordering)
     }
     const newChildren: any[] = []
     const newData: any[] = []
     for (const subData of collection) {
-      let model: ArSyncRecord | null = null
-      if (typeof(subData) === 'object' && subData && 'id' in subData) model = existings[subData.id]
+      let model: ArSyncRecord | undefined = undefined
+      if (typeof(subData) === 'object' && subData && 'sync_keys' in subData) model = existings.get(subData.id)
       let data = subData
       if (model) {
         model.replaceData(subData)
-      } else if (subData.id) {
+      } else if (subData.sync_keys) {
         model = new ArSyncRecord(this.query, subData, null, this.root)
         model.parentModel = this
         model.parentKey = subData.id
@@ -471,7 +495,7 @@ class ArSyncCollection extends ArSyncContainerBase {
     }
     while (this.children.length) {
       const child = this.children.pop()!
-      if (!existings[child.data.id]) child.release()
+      if (!existings.has(child.data.id)) child.release()
     }
     if (this.data.length || newChildren.length) this.mark()
     while (this.data.length) this.data.pop()
@@ -480,54 +504,78 @@ class ArSyncCollection extends ArSyncContainerBase {
     this.subscribeAll()
   }
   consumeAdd(className: string, id: number) {
+    const { first, last, direction } = this.ordering
+    const limit = first || last
     if (this.data.findIndex(a => a.id === id) >= 0) return
-    if (this.order.limit === this.data.length) {
-      if (this.order.mode === 'asc') {
-        const last = this.data[this.data.length - 1]
-        if (last && last.id < id) return
+    if (limit && limit <= this.data.length) {
+      const lastItem = this.data[this.data.length - 1]
+      const firstItem = this.data[0]
+      if (direction === 'asc') {
+        if (first) {
+          if (lastItem && lastItem.id < id) return
+        } else {
+          if (firstItem && id < firstItem.id) return
+        }
       } else {
-        const last = this.data[this.data.length - 1]
-        if (last && last.id > id) return
+        if (first) {
+          if (lastItem && id < lastItem.id) return
+        } else {
+          if (firstItem && firstItem.id < id) return
+        }
       }
     }
-    ModelBatchRequest.fetch(className, this.compactQuery, id).then((data: any) => {
+    modelBatchRequest.fetch(className, this.compactQueryAttributes, id).then((data: any) => {
       if (!data || !this.data) return
       const model = new ArSyncRecord(this.query, data, null, this.root)
       model.parentModel = this
       model.parentKey = id
-      const overflow = this.order.limit && this.order.limit === this.data.length
+      const overflow = limit && limit <= this.data.length
       let rmodel: ArSyncRecord | undefined
       this.mark()
       const orderKey = this.aliasOrderKey
-      if (this.order.mode === 'asc') {
-        const last = this.data[this.data.length - 1]
-        this.children.push(model)
-        this.data.push(model.data)
-        if (last && last[orderKey] > data[orderKey]) this.markAndSort()
-        if (overflow) {
-          rmodel = this.children.shift()!
-          rmodel.release()
-          this.data.shift()
+      const firstItem = this.data[0]
+      const lastItem = this.data[this.data.length - 1]
+      if (direction === 'asc') {
+        if (firstItem && data[orderKey] < firstItem[orderKey]) {
+          this.children.unshift(model)
+          this.data.unshift(model.data)
+        } else {
+          const skipSort = lastItem && lastItem[orderKey] < data[orderKey]
+          this.children.push(model)
+          this.data.push(model.data)
+          if (!skipSort) this.markAndSort()
         }
       } else {
-        const first = this.data[0]
-        this.children.unshift(model)
-        this.data.unshift(model.data)
-        if (first && first[orderKey] > data[orderKey]) this.markAndSort()
-        if (overflow) {
+        if (firstItem && data[orderKey] > firstItem[orderKey]) {
+          this.children.unshift(model)
+          this.data.unshift(model.data)
+        } else {
+          const skipSort = lastItem && lastItem[orderKey] > data[orderKey]
+          this.children.push(model)
+          this.data.push(model.data)
+          if (!skipSort) this.markAndSort()
+        }
+      }
+      if (overflow) {
+        if (first) {
           rmodel = this.children.pop()!
-          rmodel.release()
           this.data.pop()
+        } else {
+          rmodel = this.children.shift()!
+          this.data.shift()
         }
+        rmodel.release()
       }
       this.onChange([model.id], model.data)
       if (rmodel) this.onChange([rmodel.id], null)
+    }).catch(e => {
+      console.error(`failed to load ${className}:${id} ${e}`)
     })
   }
   markAndSort() {
     this.mark()
     const orderKey = this.aliasOrderKey
-    if (this.order.mode === 'asc') {
+    if (this.ordering.direction === 'asc') {
       this.children.sort((a, b) => a.data[orderKey] < b.data[orderKey] ? -1 : +1)
       this.data.sort((a, b) => a[orderKey] < b[orderKey] ? -1 : +1)
     } else {

data/src/core/ConnectionManager.ts

@@ -38,6 +38,7 @@ export default class ConnectionManager {
     return { unsubscribe }
   }
   subscribe(key, func) {
+    if (!this.networkStatus) return { unsubscribe(){} }
     const subscription = this.connect(key)
     const id = subscription.serial++
     subscription.ref++