Migrate newsfeed example to TypeScript with Grats and Vite - #345
Closed
captbaritone wants to merge 4 commits into
Closed
Migrate newsfeed example to TypeScript with Grats and Vite#345captbaritone wants to merge 4 commits into
captbaritone wants to merge 4 commits into
Conversation
Modernize the newsfeed example app: - Webpack + Babel → Vite - Raw http server + hand-written graphql-js → GraphQL Yoga + Grats - graphql v17-alpha → v16 stable - React 18 → React 19 - TypeScript 4.9 → 5.7 - ESLint legacy config → flat config (v9) - Remove DefinitelyTyped Relay shims (v21 ships its own types) - Remove GraphiQL custom playground (Yoga has built-in) - Remove future/ directory (broken tutorial stubs) - Remove committed dist/ artifacts - Add CI steps for newsfeed
Without a lockfile, yarn resolves ^0.0.0-main-4dcb3ffa to the stable v21 release which doesn't ship TypeScript types. Pin the exact version.
captbaritone
force-pushed
the
todo-upgrade
branch
from
May 22, 2026 17:59
74f2b8d to
a7bcc90
Compare
Replace @killsParentOnException with @semanticNonNull for non-spec fields by enabling Grats' strictSemanticNullability. Spec-required non-null fields (Node.id, PageInfo.hasNextPage/hasPreviousPage, Edge.cursor, Connection.pageInfo) keep @killsParentOnException. On the client side, add @throwOnFieldError to all queries and fragments so Relay generates non-null types for @semanticNonNull fields, and @catch on mutations since @throwOnFieldError doesn't support mutation definitions. Add per-todo ErrorBoundary so field errors only take down the affected todo item rather than the entire app.
captbaritone
force-pushed
the
todo-upgrade
branch
from
May 22, 2026 18:04
b270847 to
722ad9a
Compare
The class itself is the model — the private property holds the raw database row. Also removes redundant explicit type parameter on useFragment in StoryLikeButton.
Contributor
Author
|
Closing — the newsfeed example is part of a step-by-step tutorial guide, so migrating it would break the tutorial flow. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@gqlType,@gqlFieldannotations — TypeScript types are the source of truth for the schematypescript-eslint/graphqlfuture/directory: Broken tutorial stubs with unresolvable importsyarn ciruns grats, relay, tsc, lint, and vite buildThe server-side code is restructured into
data/models/(Grats-annotated types) anddata/graphql/(node/actor interfaces and connection helpers). The schema is generated from TypeScript annotations viayarn grats, andschema.graphqlis checked into the repo as a generated artifact.Test plan
cd newsfeed && yarnto install dependenciesyarn gratsgeneratesschema.graphql+schema.tswithout errorsyarn relaygenerates Relay artifacts without errorsyarn tscpasses TypeScript type checkingyarn lintpasses ESLintyarn devstarts the dev server and the app works at http://localhost:5173yarn cipasses the full CI pipeline