arnosaine / react-pouchdb Goto Github PK

Thanks for your great work!
Is it possible to support a variant which uses https://github.com/stockulus/pouchdb-react-native as pouchdb implementation?

I tryed replacing the three import statements and it worked fine.

Thanks in advance.

I'm using react-pouchdb in a project that has hot module reloading enabled. When the components reload, I get a DOMException "A mutation operation was attempted on a database that did not allow mutations." (and no documents are returned from <Find>).

This looks like some sort of problem with PouchDB having closed the IndexedDB, though I don't know enough about any of the pieces involved to be able to identify the exact cause or how to fix it.

I've noticed that whenever I update props and useFind is called again, there's a short flicker as the fallback UI is rendered. Is it possible to have a smoother transition?

I'm using your library in a React project of mine and it's been working excellently for local databases. Thanks for putting this together!

Now I'm working on synchronizing the database with a pouchdb-server instance. The connection seems to work fine, but calls to useFind are now giving me 400 Bad Request errors when the library tries to access the /_find endpoint on the remote database.

Is there something special I need to do to make useFind work with pouchdb-server?

Is there any option or way to disable live change in useFind ?

I'm trying to use react-pouchdb with a remote server but I can't seem to get any documents to be returned. The query below returns results if used outside React.

class Scoreboard extends Component {
  render() {
     return <div>
       {this.props.teams.map(team => (
         <div key={team.id}>{team.name} - {team.score}</div>
       ))}
     </div>
    return <PouchDB name="https://***">
      <Find
        selector={{score: {$gte: null}}}
        sort={[{score: 'desc'}, {name: 'desc'}]}
        render={({docs}) => (
          return docs.map(doc =>
            <div key={doc._id}>{doc.name} - {doc.score}</div>
          )
        )}/>
    </PouchDB>;
  }
}

However, all I see in the browser is a POST request to /scoreboard/index with the data{"index":{"fields":["score","name"]},"type":"json"}.
No GET request is ever made to retrieve the documents.
Any idea what I'm missing?

According to docs :

Synchronous
It is guaranteed that the API returns with a final response value from PouchDB. Because of this, requests are made sequentially.

Import from react-pouchdb to use the Synchronous API. Example:

import { useFind, useDB } from "react-pouchdb";

but it errors if used without react suspense

Heya,
Most apps will have multiple databases (as in multiple collections). Currently you can only provide a single database.

Something like this would be awesome:

<Find db="users" selector={...} />

This happens when used with Next.Js + Typescript

I am using react-pouchdb like this

                        <PouchDB name={this.props.dbName}>
                            <Suspense fallback="loading...">
                                <MyComponent />
                            </Suspense>
                        </PouchDB>

Error details:

src/node_modules/@postinumero/map-get-with-default/index.js:1
export default function getWithDefault(key, getDefault) {
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/project/test/src/node_modules/ts-node/src/index.ts:807:44)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/project/test/src/node_modules/react-pouchdb/src/utils/createStore.js:1:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/project/test/src/node_modules/ts-node/src/index.ts:807:44)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)

Has anyone thought about adding TypeScript type definitions for this project? I find types are hugely helpful for me when I'm using various libraries.

I ran the library through the Microsoft Types generator (dts-gen) and it came up with this starter file. Obviously it needs a bunch of work to make it useful.

 /** Declaration file generated by dts-gen */

export const DBContext: {
    Consumer: {
        $$typeof: any;
        Consumer: any;
        Provider: {
            $$typeof: any;
        };
    };
    Provider: {
        $$typeof: any;
    };
    default: {
        $$typeof: any;
        Consumer: {
            $$typeof: any;
            Consumer: any;
            Provider: {
                $$typeof: any;
            };
        };
        Provider: {
            $$typeof: any;
        };
    };
};

export function Find(_ref: any): any;

export function Get(_ref: any): any;

export function PouchDB(_ref: any): any;

export function useDB(any: any, ...args: any[]): any;

export function useFind(...args: any[]): any;

