feat: Switch to typed GraphQL documents instead of older Apollo generator #594

kingston · 2025-07-07T21:19:44Z

Summary by CodeRabbit

Refactor
- Updated GraphQL integration to use typed document nodes and Apollo Client's generic hooks for queries and mutations, replacing previously generated React Apollo hooks.
- Migrated GraphQL code generation configuration from YAML to TypeScript for improved type safety and maintainability.
- Updated package dependencies to support the new typed document node approach.
Chores
- Improved internal code structure and configuration management for GraphQL and TypeScript integration.

…ator

vercel · 2025-07-07T21:19:46Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
baseplate-project-builder-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 8, 2025 6:53am

changeset-bot · 2025-07-07T21:19:48Z

🦋 Changeset detected

Latest commit: aa2a8ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 17 packages

Name	Type
@baseplate-dev/react-generators	Patch
@baseplate-dev/plugin-storage	Patch
@baseplate-dev/plugin-auth	Patch
@baseplate-dev/project-builder-server	Patch
@baseplate-dev/project-builder-common	Patch
@baseplate-dev/project-builder-cli	Patch
@baseplate-dev/project-builder-test	Patch
@baseplate-dev/project-builder-web	Patch
@baseplate-dev/code-morph	Patch
@baseplate-dev/core-generators	Patch
@baseplate-dev/create-project	Patch
@baseplate-dev/fastify-generators	Patch
@baseplate-dev/project-builder-lib	Patch
@baseplate-dev/sync	Patch
@baseplate-dev/tools	Patch
@baseplate-dev/ui-components	Patch
@baseplate-dev/utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2025-07-07T21:19:50Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (12)

