Quasar App Extension app-extention-rxdb

Quasar extension for GraphQl replication with RxDB, based on the Composition API Vue 3

Install:

quasar ext add @sowell/rxdb

Uninstall:

quasar ext remove @sowell/rxdb

Prerequisites

• Vuex 4.0: for token and database name management
• i18n: for internationalization of error messages. Initialize the i18n in the quasar boot, add the following variables and change the values as desired. More information on i18n quasar

 rxdb: {
    initReplicationError: "Error replication verify your name of collection",
    tokenNotProvided: "Token must be provided",
    stopReplicationError: "No replication state",
    createDbError: "Database must have a name",
    getDBError: "Database doesn't exist",
    getCollectionError: "Collection doesn't exist ",
    subscribeError: "Offline mode"
  }

Prompts:

• urlServer: URl of the GraphQl server.
• urlWebsocket: URl for GraphQl Server Subscription.
• vuex_getters_token: getters for the Authorization header
• vuex_getters_db_name: getters for the database name Nb: The namespaced option is set to true, input format in the prompts:

vuex_getters_token: rxdb/getToken => equivalent: getters["rxdb/getToken"]
vuex_getters_db_name: rxdb/getDbame => equivalent: getters["rxdb/getDbame"]

Usage:

// Inside Store file
const state = {
  user: {
    token: your token,
    name: nameOfBase
  }
}
// getters
const getters = {
  getToken: (state) => state.user.token,
  getDbame: (state) => state.user.name
}

Features

initRxdb()

Initialization of variables for the good functioning of the extension: For "pull-replication", we first need a pullQueryBuilder file. It is a function that gets the last replicated document as input and returns an object with a GraphQL query and its variables.

• queries : It is an array that groups the queryBuilders.
• schema: The schema define what your data looks like, the format must be respected:

const schema = {
  nameOfCollection: {
    title: "Collection Name of schema",
    version: 0,
    description: "Describes your collection",
    type: "object",
    properties: {}
  }

Usage

Initialization of parameters in the quasar boot file.

// boot.js
import rxdb from "@sowell/rxdb"
import schema from "../schemaRxdb"// import your schema file
import {
  todoPullQueryBuilder
} from "./todoQueryBuilder " // import your pullQueryBuilder file
import subscriptionTodoQuery from "./subTodoQuery" // import your subscriptionTodoQuery file

export default async () => {
  const { initRxdb } = rxdb();
  //init queryBuilders
  let queries = [];
    queries["todos"] = 
    [
      { pull: todoPullQueryBuilder },
      { push: todoPushQueryBuilder },
      { sub: subscriptionTodoQuery }
    ];
  initRxdb(queries, schema);
}

createDb()

Asynchronous method to create the local RxDB database. The createDb() method is to be called after an authentication and after the token and the variable that will be used for the database name is defined in the store.

Usage:

//Login.vue 
import rxdb from "@sowell/rxdb"
export default defineComponent({
 name: "Login",
 setup() {
   const { createDb } = rxdb()

   const onSubmit = async () => {
     ...Your connection method
     .then( async function () {
       // creation of the database
       await createDb()
     })
   }
   return {

   }
 }

getDB()

Method to retrieve the created database instance to manipulate it later, such as retrieving a collection or other action with the database, for more details RxDb

Usage:

//todo.vue
import rxdb from "@sowell/rxdb"
export default defineComponent({
 name: "todo",
 setup() {
   const { getDB } = rxdb()
   const collection = getDB.yourColectionName

   return {
     collection
   }
 }

getCollection()

Method that returns a collection directly without going through the getDb() method, it takes as a parameter the name of the collection (in String type).

Usage:

import rxdb from "@sowell/rxdb"
export default defineComponent({
  name: "todo",
  setup() {
    const { getCollection } = rxdb()
    const collection = getCollection("todo")

    return {
      collection
    }
  }

initReplication()

Method to initiate GraphQl replication of RxDb. Preferably to be used in the highest component parent after the database is created.

Usage:

import rxdb from "@sowell/rxdb"
export default defineComponent({
  name: "todo",
  setup() {
    const { initReplication } = rxdb()
    onMounted(()=> {
      initReplication()
    })

    return {
    }
  }

stopReplication()

Method to stop all ongoing replications.

Usage:

import rxdb from "@sowell/rxdb"
export default defineComponent({
  name: "todo",
  setup() {
    const { stopReplication } = rxdb()

     function logout () {
       stopReplication()
     }

    return {
      logout
    }
  }

Donate

If you like the extension, make a donation to Sowell.

License

MIT (c) Sowell