keonik / ts-gql-prisma-codegen Goto Github PK

****# GraphQL Yoga CodeGen starter template

Type-safe Node.js API in the GraphQL specification.

• GraphQL Yoga

  The fully-featured GraphQL Server with focus on easy setup, performance and great developer experience.

• GraphQL CodeGen

  Generate code from your GraphQL schema and operations with a simple CLI

• Prisma

  Next-generation Node.js and TypeScript ORM

• Example Queries, Mutations, and even Subscriptions using the server sent events(SSE) protocol Documentation - For more on server sent events vs. web sockets refer to SSE vs. WS in the Guild Yoga Server documentation

• Node.js >=16

1. Clone repository

# ssh (recommended)
git clone [email protected]:keonik/ts-gql-prisma-codegen.git

#https
https://github.com/keonik/ts-gql-prisma-codegen.git

2. Move into repository

cd ts-gql-prisma-codegen

3. Create a .env file to choose your hosting port and database connection. Feel free to copy below if you don't intend on changing ports and database names

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="file:./dev.db"
APP_PORT=4040

4. Install project dependencies

# npm
npm install
# yarn
rm package-lock.json
yarn
# pnpm
rm package-lock.json
pnpm install

5. Apply database migrations

npm run migrate

6. Seed database

npm run seed:dev

7. Start development server

npm run dev

This template makes assumptions that you know how to leverage tools like prisma and graphQL codegen but in case you don't have that background, here is a high-level descriptions of the back and forth it takes to enjoy a type-safe end to end development experience.

The src/graphql/codegen.ts file is the starting point for all changes. If you view this file you will see something similar to this

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "schema.graphql",
  generates: {
    "./src/gen/types/resolvers-types.ts": {
      config: {
        useIndexSignature: true,
      },
      plugins: ["typescript", "typescript-resolvers"],
    },
  },
  config: {
    ...
  },
};
export default config;

Take a look above. The important pieces to this configuration is the schema and the generates keys. The schema located at schema.graphql is the initial definition that tells this codegen cli what to generate. So when you want to add, edit, or delete resolver typescript definitions you will add it to that file, or create a new schema if you'd like.

If you are running in development mode, codegen will recognize a change was made and run the script below to regenerate expected types for type safety. If not in development mode, once you have made an update to your schema.graphql file, you can run the cli

npm run codegen

If you have successfully generated your resolver types you should see the following

✔ Parse Configuration
✔ Parse Configuration
✔ Generate outputs

Since all of this is hooked up already, you can skip straight to the resolvers you will be writing and update types to match inputs and outputs to make TypeScript happy. This is located in ./src/graphql/schema.ts and should show you TypeScript related errors telling you to match the expected changes you made to your .graphql schema.

Prisma is the tool for success here. If you take a look at ./prisma/schema.prisma you will see something like this

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

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id       Int       @id @default(autoincrement())
  email    String    @unique
  name     String?
  rooms    Room[]
  messages Message[] @ignore
}

If you need help understanding how to change these models please refer to prisma documentation directly, as they have amazing documentation to help you get work done with amazing developer experience.

Now if you have made a change here, you haven't quite made the change to your TypeScript definitions or even your database. So lets explain how to update those needed areas.

In order for your IDE to recognize your new models or model changes, you need to regenerate your prisma client aka your TypeScript definitions. To do so, we have added a script for quick reference, you could also run this with globally installing Prisma.

# script included
npm run generate
# global dependency of prisma
prisma generate

Once that is done and successful you should now see your model changes reflected when you leverage them in your IDE.

You need a migration to reflect the updates made to your prisma/schema.prisma file. To run this you can run either of the commands below.

# script included
npm run migrate
# global dependency of prisma
prisma migrate dev

Assuming success, you should have a new directory and .sql file under the ./prisma/migrations directory that has been made and applied to your database.

If you've run into issues please refer to prisma documentation on potential error codes

npm run build

node ./dist/src/index.js

In production, you will need to apply migrations and, if desired, seed your database. To do so, you can run the following commands.

# apply migrations
prisma migrate deploy
# seed database
npm run seed:prod