Intégrez une base de données SQL sans serveur avec Vercel Postgres

Vercel propose désormais différents types de bases de données rationalisées dans son flux de travail. Dans cet article, nous nous concentrerons sur l’une des bases de données : Vercel Postgres. Nous passerons en revue ses principales fonctionnalités et son processus de configuration et montrerons comment interagir avec lui à l’aide du SDK Vercel Postgres et de Prisma ORM.

Vercel se positionne comme une plate-forme qui fait abstraction de la gestion de l’infrastructure, permettant aux développeurs de se concentrer exclusivement sur la création d’applications Web modernes. L’introduction de Vercel Stockageune suite de produits de stockage sans serveur gérés qui s’intègre de manière transparente aux frameworks frontaux populaires.

Loin de dépendre de services de bases de données externes, Vercel propose désormais différents types de bases de données rationalisées dans son flux de travail. Cet ajout améliore considérablement l’expérience, l’efficacité et l’évolutivité des développeurs.

Dans cet article, nous nous concentrerons sur l’une des bases de données :Vercel Postgres. Nous passerons en revue ses principales fonctionnalités et son processus de configuration et montrerons comment interagir avec lui à l’aide du Vercel Postgres SDK et ORM Prisma. Au final, vous aurez les connaissances nécessaires pour tirer parti de la puissance de Vercel Postgres pour une gestion efficace des données dans vos projets Vercel.

Conditions préalables

Ce guide suppose que vous avez une connaissance de base de Réagir et Suivant.js.

Vercel Postgres

Vercel Postgres a été présenté comme l’un des quatuors comprenant Vercel KV, Vercel Blob et Vercel Edge Config. Il s’agit d’une base de données SQL sans serveur permettant de stocker des données structurées et relationnelles. Il permet la création de bases de données PostgreSQL évolutives et sécurisées conçues pour s’intégrer aux fonctions Vercel.

Malgré un partenariat avec Base de données néon alimente Vercel Postgres, toutes les opérations, telles que la création, la suppression et la gestion de Postgres, se déroulent dans le tableau de bord Vercel. Vous n’aurez donc pas besoin de créer un compte Neon pour utiliser Vercel Postgres.

Vercel Postgres offre plusieurs avantages, ce qui en fait un choix attrayant pour les développeurs travaillant avec Vercel. Jetons un coup d’œil à quelques-uns des plus notables :

• Sans serveur et évolutif : Vercel Postgres est sans serveur et s’adapte automatiquement aux besoins de votre application, éliminant ainsi le besoin de fournir et de gérer les ressources de base de données.
• Flux de travail rationalisé : En proposant des solutions de bases de données intégrées, Vercel Postgres crée un environnement de développement plus unifié. Cela encourage les développeurs à rester au sein de l’écosystème Vercel tout au long du projet.
• Prise en charge de SQL : Vercel Postgres permet aux développeurs d’interagir avec leurs données en utilisant le langage SQL puissant et familier.
• Normes de sécurité élevées : Vercel met en œuvre des mesures de sécurité robustes pour mieux protéger vos données.
• Intégration avec les ORM : En plus de son SDK, Vercel Postgres prend également en charge l’intégration avec des outils de mappage objet-relationnel (ORM) populaires tels que Prisma et Drizzle.

Comme mentionné précédemment, Vercel Postgres n’est que l’une des bases de données récemment introduites. Vous pouvez trouver plus d’informations sur le stockage Vercel et d’autres bases de données disponibles dans la documentation.

Configuration du projet

Exécutez la commande ci-dessous pour créer une application Next.js :

npx create-next-app

Cela crée une application Next.js et la configure en fonction d’invites spécifiques. Sélectionnez les options mises en évidence dans l’image ci-dessous.

Pour utiliser Vercel Postgres avec une application, nous devons d’abord ajouter l’application à Vercel. Pour ce faire, nous téléchargerions le projet sur GitHub, puis le connecterions à Vercel.

Pour transférer votre application de démonstration sur votre compte GitHub, suivez les étapes ci-dessous :

1. Si vous n’avez pas encore de compte GitHub, en créer un. Si vous le faites, se connecter.
2. Une fois connecté, cliquez sur Nouveau sur la console pour enregistrer un nouveau référentiel.
3. Entrez un nom et une description préférés pour votre projet, puis cliquez sur Créer un référentiel.
4. Pour terminer le push vers GitHub, exécutez les commandes fournies sur la page suivante dans le terminal du projet de démonstration.

Pour plus d’informations sur la façon de télécharger un projet sur GitHub, cliquez ici.

Configuration de Vercel Postgres

Ensuite, connectons l’application que nous avons téléchargée sur Vercel. Si vous n’avez pas de compte Vercel, vous pouvez en créer un. Si vous êtes déjà un utilisateur, il suffit se connecter. Une fois l’intégration terminée, ajoutez un nouveau projet en cliquant sur le bouton Ajouter un nouveau sur la console du tableau de bord. Cela vous permettra d’ajouter un nouveau projet depuis votre référentiel GitHub.

