昨天分享過了 Neo4j HTTP API 的使用，所以如果你知道怎麼使用 JavaScript 呼叫 HTTP API，其實就可以在網頁實作圖形資料的應用了。

以下是透過 jQuery ajax 來達成與 Neo4j 資料庫的互動，大概比較需要注意的就是記得給 Authorization header，以及 data 要經過 JSON.stringify 處理。

$.ajax({
    type: 'POST',
    headers: {
        'Content-Type': 'application/json',
        Authorization: 'Basic bmVvNGo6bXlwYXNzd29yZA=='
    },
    url: 'http://localhost:7474/db/neo4j/tx',
    data: JSON.stringify({
        "statements": [
            {
                "statement": "CREATE (n:Person $props) RETURN n",
                "parameters": {
                    "props": {
                        "name": "Egg"
                    }
                },
            }
        ]
    }),
    success: function(msg) {
        console.log('transaction commit endpoint: ' + msg.commit);
        console.log('result: ' + msg.results);
        console.log('errors: ' + msg.errors);
    },
    error: function(msg) {
        console.log('http status: ' + msg.status);
        console.log('message: '+ msg.responseText);
    }
});

以 axios 達成與 Neo4j 資料庫的互動

axios({
    method: 'post',
    headers: {
        'Content-Type': 'application/json',
        Authorization: 'Basic bmVvNGo6bXlwYXNzd29yZA=='
    },
    url: 'http://localhost:7474/db/neo4j/tx',
    data: {
        "statements": [
            {
                "statement": "CREATE (n:Person $props) RETURN n",
                "parameters": {
                    "props": {
                        "name": "Egg"
                    }
                },
            }
        ]
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

使用 Neo4j JavaScript driver 存取資料庫

不過，Neo4j 官方也有包裝好的 JavaScript driver，使用上可能會更方便一些，不用再自己分清楚要打哪一支 http api，首先要加入以下其中一個 JavaScript 參考

<!-- 下載 js driver 後在本地參考引用 -->
<script src="lib/browser/neo4j-web.min.js"></script>

<!-- unpkg CDN，適合開發用，會自動取得最新版 -->
<script src="https://unpkg.com/neo4j-driver"></script>
<!-- unpkg CDN 壓縮版適合正式線上環境，版號須自行指定 -->
<script src="https://unpkg.com/neo4j-driver@4.1.2/lib/browser/neo4j-web.min.js"></script>

<!-- jsDelivr CDN，適合開發用，會自動取得最新版 -->
<script src="https://cdn.jsdelivr.net/npm/neo4j-driver"></script>
<!-- jsDelivr CDN 壓縮版適合正式線上環境，版號須自行指定 -->
<script src="https://cdn.jsdelivr.net/npm/neo4j-driver@4.1.2/lib/browser/neo4j-web.min.js"></script>

使用 JavaScript 得先宣告 driver 與 session 物件，並在執行完畢後下達 session.close()。

var driver = neo4j.driver(
    'neo4j://localhost',
    neo4j.auth.basic('neo4j', 'yourpassword')
)

var session = driver.session()

Subscriber API

const result = session.run(
    'CREATE (p:Person {name: $myname}) RETURN p',
    { myname: 'Egg' }
)
.subscribe({
    onKeys: keys => {
        console.log(keys)
    },
    onNext: record => {
        console.log(record.get('p'))
    },
    onCompleted: () => {
        session.close()
    },
    onError: error => {
        console.log(error)
    }
})

Promise API

const result = session.run(
    'CREATE (p:Person {name: $myname}) RETURN p',
    { myname: 'Egg' }
)
.then(result => {
    result.records.forEach(record => {
        console.log(record.get('p'))
    })
})
.catch(error => {
    console.log(error)
})
.then(() => session.close())

讀取資料庫，隱性交易

單次讀取的交易不需要明確的下達 Commit，而是會自動 Commit

var readTxResultPromise = session.readTransaction(txc => {
    var result = txc.run('MATCH (p:Person) RETURN p')
    return result
})

readTxResultPromise.then(result => {
    console.log(result.records)
})
.catch(error => {
    console.log(error)
})
.then(() => session.close())

寫入資料庫，癮性交易

單次寫入的隱性交易一樣不用明確的下達 Commit

var writeTxResultPromise = session.writeTransaction(async txc => {
    var result = await txc.run(
        "MERGE (alice:Person {name : 'Alice'}) RETURN alice"
    )
    return result
})

writeTxResultPromise.then(result => {
    console.log(result)
})
.catch(error => {
    console.log(error)
})
.then(() => session.close())

寫入資料庫，顯性交易

以下是明確執行一個交易

const txc = session.beginTransaction()
try {
    const result1 = await txc.run(
        'MERGE (bob:Person {name: $nameParam}) RETURN bob.name AS name',
        { nameParam: 'Bob' }
    )

    const result2 = await txc.run(
        'MERGE (adam:Person {name: $nameParam}) RETURN adam.name AS name',
        { nameParam: 'Adam' }
    )

    await txc.commit()
    console.log('committed')
} catch (error) {
    console.log(error)
    await txc.rollback()
    console.log('rolled back')
} finally {
    await session.close()
}

以上就是以 JavaScript driver 存取 Neo4j 資料庫，可以看到原本需要明確指定的 HTTP GET、POST、DELETE 以及 API endpoint /tx, /tx/{transaction_id}/commit，HTTP body 的處理細節都被隱藏了，操作也更為彈性。

參考資源：
https://neo4j.com/docs/api/javascript-driver/current/
https://neo4j.com/developer/javascript/