This is Work in Progress project. Nothing from this repository should be used on production servers.
The repo contains a working example of Next.js app which integrates RxDB and pull/push GraphQL replication of the remote data store hosted on Hasura. Important to note that data is fetched during and then rendered on the server side. It is then "hydrated" during client side rendering without extra GraphQL request being done.
The purpose of the example is to confirm that it is completely possible (or otherwise not impossible due to found limitations) to completely delegate data manupalition in React app to RxDB, with GraphQL server being used a remote store and replicated within the frontend app. A few pieces of the code can later be separated from the repo into standalone libs or utilities.js.
[x] Async interaction with RxDB collection's .find() method within React component
[ ] Unit tests
[ ] A dynamic or prioritised replication. This is the most important missing piece which makes the approach barely suitable for a publicly faced web app. Currently the replication query/mutation (pull/push) are defined once and never get changed. For a publicly available web app this is not acceptable, as if there is a single query that fetches all the necessary data at the start of an app then the app loading time will be incrediably high. Slow app means high bounce rate and slow growth of users base.
The DBContext component and therefore its config should be modified in the way that allows each individual page of a Next.js app to set different pull/push replication query/mutation. Also, if necessary the caching layer of the Apollo client (the lib that is used for interacting with GraphQL server) should be tweaked up so that the data fetched on different pages are accumulated and can be reused by different queries spread across pages.
Also, it is common for pages of web apps to call different queries on a single page based on user's interaction. In such cases a query with requested data should be replicated immediately to be used by RxDB layer. Otherwise UX will apparently suffer.
The project includes Next.js frontend app as well as GraphQL API based on Hasura. In order to start it up in a quick way you will need to install Docker. The entire stack is described in in docker-compose.yml file, and can be started with a single command.
Run this command in the root dir of the project.
docker-compose upAfter a couple of minutes the fully functional app should be available at http://localhost:3000.
Running next.js app in the docker container is much slower than running it directly on the host machine. So, in terms of performance it is better to start the backend app and DB in Docker like this:
docker-compose up postgres hasuraAnd then start the next.js app outside of the Docker environment, on the host machine (just a usual way to start node.js app):
npm run devWith the following command you can run only those unit tests which are affected by changed files (before commit):
npm run testIn order to run all available tests:
npm run test:allOnly shows error messages, no auto formatting:
npm run lint