Ensuite, sélectionnez le projet de démonstration téléchargé dans votre liste de référentiels. Attribuez un nom au projet, puis cliquez sur « Déployer ». Cela déploiera votre application sur Vercel.

Après un déploiement réussi, vous devriez voir une nouvelle page avec un message de félicitations et un lien vers votre application nouvellement déployée.

Sélectionnez « Continuer vers le tableau de bord », puis procédez à la création de la base de données.

Dans l’en-tête du tableau de bord, cliquez sur « Stockage », puis sur « Créer une base de données ». Un modal apparaîtra, répertoriant les différentes bases de données proposées par Vercel.

Sélectionnez « Postgres » dans la liste et continuez en sélectionnant l’option de configuration par défaut pour le reste des invites résultantes. Nous avons maintenant connecté avec succès la base de données à notre projet.

Pour intégrer cette base de données à notre projet de démonstration, nous aurons besoin de certaines informations d’identification. Ceux-ci incluent l’URL de l’API, l’hôte, le mot de passe et autres, qui sont pré-générés et fournis en tant que variables d’environnement une fois la base de données connectée à un projet déployé.

Cliquez sur « Paramètres » dans l’en-tête du tableau de bord, puis sélectionnez « Variables d’environnement » dans la barre latérale pour voir la liste des variables d’environnement prédéfinies :

Créons ensuite un pipeline d’interaction entre l’application de démonstration et la base de données. Exécutez la commande suivante dans le terminal pour installer la dernière version de Vercel CLI :

npm i -g vercel@latest

Cela nous permet d’exécuter des commandes Vercel dans le terminal.

Exécutez également la commande ci-dessous pour installer le SDK Vercel Postgres :

npm i @vercel/postgres

Le SDK fournit un moyen efficace d’interagir avec la base de données Postgres. Dans la section suivante, nous verrons comment utiliser le SDK.

Exécutez la commande suivante pour importer les variables d’environnement prédéfinies dans notre projet local afin qu’elles puissent être utilisées pour accéder à la base de données :

vercel env pull .env.development.local

Cela crée un .env.development.local dans notre projet de démonstration et le remplit avec les définitions des variables d’environnement.

Cela fait, nous avons mis en place et intégré avec succès notre base de données Vercel Postgres. Dans la section suivante, nous verrons comment interagir avec cette base de données.

Interagir avec la base de données

Il existe deux manières principales d’accéder à la base de données à partir de l’application de démonstration :

• Via le SDK Vercel Postgres
• Via l’un des ORM pris en charge

Le SDK Vercel Postgres

Le SDK résume les complexités de l’accès à la base de données et fournit des outils pour une interaction efficace avec la base de données Postgres. Le SDK est compatible avec le nœud-postgres bibliothèque et propose les options suivantes :

SQL

Le sql La fonction, importée du SDK Vercel Postgres, est conçue pour créer automatiquement une connexion à une base de données groupée en utilisant l’URL spécifiée dans les variables d’environnement.

Contrairement aux fonctions génériques invoquées avec des parenthèses, le sql La fonction est définie comme une balise littérale de modèle. On ne l’appelle pas en utilisant des parenthèses. Au lieu de cela, il est suffixé par une chaîne littérale de modèle qui définit une requête SQL particulière.

Voici à quoi ressemble la syntaxe :

sql`INSERT INTO Pets (Name, Owner) VALUES (${petName}, ${ownerName});`;

L’extrait de code ci-dessus montre comment construire des requêtes SQL à l’aide de sql balise littérale de modèle. Cette fonction convertit ensuite la requête en requête paramétrée native de Postgres.

Cette approche est utilisée pour éviter la possibilité d’injections SQL. Une erreur sera générée si vous essayez d’appeler le sql fonctionner comme une fonction régulière. Découvrez comment la fonction est traitée sous le capot.

Pour voir cela en action, assurez-vous que le serveur de développement est en cours d’exécution ou exécutez la commande ci-dessous dans le terminal pour le redémarrer :

npm run dev

Créez un nouveau fichier nommé route.ts au sein de api/test répertoire et ajoutez-y le code suivant :

import { sql } from "@vercel/postgres";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  try {
    const result =
      await sql`CREATE TABLE Pets ( Name varchar(255), Owner varchar(255) );`;
    return NextResponse.json({ result }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }
}

Cela crée une route API. Lorsqu’il est visité, il ajoute une table Pets dans la base de données.

Visitez cet itinéraire dans votre navigateur en utilisant http://localhost:3000/api/test et voyez la réponse ci-dessous. Cela indique que la table a été créée avec succès.

Le tableau que vous avez créé sera instantanément visible sur le tableau de bord Vercel. Pour l’afficher, accédez à la page du tableau de bord, cliquez sur « Données » dans la barre latérale, puis sélectionnez le tableau nouvellement créé. Dans ce cas, il s’appelle « Animaux ». La table devrait être vide.

Pour ajouter des données à la table créée, créez un nouveau fichier nommé addPet/route.ts dans le app/api/ dossier et ajoutez-y ce qui suit :

