feat: add graphql mode to the query editor

[LagunaElectric]

Description

Added GraphQL support to the query editor.

Fixes #41424

Automation

/ok-to-test tags="@tag.Datasource"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/19724400241
Commit: 0a0e95e
Cypress dashboard.
Tags: @tag.Datasource
Spec:

---

Thu, 27 Nov 2025 04:22:28 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

• New Features
  • Added GraphQL syntax support to the code editor, enabling proper syntax highlighting and formatting for GraphQL queries and schemas.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added a GraphQL mode import to the CodeEditor component to enable syntax highlighting for GraphQL queries. The dependency was previously installed but not imported, requiring only a single-line code addition.

Changes

Cohort / File(s)	Summary
GraphQL syntax support app/client/src/components/editorComponents/CodeEditor/index.tsx	Added import for codemirror-graphql/mode to enable GraphQL syntax highlighting in the editor

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

Colors dance in bracket pairs,
GraphQL shines beyond compare,
One line added, light takes flight,
Syntax blooms in editor's sight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding GraphQL mode to the query editor, which matches the code modification in the PR.
Linked Issues check	✅ Passed	The single-line import addition directly fulfills the linked issue's requirement to import the GraphQL syntax highlighting dependency into the editor and enable it.
Out of Scope Changes check	✅ Passed	The only change is the GraphQL mode import, which is directly scoped to the linked issue's requirement. No extraneous modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	PR description includes the issue reference (#41424), a clear summary, automation tags, and Cypress results. All critical sections are present.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-graphql-syntax-highlighting

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[LagunaElectric]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/19724494312.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41425.
recreate: .

[github-actions]

Deploy-Preview-URL: https://ce-41425.dp.appsmith.com