@repo/gql-typedefs
The @repo/gql-typedefs package contains the GraphQL type definitions (schemas) shared across the backend and frontend applications. These definitions serve as the single source of truth for the GraphQL API schema.
Local Development
When modifying GraphQL schemas, you need to regenerate types in both the backend and frontend. This can be done with a single command:
npx turbo run generate
Structure
packages/gql-typedefs/
├── index.ts # Package entrypoint (re-exports all typedefs)
├── common.ts # Common types (scalars, enums)
├── course.ts # Course-related types
├── class.ts # Class-related types
├── section.ts # Section types
├── term.ts # Term types
├── user.ts # User types
├── rating.ts # Rating types
├── enrollment.ts # Enrollment types
├── grade-distribution.ts # Grade distribution types
├── schedule.ts # Schedule types
├── plan.ts # Academic plan types
├── collection.ts # Collection types
├── catalog.ts # Course catalog types
├── analytics.ts # Analytics types
└── ...
Usage
The type definitions are written using the gql template literal tag:
// packages/gql-typedefs/course.ts
import { gql } from "graphql-tag";
export const courseTypeDefs = gql`
type Course {
courseId: CourseIdentifier!
subject: String!
number: CourseNumber!
title: String!
description: String
units: Float
gradeDistribution: GradeDistribution
}
type Query {
course(subject: String!, number: CourseNumber!): Course
courses: [Course!]!
}
`;
How It Works
- Schema Definition: Type definitions are written in GraphQL SDL format
- Frontend Codegen: The frontend's
codegen.tsreads these schemas and generates TypeScript types for queries - Backend Codegen: The backend's
codegen.tsgenerates resolver types from these schemas
┌─────────────────────┐
│ @repo/gql-typedefs │
│ (GraphQL SDL) │
└──────────┬──────────┘
│
┌─────┴─────┐
▼ ▼
┌─────────┐ ┌─────────┐
│ Backend │ │Frontend │
│ codegen │ │ codegen │
└────┬────┘ └────┬────┘
▼ ▼
┌─────────┐ ┌─────────┐
│Resolver │ │ Query │
│ Types │ │ Types │
└─────────┘ └─────────┘
Adding New Types
- Create or modify a type definition file in
packages/gql-typedefs/ - Export it from
index.tsif it's a new file - Run codegen in both backend and frontend
- Implement the resolver in the backend
- Use the generated types in the frontend
tip
Keep related types together in the same file. For example, all enrollment-related types should be in enrollment.ts.