Dexie.js: React Native support?

Created on 21 Oct 2016  路  9Comments  路  Source: dfahlander/Dexie.js

I love my experience with Dexie so far. What's the best / easiest way to get dexie working on react native? I was thinking of using indexeddbshim + react native sqlite bindings - or maybe just port the parts of dexie I use to operate on sqlite directly. Has there been any discussion about this - or other projects like dexie that target other databases?

Most helpful comment

For anyone snooping around, I was able to work with Dexie on react-native:

import Dexie from 'dexie';
import SQLite from 'react-native-sqlite-2';
import setGlobalVars from '@indexeddbshim/indexeddbshim/dist/indexeddbshim-noninvasive';
let win = {}
setGlobalVars(win, { 
  checkOrigin: false, 
  win: SQLite, 
  deleteDatabaseFiles: false,
  useSQLiteIndexes: true
});

class MyDexie extends Dexie {
  constructor(name: string) {
    super(name, {
      indexedDB: win.indexedDB,
      IDBKeyRange: win.IDBKeyRange,
    });
  }
}

All 9 comments

I think indexeddbshim provides indexedDB on node. No, there's not been so much discussion about this but I'm also having ideas about making it possible to use Dexie towards other data sources. But today it's to much bound to indexedDB so that needs to be changed first.

I'll let you know if I have any luck with getting it to run on sqlite.

I was wondering about react-native support, too. Has anyone had any success with this?

First of all, thanks for the amazing tool.

Is there any plan to create adapters for Dexie (like PouchDB adapters), which makes it possible to store data in other types of storage? As SQLite in React Native or Electron, MySQL in NodeJS or Electron and etc?

I have an interest in porting Dexie to other platforms, or creating an adapters framework that enables this transition.

Could some maintainer guide me where to start?

EDIT:

I think I should start with file https://github.com/dfahlander/Dexie.js/blob/master/src/dbcore/dbcore-indexeddb.ts, is there any other file that accesses IndexedDB directly?

Hi, and thanks for your nice words. IndexedDB is still accesssed directly (outside DBCore) when opening a database. That code starts from Dexie.open() in dexie.ts under classes/dexie and the code that does this origins from dexie-open.ts. Also, creating transaction is directly done in transaction.ts, in the create() method using the native idbdb.transaction() method. Doing "Find all references" from db.idbdb or trans.idbtrans, might reveal locations that talk directly to the native IndexedDB interface. The rewrite to use DBCore was one of the latest changes. There's a method in DBCore: transaction() that is intended to be called here, but the code still do not take that path.

Feel free to experiment on how to improve the adaptivity of Dexie. You're very welcome. There might be some architectural changes needed, such as introducting a new DBCoreFactory interface, or extending DBCore.

Thanks,
David

Thanks for the feedback @dfahlander.

No doubt we have a lot of work here, the good news is that this is fun!

I have seen that exists plans to change the architecture here #602, so I think it would take longer than I can wait.

Initially, I will try to create the version for React Native from my fork, with this I will learn more about the architecture and eventually I can contribute with the refactoring in the main repository.

I just closed #602 as it was an old thread. All that discussion originated from the state of the code before the typescript-rewrite. There is no current refactoring going on so I think the risk for conflicts are low right now. I'll try keeping you updated if that will change.

For anyone snooping around, I was able to work with Dexie on react-native:

import Dexie from 'dexie';
import SQLite from 'react-native-sqlite-2';
import setGlobalVars from '@indexeddbshim/indexeddbshim/dist/indexeddbshim-noninvasive';
let win = {}
setGlobalVars(win, { 
  checkOrigin: false, 
  win: SQLite, 
  deleteDatabaseFiles: false,
  useSQLiteIndexes: true
});

class MyDexie extends Dexie {
  constructor(name: string) {
    super(name, {
      indexedDB: win.indexedDB,
      IDBKeyRange: win.IDBKeyRange,
    });
  }
}
Was this page helpful?
0 / 5 - 0 ratings