Using Neo4j with React JS

Question

Can we use graph database neo4j with react js? If not so is there any alternate option for including graph database in react JS?

Answer 1

Easily, all you need is neo4j-driver: https://www.npmjs.com/package/neo4j-driver

Here is the most simplistic usage:

neo4j.js

//import { v1 as neo4j } from 'neo4j-driver'
const neo4j = require('neo4j-driver').v1

const driver = neo4j.driver('bolt://localhost', neo4j.auth.basic('username', 'password'))

const session = driver.session()

session
    .run(`
        MATCH (n:Node)
        RETURN n AS someName
    `)
    .then((results) => {
        results.records.forEach((record) => console.log(record.get('someName')))
        session.close()
        driver.close()
    })

It is best practice to close the session always after you get the data. It is inexpensive and lightweight.

It is best practice to only close the driver session once your program is done (like Mongo DB). You will see extreme errors if you close the driver at a bad time, which is incredibly important to note if you are beginner. You will see errors like 'connection to server closed', etc. In async code, for example, if you run a query and close the driver before the results are parsed, you will have a bad time.

You can see in my example that I close the driver after, but only to illustrate proper cleanup. If you run this code in a standalone JS file to test, you will see node.js hangs after the query and you need to press CTRL + C to exit. Adding driver.close() fixes that. Normally, the driver is not closed until the program exits/crashes, which is never in a Backend API, and not until the user logs out in the Frontend.

Knowing this now, you are off to a great start.

Remember, session.close() immediately every time, and be careful with the driver.close().

You could put this code in a React component or action creator easily and render the data.

You will find it no different than hooking up and working with Axios.

You can run statements in a transaction also, which is beneficial for writelocking affected nodes. You should research that thoroughly first, but transaction flow is like this:

const session = driver.session()
const tx = session.beginTransaction()

tx
    .run(query)
    .then(// same as normal)
    .catch(// errors)

// the difference is you can chain multiple transactions:

const tx1 = await tx.run().then()

// use results

const tx2 = await tx.run().then()

// then, once you are ready to commit the changes:


if (results.good !== true) {
    tx.rollback()
    session.close()
    throw error
}

await tx.commit()
session.close()

const finalResults = { tx1, tx2 }
return finalResults

// in my experience, you have to await tx.commit
// in async/await syntax conditions, otherwise it may not commit properly
// that operation is not instant

Answer 2

tl;dr;

Yes, you can!

---

You are mixing two different technologies together. Neo4j is graph database and React.js is framework for front-end.

You can connect to Neo4j from JavaScript - http://neo4j.com/developer/javascript/