export function useGet(...args: any[]): any;

export function withDB(...args: any[]): any;

When running a regex query, i get everytime empty output.
Since this is a query that doesn't use index, i was wondering if this was working with react-pouchdb.

Hi!

Great work on this library, but I think I found an issue.

If you pass some parameter to useFind that causes Pouch to throw an error (my problem was I asked to sort on a column that has no index), this error is swallowed and never shows up in the console. I had to step deep into the code stack to eventually find the error:

Unhandled promise rejection Error: "Cannot sort on field(s) "firstName" when using the default index"
    validateSort index-browser.es.js:501
    1 index-browser.es.js:1216
    run es.promise.js:97
    notify es.promise.js:114
    flush microtask.js:25
    argsArray index.js:18
    _callee$ useFind.js:55
    tryCatch runtime.js:45
    invoke runtime.js:271
    method runtime.js:97
    asyncGeneratorStep asyncToGenerator.js:3
    _next asyncToGenerator.js:25
    run es.promise.js:97
    notify es.promise.js:114
    flush microtask.js:25

The result of this is that useFind() returns undefined and you never know there was a problem. Now that I know the problem I can sort out my index, but the issue I am reporting is that react-pouchdb swallows errors from Pouch.

Hello,

After deployment of the webapp, does the user require to have admin rights to use the browser database?

Regards;

When I created usePouchDB I missed that react-pouchdb also have hooks.
Because there is no point in doing the same work twice I propose "merging" functionality from usePouchDB into react-pouchdb.

I created this issue, so that it can serve as the general discussion place for the merging/re-implementing.

Hooks present in usePouchDB

• useAllDocs - for db.allDocs()
• useView - for db.query() (Map/reduce indexes)

Additionally functionality

useFind in usePouchDB has an index field that excepts the object from db.createIndex()'s index field. The hook will then call db.createIndex(). And then db.find() with the index's ID and name from the result of createIndex.

I wonder if you want to update this library and make it compatible with pouchdb version 8?
there is a big issue with version 8 . it takes a long time to emit changes to the subscribers

... Thank you! And nice work!

I have been building something similar on top of rxdb but I just can't find the time to work on it. Now I don't have to! Your thing already does what I need without the extra dependency of rxdb.

I would appreciate if someone could help me in this issue. Whenever I use react-pouchdb/concurrentmode I got Uncaught Promise error and Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

could somebody send me an example code of concurrent mode

Hi,

First off, thank you for this library. It's exactly what I was looking for.

I've tried to build a simple test of it that replicates a remote db.

To do the replication, in my root component I have something like this:

  const db = useDB();

  useEffect(() => {
    db.sync(new PouchDB(config.dbURL + '/mydb'), {
      live: true,
      retry: true,
    });
  }, []);

That seems to be working well, and it initialises the sync once. I am not sure if there was a better way to do this (have a local db synced with a remote) so please tell me if this is what is affecting it.

I then built two pages, one that uses useFind to get a list of items. And another that uses useGet to get a specific item when you click on it.

Right now, if I go to the page that shows everything, click an item, click back, then click another item, I would expect only 3 things to have been queried (list and 2 items), with only 3 event listeners, but I get this error:

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 destroyed listeners added. Use emitter.setMaxListeners() to increase limit

I'm not sure how it got to 11 listeners, nor why it is failing so quickly. My list only has 3 things in it, so I can't think of any other way it got to 11.

Are you able to see something I haven't?

EDIT: This actually only seems to be happening when I setup the sync. Is there a recommended way to sync the local db with a remote that would avoid this problem?

There's no mention of support for map/reduce queries in the docs so I was wondering if it's supported or not.

Where should one start looking if they were to add this feature?

Thanks 👍

Hello, I want to import pouchdb plugins such as pouchdb-replication-stream, how do I do it with react-pouchdb?

I tried doing this, but it does not work:

import PouchDb from 'pouchdb';
import {PouchDb as PouchDbComponent} from "react-pouch";

PouchDb.plugin(replicationStream.plugin);