如今，开发人员可以处理现代应用程序中使用的复杂数据类型，而不必集成多个数据库；多模型数据库将不同数据库范式的优点结合在一起，如图、文档和关系数据库，并将其纳入一个程序。
在本教程中，我们将探讨ArangoDB，一个多模型的开源数据库，为文档、图和键值提供灵活的数据模型。我们将用React和Next.js构建我们的简单数据库应用。
与它的竞争者MongoDB、Fauna、DGraph和Neo4j一样，ArangoDB使用云端托管的数据库服务Oasis，这使得它可以轻松构建和扩展你的应用程序。
开始使用ArangoDB
首先，在cloud.rangodb.com上注册一个新的Oasis账户。在菜单上选择项目，创建一个新的ArangoDB项目；为了保持在ArangoDB的免费层，请确保坚持使用OneShard基本服务。
接下来，为你的项目选择一个名称，并选择你的云提供商和地区。当你的数据库被启动时，你需要等待几分钟。
要导航到你的网络仪表板，点击你的数据库URL旁边的图标。使用room 作为用户名和你的仪表板的密码登录。在用户下，创建一个新用户。后，转到数据库，创建一个测试数据库。
熟悉Arango查询语言
为了熟悉Arango查询语言（AQL），让我们创建一个新的例子集合，名为cheese 。前往查询部分，运行下面的代码，将数据插入到cheese 集合。
INSERT {name: "American"}
IN cheese
复制代码继续前进，向cheese 集合添加一些项目。为了从cheese 集合中获取项目，运行下面的查询。
FOR c IN cheese
RETURN c
复制代码ArangoDB的语法是不言自明的，你可以在ArangoDB的JavaScript驱动，如下所示。
npm install arangojs
复制代码现在，创建一个index.js 文件。通过添加下面的代码建立数据库连接，但是，要确保它反映了你独特的数据库连接字符串。
const { Database, aql } = require("arangojs");
// establish database connection
const db = new Database({
url: "https://XXXXXXXXXX.arangodb.cloud:8529/",
databaseName: "XXXXXX",
auth: { username: "XXXXXXX", password: "XXXXXX" },
});
复制代码现在，我们将定义一个函数，在我们的数据库中创建一个新的集合，或者在集合已经存在的情况下防止错误发生。
下面的函数。
- 接收一个集合名称作为参数
- 获取一个当前在数据库中的所有集合的列表
- 确定所需的集合是否已经存在
- 如果集合不存在，则创建该集合
- 返回该集合
// function to get collection or create it if it doesn't exist
const getCollection = async (cName) => {
// get list of collections in database
const collections = await db.collections();
// check if collection exists, if so return collection, if not, create it if (collections.includes(cName)) { return await db.collection(cName); } else { return db.createCollection(cName); } };
复制代码让我们尝试添加一个新的项目，cat ，到我们的集合中。下面的函数运行getCollection ，确保该集合存在。它还运行一个查询，通过插值传递name 参数。AQL标签处理并保护该函数免受注入攻击。
// create a new cat
const createCat = async (name) => {
// make sure cat collection exists
await getCollection("cats")
// query to insert a cat
await db.query(aql`INSERT {name: ${name}} IN cats`)
}
复制代码现在，让我们运行一个可以查询结果的函数。AQL查询返回异步的ArrayCursor 对象。为了在数组中得到我们的结果，我们必须在查询游标上循环，并将结果推到数组中。
下面的函数检查集合是否存在，创建一个数组来存储结果，查询cats ，在arrayCursor 中循环，将每个cat 项目推入数组，并返回cats 的数组。
const getCats = async () => {
// make sure cat collection exists
await getCollection("cats")
// declare array to hold cats
let result = []
// query for cats
const results = await db.query(aql`FOR c IN cats RETURN c`)
// loop through array cursor and push results in array
for await (cat of results){
result.push(cat)
}
// log results
console.log(result)
// return the list of cats
return result
}
复制代码这个项目的完整代码看起来像下面的代码块。
const { Database, aql } = require("arangojs");
// establish database connection
const db = new Database({
url: "https://xxxxxxxxx.arangodb.cloud:8529/",
databaseName: "xxxxxx",
auth: { username: "xxxxxxx", password: "xxxxxxx" },
});
// function to get collection or create it if it doesn't exist
const getCollection = async (cName) => {
// get list of collections in database
const collections = await db.collections();
// check if collection exists, if so return collection, if not, create it
if (collections.find((c) => c._name === cName)) {
return await db.collection(cName);
} else {
return db.createCollection(cName);
}
};
// create a new cat
const createCat = async (name) => {
// make sure cat collection exists
await getCollection("cats")
// query to insert a cat
await db.query(aql`INSERT {name: ${name}} IN cats`)
}
// query cats
const getCats = async () => {
// make sure cat collection exists
await getCollection("cats")
// declare array to hold cats
let result = []
// query for cats
const results = await db.query(aql`FOR c IN cats RETURN c`)
// loop through array cursor and push results in array
for await (cat of results){
result.push(cat)
}
// log results
console.log(result)
// return the list of cats
return result
}
createCat("Miles")
getCats()
复制代码在你运行这段代码几次后，你会发现每个项目都有几个属性，我们可以用它们作为的标识符。
{
_key: '10012443',
_id: 'cats/10012443',
_rev: '_dEUBD1---_',
name: 'Miles'
}
复制代码在你的React应用程序中使用ArangoDB
你想避免在应用程序的前端暴露你的数据库凭证。要做到这一点，我们有几个选择，仍然可以让你使用你喜欢的前端框架。
其一，你可以用你喜欢的Node.js框架创建一个API，比如Express、Koa.js、Fastify、Sails.js、Loopback、FoalTS或NestJS。另外，你也可以使用无服务器函数，这在Vercel或Netlify中很容易。后，你可以使用任何与你选择的前端相匹配的同构框架。
- React/ Next.js
- Vue/ Nuxt.js
- Svelte/ SvelteKit
- Angular/ Angular Universal
现在，让我们使用Next.js创建一个API，从我们的React应用程序中访问ArangoDB。
设置您的 Next.js 应用程序
通过在终端运行以下命令，生成一个新的 Next.js 应用程序。
npm init next-app
复制代码将该项目命名为arangoreact 。一旦项目完成生成，CD ，并安装arangojs 。
npm install arangojs
复制代码创建一个名为utils 的文件夹；在里面，创建一个名为db.js 的文件。让我们把我们的连接代码包在自己的函数中，这样我们就可以根据需要进行连接。
const { Database, aql } = require("arangojs");
const getConnection = () => {
// establish database connection
return new Database({
url: "https://5e5b9f99f7e1.arangodb.cloud:8529/",
databaseName: "test",
auth: { username: "testuser", password: "test" },
});
};
复制代码现在，我们将复制我们的getCollection 函数，并修改它，使其接收连接作为一个参数。
// function to get collection or create it if it doesn't exist
const getCollection = async (cName, db) => {
// get list of collections in database
const collections = await db.collections();
// check if collection exists, if so return collection, if not, create it
if (collections.find((c) => c._name === cName)) {
return await db.collection(cName);
} else {
return db.createCollection(cName);
}
};
复制代码接下来，我们将让我们的函数查询cats ，然后导出它，这样我们就可以在API路由中使用它。请注意，我们更新了该函数，以便在其中建立连接。
// query cats
export const getCats = async () => {
// make connection
const db = getConnection()
// make sure cat collection exists
await getCollection("cats", db);
// declare array to hold cats
let result = [];
// query for cats
const results = await db.query(aql`FOR c IN cats RETURN c`);
// loop through array cursor and push results in array
for await (let cat of results) {
result.push(cat);
}
// log results
console.log(result);
// return the list of cats
return result;
};
复制代码在Next.js中创建我们的API路由
在pages/api 中创建一个文件，称为cats.js 。
import { getCats } from "../../utils/db";
export default async function (req, res){
const cats = await getCats()
console.log(cats)
res.json(cats)
}
复制代码localhost:3000/api/cats 现在，你应该可以打开Next.js的开发服务器npm run dev ，然后通过从Postman或Insomnia等平台向GET ，测试API。
从React组件中获取数据
在这一点上，数据是通过一个标准的API端点交付的。我们将使用从API获取数据的标准做法。
首先，我们将用useState Hook声明状态来保存API数据。接下来，我们将声明一个函数，用fetch 请求数据并更新状态。我们将在useEffect Hook中调用这个函数，这样在页面加载时只发生一次。
在pages/index.js 中添加下面的代码。
import {useState, useEffect} from "react"
export default function index (){
// create the state
const [cats, setCats] = useState([])
// function to request cats and update state
const fetchCats = async () => {
const response = await fetch("/api/cats")
const data = await response.json()
setCats(data)
}
// call the function on page load with useEffect
useEffect(() => fetchCats(), [])
// return JSX using cats data
return <div>
{cats.map(cat => (
<ul>
{Object.keys(cat).map(key => (
<li>{key}: {cat[key]}</li>
))}
</ul>
))}
</div>
}
复制代码现在，如果你访问localhost:3000 ，你会看到我们所有的cats 列在页面上。我们刚刚成功地将数据从ArangoDB数据库拉到我们的React应用程序中。
总结
多模型数据库对于改善和组织复杂的数据库来说，是一种游戏规则的改变。在本教程中，我们用React和Next.js探索了ArangoDB。首先，我们通过一个简单的例子熟悉了Arango查询语言，然后我们学习了如何从在线ArangoDB仪表板和Node.js驱动中工作。
ArangoDB是在你的React应用程序中处理广泛的、复杂的数据库的一个伟大选择。它的使用相当简单，通过结合图、文档和关系型数据库的功能，为数据映射提供了一个简单的解决方案。我希望你喜欢这个教程
The postUsing ArangoDB with React and Next.jsappeared first onLogRocket Blog.
