learn-graphql
learn-graphql copied to clipboard
Suggestions for up-to-date, typescript version of rxdb-hasura tutorial
Hi, for this tutorial: https://hasura.io/learn/graphql/react-rxdb-offline-first/introduction/
I tried to replicate it in typescript and got as far as correct offline behavior with rxdb (correct save/update/delete locally) and correct syncing with hasura cloud, but only for creates and updates. Deletes do not sync for me. Would it be possible to get a typescript version of the tutorial, so that I can double-check where I may have gone wrong? I had to deviate from the javascript version as follows:
1. Incorporating pouchdb-adapter-idb
:
import {
... // other imports
PouchDB,
} from 'rxdb'
import idb from 'pouchdb-adapter-idb'
PouchDB.plugin(idb)
I've no idea what this actually means/does, other than pouchdb appears to be part of rxdb under the hood and I'm passing it the plugin. This is completely different from the current approach in the js tutorial.
2. I found the other plugin worked differently:
import { addRxPlugin } from 'rxdb/plugins/core'
import { RxDBReplicationGraphQLPlugin, RxGraphQLReplicationState } from 'rxdb/plugins/replication-graphql'
addRxPlugin(RxDBReplicationGraphQLPlugin) // ¯\_(ツ)_/¯
As a learner, I'm confused about what is plugging in where and why there are such different mechanisms :o)
3. The Json Schema used in the tutorial breaks in typescript / with the current version of RxJsonSchema:
-
additionalProperties: true
is not allowed -
indexed
property is not allowed on any element; instead you specify anindexes: [...]
array - it doesn't look like you can have
deleted
as one of the properties. Admittedly, the js tutorial gets by without adeleted
field in the json schema's list of properties, but it is confusing for a learner as to when/where they need to model this field. It looks like it's needed in the database, and in the gql queries and mutations. It may have something to do with why I can't get deletes to sync; not sure.
4. The subscription client from subscriptions-transport-ws
pkg has changed
The onConnect()
and connectionCallback()
don't seem to be valid options anymore but the subscription client itself has onXXX()
methods.
5. Could defer auth concerns till later in the tutorial?
I think the tutorial would be better if it was broken down into 2 parts: 1st part should be without any auth, no admin secret on the hasura endpoint: just help learners to grasp syncing ALONE. Then immediate follow-up with the second part that adds auth on top. Otherwise It's a bit much if you're new to all the underlying tech; just a suggestion.
I would be happy to help put together the typescript version of the tutorial if someone will help me / guide me; I'm still figuring this stuff out lol... OK thank you. And awesome tech from both rxdb and hasura! :o)