Overview

Graphlatte is a Next.js template that combines various technologies such as GraphQL, Urql, Prisma, Nexus, and Tailwind to provide a comprehensive development stack. It offers features like GraphQL Helix for handling requests, Nexus with Prisma for GraphQL schema generation, and GraphQL Codegen for typed document nodes. It also includes Tailwind with a base configuration and a Tailwind Prettier Plugin for styling. The template comes with a base docker-compose file for running a local Postgres database and offers on-save code generation with a VSCode plugin. It integrates easily with Next.js’s built-in ESLint and provides easy global typing with a definitions.d.ts file. Additionally, it includes features for authentication and session handling using iron-session.

Features

• GraphQL Helix: for handling requests
• Nexus with Prisma (nexus-prisma): for GraphQL schema generation
• GraphQL Codegen: for generating typed document nodes
• Tailwind: with a base configuration and Tailwind Prettier Plugin
• Docker Compose: for running a local Postgres database
• On-save Code generation: with VSCode plugin Save and Run
• Next.js built-in ESLint integration: for easy linting setup
• Easy global typing: with definitions.d.ts file (e.g. typing .env)
• Authentication/session handling: using iron-session

Installation

There are two main options to create a new project with Graphlatte:

1. Use this template directly on GitHub by visiting the Graphlatte repository and clicking on the “Use this template” button to create a new repository based on the template.

2. Clone the repository using git and follow the steps below:

   git clone <repository-url>
   

   Once cloned, navigate to the project directory and run the following commands:

   # Install dependencies
   yarn
   
   # Generate code and run
   yarn dev
   

   Graphlatte comes with a base docker-compose file for running a local Postgres database. Please ensure that Docker is installed and running on your machine. The data between Docker restarts is saved in the ./docker/postgres folder, which can be changed in the Compose file.

   You can also use a tool like Concurrently to run the yarn dev and docker-compose commands in one command.

   Please note that the Prisma schema gets regenerated after every yarn/npm add or yarn/npm install command.

Summary

Graphlatte is a powerful Next.js template that combines GraphQL, Urql, Prisma, Nexus, and Tailwind to provide a comprehensive development stack. It offers features like GraphQL Helix for handling requests, Nexus with Prisma for schema generation, and GraphQL Codegen for typed document nodes. The template also includes tools for styling with Tailwind, running a local Postgres database with Docker Compose, and on-save code generation with a VSCode plugin. It integrates easily with Next.js’s built-in ESLint and provides easy global typing. Graphlatte also includes features for authentication and session handling using iron-session. Overall, it provides a robust starting point for building GraphQL-based applications with Next.js.