tests/simple/packages/web/baseplate/file-id-map.json is excluded by !tests/**
tests/simple/packages/web/baseplate/generated/codegen.ts is excluded by !**/generated/**, !tests/**, !**/generated/**
tests/simple/packages/web/baseplate/generated/codegen.yml is excluded by !**/generated/**, !tests/**, !**/generated/**
tests/simple/packages/web/baseplate/generated/package.json is excluded by !**/generated/**, !tests/**, !**/generated/**
tests/simple/packages/web/baseplate/generated/tsconfig.node.json is excluded by !**/generated/**, !tests/**, !**/generated/**
tests/simple/packages/web/codegen.ts is excluded by !tests/**
tests/simple/packages/web/codegen.yml is excluded by !tests/**
tests/simple/packages/web/package.json is excluded by !tests/**
tests/simple/packages/web/src/generated/graphql.tsx is excluded by !**/generated/**, !tests/**, !**/generated/**
tests/simple/packages/web/src/routes/index.tsx is excluded by !tests/**
tests/simple/packages/web/tsconfig.node.json is excluded by !tests/**
tests/simple/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml, !tests/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This change updates several packages and code generation workflows to switch from using Apollo-generated React hooks to a typed GraphQL documents approach. It replaces YAML-based GraphQL codegen configuration with TypeScript, updates dependencies, and modifies React code to use generic Apollo Client hooks (useQuery, useMutation) with explicit document references instead of generated hooks.

Changes

File(s) / Group	Change Summary
`.changeset/bright-parrots-watch.md`	Documents the switch from Apollo React hooks to typed GraphQL documents in three packages.
`packages/react-generators/src/constants/react-packages.ts`	Updates GraphQL codegen package versions, removes `typescript-react-apollo`, adds `typed-document-node` and related dependencies.
`packages/react-generators/src/generators/admin/admin-crud-queries/admin-crud-queries.generator.ts`	Renames `hookExpression` to `documentExpression` in interface and usage, updates to use document names instead of hook names.
`packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts`	Switches template variables and generated code to use GraphQL document expressions and generic Apollo hooks.
`packages/react-generators/src/generators/admin/admin-crud-edit/templates/create.tsx`	Changes mutation setup to use `useMutation` with document node, adds import.
`packages/react-generators/src/generators/admin/admin-crud-edit/templates/edit.tsx`	Updates mutation hook instantiation to use `useMutation` with document node, adds import.
`packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts`	Changes list query and delete mutation usage to use document expressions and generic Apollo hooks.
`packages/react-generators/src/generators/admin/admin-crud-list/templates/index.tsx`	Updates delete mutation to use `useMutation` with document node and adds refetch logic, adds import.
`packages/react-generators/src/generators/admin/_utils/foreign-data-dependency.ts`	Replaces generated query hook with generic `useQuery` and explicit document reference.
`packages/react-generators/src/generators/admin/admin-bull-board/templates/routes/bull-board/index.tsx`	Replaces generated mutation hook with `useMutation` using document node.
`packages/react-generators/src/generators/apollo/react-apollo/extractor.json`	Switches codegen template from YAML to TypeScript, updates template metadata and variables, adds provider and export info.
`packages/react-generators/src/generators/apollo/react-apollo/react-apollo.generator.ts`	Updates to TypeScript-based codegen config, adds TypeScript provider, updates dependencies, modifies build and post-write logic.
`packages/react-generators/src/generators/apollo/react-apollo/templates/package/codegen.ts`	Adds new TypeScript codegen config file exporting `CodegenConfig` object.
`packages/react-generators/src/generators/apollo/react-apollo/templates/package/codegen.yml`	Removes YAML codegen config file.
`packages/react-generators/src/generators/core/react-typescript/react-typescript.generator.ts`	Adds `ReactTypescriptProvider` interface and provider, enables dynamic inclusion of Node TypeScript files in `tsconfig-node.json`.
`plugins/plugin-auth/src/auth0/generators/react/auth0-hooks/templates/src/hooks/use-current-user.ts`	Replaces generated query hook with `useQuery` and document node, updates imports.
`plugins/plugin-storage/src/generators/react/upload-components/templates/src/components/file-input/file-input.tsx`	Switches from generated mutation hook to `useMutation` with document node, updates imports.

Sequence Diagram(s)

sequenceDiagram
    participant ReactComponent
    participant ApolloClient
    participant GraphQLServer

    ReactComponent->>ApolloClient: useQuery(DocumentNode, variables)
    ApolloClient->>GraphQLServer: Send GraphQL query
    GraphQLServer-->>ApolloClient: Respond with data
    ApolloClient-->>ReactComponent: Provide data/error via hook

    ReactComponent->>ApolloClient: useMutation(DocumentNode, variables)
    ApolloClient->>GraphQLServer: Send GraphQL mutation
    GraphQLServer-->>ApolloClient: Respond with mutation result
    ApolloClient-->>ReactComponent: Provide result/error via hook

sequenceDiagram
    participant Dev
    participant Codegen
    participant TypeScriptConfig

    Dev->>Codegen: Run codegen with codegen.ts config
    Codegen->>TypeScriptConfig: Read schema, documents, plugins from codegen.ts
    Codegen->>Dev: Output generated TypeScript types and documents

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🔭 Outside diff range comments (1)

plugins/plugin-storage/src/generators/react/upload-components/templates/src/components/file-input/file-input.tsx (1)
132-263: Add CSS class prefixing for plugin components.

According to the coding guidelines, plugin components must prefix all CSS classes with the plugin name (storage-) to avoid style conflicts. The current implementation uses unprefixed classes like max-w-md, flex, h-12, etc.

Consider implementing a utility function to automatically prefix classes:
+const storageClass = (className: string) => className.split(' ').map(c => `storage-${c}`).join(' ');

// Then use it throughout the component:
-    <div className={cn('max-w-md', className)}>
+    <div className={cn(storageClass('max-w-md'), className)}>
Or use the cn() utility with prefixed classes:
-      className={cn('max-w-md', className)}
+      className={cn('storage-max-w-md', className)}

🧹 Nitpick comments (1)

packages/react-generators/src/generators/apollo/react-apollo/extractor.json (1)
15-17: Drop redundant importMapProviders to keep the template definition minimal

importMapProviders is left as an empty object. The template extractor already auto-infers providers when none are required, so the empty entry only adds noise.
-      "importMapProviders": {},

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between de9e1b4 and 0536012.

⛔ Files ignored due to path filters (4)

packages/react-generators/src/generators/apollo/react-apollo/generated/template-paths.ts is excluded by !**/generated/**, !**/generated/**
packages/react-generators/src/generators/apollo/react-apollo/generated/template-renderers.ts is excluded by !**/generated/**, !**/generated/**
packages/react-generators/src/generators/apollo/react-apollo/generated/ts-import-providers.ts is excluded by !**/generated/**, !**/generated/**
packages/react-generators/src/generators/apollo/react-apollo/generated/typed-templates.ts is excluded by !**/generated/**, !**/generated/**

📒 Files selected for processing (17)

.changeset/bright-parrots-watch.md (1 hunks)
packages/react-generators/src/constants/react-packages.ts (1 hunks)
packages/react-generators/src/generators/admin/_utils/foreign-data-dependency.ts (1 hunks)
packages/react-generators/src/generators/admin/admin-bull-board/templates/routes/bull-board/index.tsx (2 hunks)
packages/react-generators/src/generators/admin/admin-crud-edit/admin-crud-edit.generator.ts (4 hunks)
packages/react-generators/src/generators/admin/admin-crud-edit/templates/create.tsx (2 hunks)
packages/react-generators/src/generators/admin/admin-crud-edit/templates/edit.tsx (2 hunks)
packages/react-generators/src/generators/admin/admin-crud-list/admin-crud-list.generator.ts (2 hunks)
packages/react-generators/src/generators/admin/admin-crud-list/templates/index.tsx (2 hunks)
packages/react-generators/src/generators/admin/admin-crud-queries/admin-crud-queries.generator.ts (3 hunks)
packages/react-generators/src/generators/apollo/react-apollo/extractor.json (1 hunks)
packages/react-generators/src/generators/apollo/react-apollo/react-apollo.generator.ts (5 hunks)
packages/react-generators/src/generators/apollo/react-apollo/templates/package/codegen.ts (1 hunks)
packages/react-generators/src/generators/apollo/react-apollo/templates/package/codegen.yml (0 hunks)
packages/react-generators/src/generators/core/react-typescript/react-typescript.generator.ts (4 hunks)
plugins/plugin-auth/src/auth0/generators/react/auth0-hooks/templates/src/hooks/use-current-user.ts (2 hunks)
plugins/plugin-storage/src/generators/react/upload-components/templates/src/components/file-input/file-input.tsx (2 hunks)

💤 Files with no reviewable changes (1)

packages/react-generators/src/generators/apollo/react-apollo/templates/package/codegen.yml

🧰 Additional context used

📓 Path-based instructions (8)

`**/*.{ts,tsx}`: TypeScript with strict type checking Node 16 module resolution ...

**/*.{ts,tsx}: TypeScript with strict type checking
Node 16 module resolution - include file extensions in imports (.js)
Sort imports by group: external libs first, then local imports
Use camelCase for variables/functions, PascalCase for types/classes
Always include return types on top-level functions including React components (React.ReactElement)
Include absolute paths in import statements via tsconfig paths (@src/ is the alias for src/)
Order functions such that functions are placed below the variables/functions they use
If a particular interface or type is not exported, change the file so it is exported
Prefer using nullish coalescing operator (??) instead of logical or (||)
Use console.info/warn/error instead of console.log
Always use .js extensions in imports, even for TypeScript files
Specify explicit return types on all functions

📄 Source: CodeRabbit Inference Engine (CLAUDE.md)