Next.js TypeScript Prisma GraphQL quality control template

• Tools included
• App startup
  • SQLite
  • Postgres
• Using Prisma
  • Adding a table to your database
  • Creating migrations
  • Seeding sample data
  • Using prisma client to perform database actions
• Using GraphQL
  • GraphQL Playground
• Scripts
  • generate-types
  • watch-queries
  • generate
  • migrate
  • deploy
  • reset
  • seed
  • studio
  • prisma
  • build
  • dev
  • format
  • lint
  • start
  • test
  • type-check
  • quality
• Accessibility
  • @axe-core/react

Tools included

• Next.js
• TypeScript
• GraphQL
  • Apollo
    • Micro Server
    • React Client
  • TypeGraphQL
    • TypeGraphQL-Prisma automatic CRUD plugin
  • GraphQL code generator
• Prisma
  • Entity Relationship Diagram auto-generator
• Material-UI
• React Hook Form
• Quality tools
  • ESLint
  • Prettier
  • Jest
  • @testing-library/react

App startup

Choose how to start your development server based on your database configuration below.

SQLite

First time starting your app make sure to run prisma then start your app.

npm run prisma && npm run dev

Postgres

Ensure you have a .env file with a DATABASE_URL variable following the format required by prisma and using the credentials found in your docker-compose.yml file.

DATABASE_URL=postgresql://[POSTGRES_USER]:[POSTGRES_PASSWORD]@[POSTGRES_HOST]:[PORT]?schema=public

Start up your development server with the following command:

docker-compose up

Once your development server is up and running, in a new terminal run the following command:

 npm run prisma && npm run dev

npm run prisma will do a few things for us:

• Format your prisma/schema.prisma file (prisma format) | prisma format documentation
• Keeps your prisma/schema.prisma file in sync with your database by auto generating migrations when needed (npm run migrate) | prisma migration documentation
• Seed your database with (npm run seed) | prisma seeding documentation

Using Prisma

Prisma helps app developers build faster and make fewer errors with an open source ORM for PostgreSQL, MySQL and SQLite. | Source

Adding a table to your database

Adding a table is as easy as adding a model to your schema.prisma file, followed by creating a migration. For a tutorial on this visit the prisma schema documentation.

Creating migrations

Once you've made the appropriate changes to your schema.prisma file you can auto generate a migration using

npm run migrate

This will generate a new folder under prisma/migrations with a SQL file outlining the changes to be reflected to your database and also generate new TypeScript code for prisma client usage.

To learn more visit the prisma migration documentation or the prisma generate documentation.

Seeding sample data

To seed your database, using prisma client, add in sample data in the prisma/seed.ts file.

To learn more visit the prisma seeding documentation.

Using prisma client to perform database actions

Using the prisma client you can do the various actions required to build applications utilizing a database.

To learn more visit working with the prisma client.

Using GraphQL

GraphQL helps developer experience by providing tools to interact with data sources given a query language. | Source

GraphQL Playground

The GraphQL playground is where you can test out and write queries and mutations before consuming these requests in the client code. To view the playground, while your server is running, visit http://localhost:3000/api/graphql.

Along the right you will see tabs, Docs and Schema. This is equivalent to REST's Swagger API that explains all of its endpoints a developer can call. The only difference here is graphql is a universal query language giving you the developer the ability to query as much or as little as needed. So view the Docs to see what you can query.

here is an example query

{
    tools {
        id
        name
        description
    }
}

Scripts

All scripts can be run by prefixing with npm run, for example npm run build

generate-types

Using graphql code generator this generates types based on the codegen.yml configuration. In the initial setup this will update files under the gen/ directory.

npm run generate-types

watch-queries

Using graphql code generator this command listens for changes based on the documents key in the codegen.yml file, and generates types.

npm run watch-queries

generate

See the prisma generate documentation.

npm run generate

migrate

See the prisma migration documentation.

npm run migrate

deploy

To apply pending migrations to development, staging, or testing environments, run the migrate deploy command as part of your CI/CD pipeline | Source.

npm run deploy

reset

When you want to reset your database to a clean slate, this clears all migrations and re-runs the migration list, then seeds the database. For more visit prisma migrate reset.

npm run reset

seed

Runs the prisma/seed.ts script to seed your database. See the prisma seeding documentation.

npm run seed

studio

Allows you to interact with and manage your data interactively. For more visit prisma studio.

npm run studio

prisma

An aggregate command used to format your schema file, check for differences from schema to db, generate a prisma client, and seed your database.

npm run prisma

build

Builds the production application in the .next folder.

npm run build

dev

Starts the application in development mode with hot-code reloading, error reporting, and more:

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

npm run dev -p 4000

format

Runs ESLint and Prettier auto-formatting.

npm run format

lint

Runs ESLint static code analysis based on your .eslintrc configuration

npm run lint

start

Starts the application in production mode. The application should be compiled with npm run build first.

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

npm run start -p 4000

test

Runs Jest unit tests to validate changes between commits

npm run test

type-check

Runs TypeScript compiler to validate there are no type errors between commits

npm run type-check

quality

Runs type-check, lint, and test to make an better developer experience catching preventable quality errors.

npm run quality

Accessibility

@axe-core/react

Runs in development environment and logs accessibility error results in dev tools console. Tool implementation is in pages/_app.tsx.