General Advice for building a SPA in Neo4j

[baibhavbista]

Hello everyone. This is my first post in the Neo4j forums. Is this the right category for this question? If no, please point me to a category which would be more appropriate.

I wanted advice for how to go about building a single page application(SPA) using Neo4j as the database layer.

I was thinking of going the route of having the SPA (preferably in Vue JS) interact with a backend (preferably Flask) through an API, and the backend would then communicate with Neo4j using bolt API. Would this be the preferred approach? Or would it be preferable to use the Bolt API from client side ?

The app also needs to have some offline capability i.e. limited to viewing/editing some recently opened pages, and edits later sync to the database when online. How could this be realized?
I was thinking of having the backend return data in JSON to the client, which would then manage the JSONs in its store (using state-mgmt solutions like Vuex, Redux). This leads to two problems:

1. I cannot use Cypher to query the data, and then have to rely on JS filters and such. What can I do about this? Does Neo4j have something like Datascript that can run inside a browser? Or a community project perhaps?
2. Syncing: How would local changes (in JSON) be communicated to the backend (which would then replicate the changes in the database)? The best I could think of is recording the changes in a format (e.g. favourited 2e4r3f, modified 2e4r3f "text it is now") and send those to the backend. What would you guys do?

I would love if anyone could provide their advice or guide me towards resources that could help.

P.S. I moved this topic from the "Drivers & Stacks" section, because I saw that this section XD

[webtic · Accepted solution]

Hi welcome to the community

You are on the right track with regard to the SPA; split front-end and back-end into two separate things and create an API using JSON to communicate between the two.

I have been developing with Neo4J since early 2.x versions with a similar architecture which works fine up to today. I did move from Flask to Sanic, depending on the size of the project and the stuff the API needs to deal with I might consider FastAPI.

The fact that you can write Cypher in the backend and easily transfer it to the front-end via JSON is a very powerful combi. The standard Python neo4j drivers are fine, but were non-existent when I started. For my projects I normally use py2neo which is also made by @technige and offers a deeper integration into the Python world.

There is another route possible, the one with GraphQL and GrandStack. I have been eying the GraphQL syntax and see some use-cases for it but currently have no direct use for it.

With regards to your requirement of offline editing I have no direct answers; my projects have no such requirement. I do notice that there are projects like https://developer.aliyun.com/mirror/npm/package/offline-sync which sync JSON data structures, that might be a route you could take?

Hope this helps,
Paul

[baibhavbista]

Hello Paul,

Thank you for the quick reply. I was not expecting a reply for a few days at least, in my experience with other internet communities. I was pleasantly surprised.

Thank you for your advice on the split. I will also look into the resources you mentioned, fast api looks very nice. I had been thinking more about Starlette than Flask anyways but this looks better in some ways.

My question about changes to JSON was a bit more broad than just the offline part(though I seem to have focused on that in my question). Say a user make some changes to the data in page through the frontend. How do I map those changes to my database? Do I make an update call for every query? Or is there a way for managing this better? This question is not that related to Neo4j but I saw that you had much experience in backend, and wondered if you could help me on this as well.

One another question. I also want to incorporate some interactive graphs and was looking into neovis.js. However, it seems to require a database connection. Is there a way to handle this by building an api too, or should I just use a straight db connection for neovis.js and everything else through an API?

Regards
Baibhav

[webtic]

Sorry, I have no hands-on experience with offline data syncing in the context of a SPA.
I would go with JSON and make sure there is a single authoritative source, that way you can compare both sides and update accordingly.

On the graphing stuff; there are a few alternatives listed at https://neo4j.com/developer/tools-graph-visualization/ ; but there are many others. Depending on your use-case you might find http://www.apcjones.com/arrows/# inspirational.

[baibhavbista]

Oh okay. Thank you for your help anyways.
I think I will ask a specific answer related to the data syncing in the forums.

Regards,
Baibhav