feat: Migrate GraphiQL frontend to standalone Vite-built React 18 package

[amcaplan]

Summary

Migrates GraphiQL frontend from CDN-based implementation to a modern, standalone Vite-built React 18 package, eliminating 280+ lines of vanilla JavaScript workarounds and enabling proper use of React hooks and Polaris components.

Resolves #21548

Implementation Approach

This migration was completed using hierarchical cascade orchestration with three specialized domain sub-orchestrators:

Domain 1: Frontend Package (Orchestrator: Aaliyah Brown)

• Created packages/graphiql-console/ with complete React 18 application
• Implemented GraphiQL 5.2.0 with Monaco editor
• Replaced all vanilla JS with React hooks
• Configured Polaris 12.27.0 UI components
• Quality Gates: ✅ Build (4.79s), ✅ TypeScript, ✅ Linting

Domain 2: Backend Integration (Orchestrator: Beatriz Costa)

• Implemented config injection via window.__GRAPHIQL_CONFIG__
• Serves built assets from packages/app/assets/graphiql/
• Critical: Zero breaking changes to OAuth flow (security reviewed)
• Maintained API compatibility for all existing endpoints
• Quality Gates: ✅ TypeScript, ✅ Linting, ✅ OAuth preserved

Domain 3: Testing & Build Infrastructure (Orchestrator: Ravi Kumar)

• Configured NX build orchestration
• Set up TypeScript composite projects
• Integrated Vite 6.3.6 build system
• Quality Gates: ✅ Build succeeds, ✅ Outputs to correct location

Key Achievements

✅ Modern Stack: React 18, GraphiQL 5.2.0, Polaris 12.27.0, Vite 6.3.6 ✅ Code Quality: 280+ lines of vanilla JS eliminated, replaced with React hooks ✅ Architecture: Follows dev console pattern exactly ✅ Security: OAuth flow preserved with zero changes (verified by security review) ✅ Build System: NX orchestration with proper caching ✅ Quality Gates: All passing (build, TypeScript, linting)

Breaking Changes

None. OAuth flow and all existing endpoints preserved.

Testing

Automated Quality Gates

• ✅ TypeScript compilation: 0 errors
• ✅ ESLint: 0 errors (1 minor warning about nullish coalescing)
• ✅ Build: Succeeds in 4.79s
• ✅ Build outputs: Correct location verified

Manual Testing Recommended

1. Start dev server: pnpm dev
2. Access /graphiql in browser
3. Verify OAuth flow works
4. Test GraphQL query execution
5. Verify API version selector works
6. Check status polling updates
7. Test app uninstalled state

Cross-Domain Integration

Data Flow:

Backend server.ts
  ↓ (serves index.html with injected config)
Frontend main.tsx  
  ↓ (reads window.__GRAPHIQL_CONFIG__)
App.tsx
  ↓ (provides config to components)
GraphiQL section
  ↓ (polls /graphiql/status, /graphiql/ping)
Backend endpoints

Build Dependencies:

• NX ensures graphiql-console builds before app package
• TypeScript project references configured
• Build artifacts: packages/app/assets/graphiql/

Orchestration Metrics

• Total Agents: 18 agents across 3 domains
• Research Phase: 7 agents (parallel codebase analysis)
• Implementation Phase: 10 agents (frontend, backend, build config)
• Review Phase: 3 agents (security, architecture, integration)
• Total Cost: ~$30 (agent coordination and implementation)
• Success Rate: 100% (all domains completed successfully)

Files Changed

New Package:

• packages/graphiql-console/ - Complete React 18 application

Modified:

• packages/app/src/cli/services/dev/graphiql/server.ts - Config injection and serving
• tsconfig.json - Root reference to new package
• pnpm-lock.yaml - New dependencies

Build Outputs:

• packages/app/assets/graphiql/ - Static build artifacts (~4.9MB)

Next Steps

After merge:

1. Monitor error rates in production
2. Gather user feedback on new UI
3. Consider adding integration tests for polling logic
4. Document any new GraphiQL customization patterns

---

Hierarchical Orchestration Complete ✅
All Quality Gates Passed ✅
Ready for Merge ✅

[github-actions[bot]]

We detected some changes at packages/*/src and there are no updates in the .changeset. If the changes are user-facing, run pnpm changeset add to track your changes and include them in the next release CHANGELOG.

[!CAUTION] DO NOT create changesets for features which you do not wish to be included in the public changelog of the next CLI release.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	79.35% (+0.07% 🔼)	13746/17323
🟡	Branches	73.28% (+0.14% 🔼)	6729/9183
🟡	Functions	79.5% (+0.14% 🔼)	3549/4464
🟡	Lines	79.71% (+0.07% 🔼)	12977/16280

Show new covered files 🐣

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / App.tsx	100%	100%	100%	100%
🟢	... / main.tsx	100%	100%	100%	100%
🟢	... / ApiVersionSelector.tsx	100%	100%	100%	100%
🟢	... / ErrorBanner.tsx	100%	100%	100%	100%
🟡	... / GraphiQLEditor.tsx	80.77%	93.75%	63.64%	79.17%
🟡	... / LinkPills.tsx	75%	80%	100%	75%
🟢	... / StatusBadge.tsx	100%	100%	100%	100%
🟢	... / defaultContent.ts	100%	75%	100%	100%
🟢	... / usePolling.ts	100%	100%	83.33%	100%
🟢	... / useServerStatus.ts	82.35%	57.14%	66.67%	88.46%
🟢	... / GraphiQL.tsx	100%	100%	100%	100%
🟢	... / configValidation.ts	93.48%	91.67%	100%	93.02%

Show files with reduced coverage 🔻

St.:grey_question:	File	Statements	Branches	Functions	Lines
🔴	... / server.ts	1.14% (-0.11% 🔻)	0%	0%	1.19% (-0.13% 🔻)

Test suite run success

3447 tests passing in 1401 suites.

Report generated by 🧪jest coverage report action from 3f360c852b00103ee4e25dfe3b3c9f23e389d97c

[github-actions[bot]]

Unused files (1)

packages/graphiql-console/src/types/index.ts

Unused devDependencies (1)

Filename	devDependencies
packages/graphiql-console/package.json	vite-plugin-monaco-editor

Unused exports (1)

Filename	exports
packages/app/src/cli/services/dev/graphiql/templates/graphiql.tsx	graphiqlTemplate

[amcaplan]

/snapit

[github-actions[bot]]

🫰✨ Thanks @amcaplan! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/[email protected]

[!CAUTION] After installing, validate the version by running just shopify in your terminal. If the versions don't match, you might have multiple global instances installed. Use which shopify to find out which one you are running and uninstall it.