codegen-example

This repo is a demo of how easily you can get up and running with GraphQL and types using code generation.

Setup

• Create a postgres database and update .env with the new DATABASE_URl

Start the API

yarn
yarn start

Start the webapp:

cd web
yarn
yarn start

About

This repo contains

• Prisma as database ORM (types are autogenerated from DB)
• An Apollo GraphQL server with graphiQL (run with yarn start, then open localhost:4000)
• A NextJS webapp consuming the API (hooks are autogenerated from API)

To demo this, you have to:

1. Create a Postgres DB locally (set DB_URL in .env file)
2. Write a DB schema (Change or replace in schema.prisma)
3. Write a GraphQL schema (Change or replace in schema.graphql)

Generate db migrations and prisma types

The API uses Prisma as a database ORM. Prisma inspects the postgres database and generates migrations and typescript types for the database.

Try to update schema.prisma, then generate any migrations and update prisma types by running yarn generate in the root folder

Generate GraphQL hooks

This repository uses Code Generator to generate React hooks for Apollo Client.

Generate the hooks by running yarn generate in the web folder.

Try to update schema.graphql by removing the name field, then generate types again. Notice how Typescript will complain in this file automatically that name is not defined on the return values.

Apollo Server

The API uses Apollo server for serving the GraphQL API

NextJS

This page uses NextJS as a frontend framework.

GraphQL Client

This page uses Apollo Client to interact with the GraphQL API.

Even though the server is Apollo Server, you can use other GraphQL clients such as React Query or GraphQL request.

There are code-generators for each of these and others.

Instant API: Postgraphile

If setting up the API is too much hassle, there is also Postgraphile.

Try it now, by stopping your server, then running npx postgraphile -c my_database_name --watch

No-code: Hasura

Push your API to production without coding at all using Hasura.