import { sql } from "@vercel/postgres";
import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const petName = searchParams.get("petName");
  const ownerName = searchParams.get("ownerName");

  try {
    if (!petName || !ownerName) throw new Error("Pet and owner names required");
    await sql`INSERT INTO Pets (Name, Owner) VALUES (${petName}, ${ownerName});`;
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }

  const pets = await sql`SELECT * FROM Pets;`;
  return NextResponse.json({ pets }, { status: 200 });
}

Ici, nous avons défini une nouvelle route API qui ajoute une ligne dans le Pets tableau. Le ownerName et petName les champs sont extraits de la chaîne de requête intégrée dans l’URL. La route renvoie la table entière en réponse.

Pour voir la réponse comme indiqué ci-dessous, accédez à http://localhost:3000/api/add-pet?petName=Johnny&ownerName=Mark dans votre navigateur.

Actualisez également le tableau dans le tableau de bord pour voir les données qui ont été ajoutées.

base de données

Un peu similaire au fonctionnement de la fonction SQL, le SDK Vercel fournit également un db méthode d’assistance. qui peut être utilisé pour créer un client pour se connecter à une base de données Vercel Postgres.

Le db La méthode helper est particulièrement utile lorsque plusieurs requêtes ou transactions doivent être traitées, car elle maintient la connexion, contrairement à l’assistant SQL qui se connectera pour chaque requête.

Voici un exemple d’extrait de code illustrant son fonctionnement :

import { db } from "@vercel/postgres";

const client = await db.connect();
await client.sql`SELECT 1`;

Ici, nous pouvons voir comment créer une instance client et appeler le sql méthode dessus pour les requêtes SQL ultérieures.

créerClient()

Le createClient() La fonction nous permet de créer, connecter et déconnecter des connexions pour des clients individuels pour chaque requête. Cependant, cette approche n’est pas aussi efficace que les précédentes et ne doit être utilisée que lorsqu’un seul client est nécessaire.

Ce qui suit est un exemple d’extrait de code montrant comment utiliser le createClient() méthode:

import { createClient } from "@vercel/postgres";

async function queryPosts() {
  const client = createClient();
  await client.connect();

  try {
    const likes = 100;
    const { rows, fields } =
      await client.sql`SELECT * FROM posts WHERE likes > ${likes};`;
  } finally {
    await client.end();
  }
}

Utilisation de l’un des ORM pris en charge

Nous pouvons éviter le stress lié à l’écriture directe de requêtes SQL complexes et nous appuyer uniquement sur un ORM. Les ORM sont des abstractions qui simplifient l’accès et la manipulation des données pour les développeurs. Il permet d’interagir avec une base de données en utilisant la syntaxe familière de votre langage de programmation.

Vercel Postgres prend en charge les ORM comme Kysely, Drizzle et Prisma. Jetons un coup d’œil à l’intégration Prisma ORM.

Pour utiliser Vercel Postgres avec Prisma, nous devons commencer par installer la CLI Prisma et le client Prisma. Exécutez les commandes suivantes dans votre terminal :

npm i prisma @prisma/client

Ensuite, exécutez la commande ci-dessous pour initialiser un nouveau projet Prisma dans votre répertoire de travail actuel :

npx prisma init

Cette commande crée un nouveau prisma dossier au niveau racine de l’application. Ce dossier contient un schema.prisma fichier, qui contient la configuration de base de Prisma.

Ensuite, vous pouvez utiliser les variables d’environnement dans le schema.prisma fichier comme indiqué ci-dessous :

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  
  url = env("POSTGRES_PRISMA_URL")
  
  
  directUrl = env("POSTGRES_URL_NON_POOLING")
}

model User {
  id        Int      @id @default(autoincrement())
  name      String
  email     String   @unique
  image     String
  createdAt DateTime @default(now())
}

Le code ci-dessus configure l’ORM Prisma et définit également un User modèle. Cet article fournit uniquement un aperçu de la façon d’utiliser l’ORM et ne plongera pas dans la syntaxe de Prisma. Vous pouvez en savoir plus sur le fonctionnement de Prisma à partir du documentation officielle.

Ensuite, exécutez la commande ci-dessous pour synchroniser le modèle défini dans le schema.prisma fichier avec une base de données Vercel Postgres :

npx prisma db push

Exécutez également la commande ci-dessous pour générer les types :

npx prisma generate

Enfin, nous pouvons utiliser @prisma/client pour interroger la base de données Vercel Postgres comme indiqué ci-dessous :

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default async function prismaExample() {
  const newUser = await prisma.user.create({
    data: {
      name: "Jamie",
      email: "jamieadam@gmail.com",
    },
  });

  const users = await prisma.user.findMany();
}

L’extrait de code ci-dessus montre comment Prisma ORM nous permet d’interagir avec la base de données sans écrire directement de requêtes SQL, ce qui constitue une approche plus intuitive.

Conclusion

Cet article fournit une introduction complète à Vercel Postgres, y compris les étapes détaillées de configuration de la base de données. Il fournit également un aperçu de la manière d’interagir avec la base de données à l’aide du SDK ou d’un ORM.