Building a Type-Safe Wishlist App with Next.js, Prisma, and GraphQL

Why Choose Next.js, Prisma, and GraphQL?

In modern web development, the tools you choose can make all the difference in the user experience. We’ve selected Next.js, Prisma, and GraphQL for their unique strengths.

Next.js is a versatile React framework that simplifies development while enhancing applications with powerful features like server-side rendering and static site generation. Prisma serves as an advanced ORM tool, streamlining database management with its type-safe query builder. GraphQL, a contemporary query language and runtime, allows users to specify exactly the data they need, ensuring efficient data retrieval.

Getting Started with Next.js

To begin, navigate to your working directory and initialize Next.js by running the command:

npx create-next-app my-app

Then, open the new app in your editor of choice and install the required dependencies, including:

• prisma
• @genql/cli
• nodemon

Setting Up the Prisma Database

Next, set up Prisma to connect your app to a database. Run the command:

npx prisma init

This will create a new .env file and a prisma folder at the root of your project. Update the .env file with a valid connection string pointing to your database.

Defining Custom GraphQL Object Types

Now, let’s define custom GraphQL object types and an enumeration type to enhance the functionality and structure of our GraphQL API. We’ll create a custom DateTime scalar from the graph-scalars library and define an Item object type with fields that map to the properties in our database.

scalar DateTime

enum ItemType {
  BOOK
  MOVIE
  GAME
}

type Item {
  id: ID!
  title: String!
  description: String
  type: ItemType!
}

Generating GraphQL Types

With our GraphQL API foundation in place, let’s generate the necessary GraphQL types and schema files. Run the commands:

npm run generate:nexus

npm run generate:genql

Interacting with the Frontend

Now that we’ve set up our API, let’s interact with it from the frontend of our application. We’ll use SWR to handle data fetching to the API and genql to execute requests that specify which arguments and fields should be returned.

import { useSWR } from 'wr';
import { genql } from '@genql/react';

const fetcher = (...args) => genql('/api/graphql', args);

function Wishlist() {
  const { data, error } = useSWR('/api/graphql', fetcher);

  if (error) return

;
  if (!data) return

;

  return (

{data.items.map((item) => (
• {item.title}

))}

  );
}

Best Practices for Type Safety

Type safety is crucial for ensuring consistent and error-free code. To optimize your development:

1. Get strict with types
2. Transition slowly when integrating type safety into an existing project
3. Play with generics
4. Resist the temptation to use any in TypeScript
5. Rely on Prisma for efficient and secure database queries

By following this tutorial, you’ve built an end-to-end, type-safe, full-stack application using Next.js, Prisma, and GraphQL. This approach can reduce errors caused by using inconsistent types. Happy coding!