Trabalhando com Remix e Prisma: Uma Introdução à Camada de Dados

Neste tutorial, vamos aprender como trabalhar com a camada de dados na aplicação Remix utilizando a biblioteca Prisma como ORM (Object Relational Mapping) e SQLite como banco de dados.

Estrutura do projeto

Crie um projeto Remix e escolha o servidor Remix de desenvolvimento. Trata-se da opção mais simples.

No momento, não temos a pasta prisma nem o arquivo .env. Não se preocupe, pois ambos serão criados pelo Prisma CLI.

Instalação e configuração do Prisma

Primeiro, utilizaremos o Prisma CLI sem que seja necessário instala-lo em nossa máquina. No terminal, digite:

npx prisma init

Após a execução, teremos a pasta prisma e o arquivo .env. Vamos configurar nossa conexão com o banco de dados no arquivo .env. Vamos utilizar o SQLite nesse tutorial. Para isso, substitua a linha DATABASE_URL existente no arquivo .env por:

DATABASE_URL="file:./prisma/dev.db"

Isso instruirá o Prisma a criar o arquivo dev.db dentro da pasta prisma. Agora, vamos verificar o arquivo schema.prisma:

datasource db {
  provider = "sqlite" # < modifique o provider
  url      = env("DATABASE_URL")
}

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

model User {
  id    Int    @id @default(autoincrement())
  email String @unique
  name  String?
}

Aqui, temos o esquema para a tabela User, que possui um campo id, email e name. O ponto de interrogação indica um valor opcional.

Para criar essa tabela no banco de dados, vamos executar o seguinte comando no terminal:

npx prisma db push

Agora, nosso banco de dados SQLite está pronto. Para visualizar e interagir com esse banco de dados, vamos utilizar o Prisma Studio:

npx prisma studio

Acesse o endereço localhost:5555 no navegador, e você verá o Prisma Studio, onde pode visualizar, adicionar e remover registros da tabela User.

Integração do Prisma com o Remix

Vamos criar um loader e um componente React para exibir os dados do banco de dados na aplicação Remix. Primeiramente, vamos criar uma instância do Prisma Client para utilizar a API gerada pelo Prisma.

Crie um novo arquivo chamado db.server.ts e adicione o seguinte código:

// @ts-nocheck
import { PrismaClient } from "@prisma/client";

let db: PrismaClient;

declare global {
  let __db: PrismaClient | undefined;
}

// this is needed because in development we don't want to restart
// the server with every change, but we want to make sure we don't
// create a new connection to the DB with every change either.
if (process.env.NODE_ENV === "production") {
  db = new PrismaClient();
  db.$connect();
} else {
  if (!global.__db) {
    global.__db = new PrismaClient();
    global.__db.$connect();
  }
  db = global.__db;
}

export { db };

Aqui, estamos verificando se estamos em um ambiente de produção para criar uma nova instância do Prisma Client. Caso contrário, estamos criando uma instância global para evitar a criação de várias conexões durante o desenvolvimento.

Agora, podemos criar nosso loader e componente React que utiliza os dados do banco de dados. Vamos fazer isso no arquivo da rota que estamos trabalhando. Adicione o seguinte código:

import { json } from "@remix-run/data";
import { useLoaderData } from "@remix-run/react";
import { db } from "../db.server";
import type { Prisma } from "@prisma/client";

export const loader = async () => {
  const users = await db.user.findMany();
  return json({ users });
};

export default function Users() {
  const users = useLoaderData<typeof loaderr>();

  return (
    <>
      <h1>Conexão com DB</h1>
      {JSON.stringify(users, null, 2)}
    </>
  );
}

Aqui, no loader, estamos consultando todos os registros da tabela User, e passando-os para o componente React utilizando useLoaderData. No componente, estamos exibindo os dados obtidos.

Ao salvar o arquivo e atualizar o navegador, você verá os registros do banco de dados na tela.

Adicionando seed de dados com Faker

É comum criar uma massa de dados inicial para trabalhar com dados reais durante o desenvolvimento. Vamos criar um script para fazer isso com a ajuda da biblioteca FakerJS.

Primeiro, instale as dependências necessárias:

yarn add -D @faker-js/faker ts-node

Agora, crie um novo arquivo chamado seed.ts na pasta prisma e adicione o seguinte código:

import { faker } from "@faker-js/faker";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function seed() {
  await prisma.user.deleteMany();

  const quantity = 3;

  Array.from(Array(quantity).keys()).forEach(async () => {
    await prisma.user.create({
      data: {
        name: `${faker.name.firstName()} ${faker.name.lastName()}`,
        email: faker.internet.email(),
        city: faker.address.city(),
        state: faker.address.state(),
      },
    });
  });
}

seed().finally(() => prisma.$disconnect());

Neste script, estamos criando uma função assíncrona seed que primeiro limpa a tabela User, e em seguida, cria registros de usuários fictícios com a biblioteca Faker.

Para executar esse script, precisamos adicionar um comando em nosso arquivo package.json:

// package.json
{
  ...
  "scripts": {
    "db:seed": "prisma db seed",
    "db:push": "prisma db push"
  },
  "prisma": {
    "seed": "ts-node prisma/seed.ts"
  }
  ...
}

Agora, podemos executar nosso script de seed com o comando:

yarn db:seed

Ao atualizar o navegador, você verá os registros gerados pelo script de seed.

Conclusão

Neste tutorial, aprendemos como trabalhar com a camada de dados no Remix utilizando o Prisma como ORM e SQLite como banco de dados. Criamos desde a configuração do banco de dados, visualização e manipulação das tabelas no Prisma Studio até integrar essas informações em um componente React, tudo isso de maneira simples e direta ao ponto.