I am trying to get RxDB to let me put items into a database, show them reactively using Vue, and update their values based on user input from the browser. It seems like a pretty typical use case but I can’t figure it out.
<template>
<q-page class="flex flex-center">
<div>
<p>content is here</p>
{{currentState}}
<q-btn @click="setLang()">
</q-btn>
</div>
</q-page>
</template>
<script setup>
import { onMounted, ref, toRaw } from 'vue';
import { createRxDatabase, removeRxDatabase } from 'rxdb';
import { getRxStorageLocalstorage } from 'rxdb/plugins/storage-localstorage';
import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode';
import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
import { addRxPlugin } from 'rxdb/plugins/core';
import { wrappedValidateAjvStorage } from 'rxdb/plugins/validate-ajv';
addRxPlugin(RxDBDevModePlugin);
addRxPlugin(RxDBUpdatePlugin);
const dbHandle = ref();
const currentState = ref();
onMounted(async function () {
console.log("mount");
const storage = wrappedValidateAjvStorage({ storage: getRxStorageLocalstorage(), });
removeRxDatabase('myDB', storage);
let db = await createRxDatabase({
name: 'myDB',
storage: storage,
multiInstance: true,
eventReduce: true,
});
await db.addCollections({
state: {
schema: {
title: 'state schema',
version: 0,
primaryKey: 'name',
type: 'object',
properties: {
name: {
type: 'string',
maxLength: 100,
},
currentLanguage: { type: 'string' },
count: {type: 'integer'},
},
},
},
});
//set initial language to dutch
await db.state.insert({
name: "state",
currentLanguage: "dutch",
count: 0,
});
dbHandle.value = db;
//query the single item that's in the table and track it reactively
const state = dbHandle.value.state.findOne();
state.$.subscribe((result) => {
currentState.value = result;
});
console.log("done with mount");
});
//this is what happens when you click the UI button
async function setLang (evt)
{
console.log("clicked");
//find the single item and print its values
const si = await dbHandle.value.state.findOne().exec();
if (si != null)
{
console.log("SINFO: " + si.name + " " + si.currentLanguage + " " + si.count);
console.log(toRaw(si));
}
else
{
console.log("it's null");
}
await si.patch({ currentLanguage: "french" });
}
</script>
I expected that clicking the UI button would cause the single tuple in the database to update its value from ‘dutch’ to ‘french’, and then this change would appear onscreen.
However, instead I get the error “Uncaught TypeError: proxy must report the same value for the non-writable, non-configurable property ‘”_meta”‘ ” (the call stack indicates that it originate in async code that I didn’t write: rx-query.ts:535).
Full call stack:
Uncaught TypeError: proxy must report the same value for the non-writable, non-configurable property '"_meta"'
deepFreeze utils-object.ts:9
deepFreeze utils-object.ts:7
deepFreezeWhenDevMode index.ts:62
rxChangeEventToEventReduceChangeEvent rx-change-event.ts:51
calculateNewResults event-reduce.ts:133
__ensureEqual rx-query.ts:602
_ensureEqualQueue rx-query.ts:535
utils-object.ts:9:44
(Mozilla Firefox 136.0.4)
Current packages installed from packages.json:
"dependencies": {
"@quasar/extras": "^1.16.4",
"pouchdb": "^9.0.0",
"quasar": "^2.16.0",
"rxdb": "^16.12.0",
"rxjs": "^7.8.2",
"vue": "^3.4.18",
"vue-router": "^4.0.0"
},
I created a generic vue/quasar project using `npm init quasar’ and this is my only user-written component.
