Suivant.js et GraphQL: La combinaison parfaite pour le développement complet de la viande

DEV - 01/07
Ce que vous allez apprendre Dans l'article d'aujourd'hui, nous allons créer une application pleine pile...

Ce que vous allez apprendre

Dans l'article d'aujourd'hui, nous allons créer une application de pile complète en utilisant Next.js avec GraphQL Yoga.

Qu'est-ce que cet article couvre

  • Next.js App Routeur et Actions
  • GraphQL Yoga Intégration
  • Effectuer des opérations telles que Get, Create et Delete sur la base de données

Préalables

Avant de commencer l'article, il est recommandé que vous ayez connaissance de React, Next.js et GraphQL.

Création du projet

Pour initialiser un projet dans Remix nous exécutons la commande suivante:

npx create-next-app@latest my-app
Saisissez le mode plein écran

La configuration utilisée comprend TypeScript, ESLint, Tailwind CSS et nous utilisons app routeur.

Nous commençons le serveur dev avec la commande suivante:

npm run dev
Saisissez le mode plein écran

En plus de la configuration de base, nous utilisons également la bibliothèque daisyUI pour pouvoir utiliser des composants pré-style.

npm install daisyui
Saisissez le mode plein écran

Ensuite, nous ajoutons la bibliothèque à la liste des plugins dans la tailwind.config.js fichier dans lequel nous pouvons également définir le thème que nous voulons utiliser, comme suit:

module.exports = { // ... plugins: [require("daisyui")], daisyui: { themes: ["winter"], }, };
Saisissez le mode plein écran

Avec la configuration de l'application prête, nous pouvons passer au point suivant.

Setup

Tout d'abord, nous devons configurer la connexion à notre base de données afin que nous puissions persister les données dans notre application. Pour faciliter tout le processus, nous allons utiliser un ORM, qui pour l'article j'ai décidé de choisir le Drizzle ORM. Et pour la base de données, j'ai décidé d'utiliser SQLite puisque c'est le plus accessible.

Nous commençons par installer les dépendances:

npm install drizzle-orm better-sqlite3 npm install -D drizzle-kit @types/better-sqlite3
Saisissez le mode plein écran

Puis à l'intérieur server/ dossier que nous allons créer un dossier appelé db/ qui contiendra la connexion et le schéma de base de données.

En commençant par la configuration, créons la server/db/config.ts fichier avec les éléments suivants:

import { drizzle } from "drizzle-orm/better-sqlite3"; impo...
[Courte citation de 8% de l'article original]