在React和Next.js中使用ArangoDB

如今，开发人员可以处理现代应用程序中使用的复杂数据类型，而不必集成多个数据库；多模型数据库将不同数据库范式的优点结合在一起，如图、文档和关系数据库，并将其纳入一个程序。

在本教程中，我们将探讨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 Node.js驱动程序

在将ArangoDB添加到我们的React和Next.js项目中之前，让我们回顾一下驱动程序在Node.js中是如何工作的。在撰写本文时，我使用的是Node.js v16.10。

创建一个名为arangotest 的新文件夹。在里面，运行下面的命令来创建一个新项目。

npm init -y

复制代码

安装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.

相关文章