graphql-contract
Use when changing GraphQL schema, resolvers, or frontend GraphQL documents so the contract and codegen stay in sync.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
GraphQL contract & sync
When to use
- You modify backend GraphQL types/resolvers or the schema.
- You add or edit frontend
.graphqldocuments. - You suspect schema and generated types are out of sync.
Steps
- Backend: implement changes under
backend/src/backend/apps/**/graphql/. - Sync: run
task frontend:codegenfrom the repo root.- This runs
task backend:schema:exportto updatefrontend/schema/schema.graphql. - Then runs
pnpm codegento regenerate TypeScript types.
- This runs
- Frontend: update
frontend/src/to use the newly generated types/fragments. - Verify: run
task frontend:check.
Constraints and guardrails
- The Strawberry backend is the source of truth; do not manually edit
frontend/schema/schema.graphql. - Do not hand-write TypeScript interfaces for GraphQL results; use generated
types in
frontend/src/lib/graphql/. - Schema changes and frontend sync should be in the same change set.
- Breaking changes (removing/renaming fields,
Nullable → Non-Null, adding required args) require immediate frontend updates after codegen. - Avoid N+1 by using SQLAlchemy eager loading (
selectinload/joinedload) and moving complex logic into services.
References
-
backend/src/backend/apps/**/graphql/ -
frontend/schema/schema.graphql -
frontend/src/lib/graphql/ -
frontend/**/codegen.*
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-01-20
- Index updated
- 2026-01-26
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!