Skip to content

feat: add GraphQL operations and fragments to the outline (navigation tree) - #410

Open
JoviDeCroock wants to merge 1 commit into
mainfrom
feat/document-symbols
Open

feat: add GraphQL operations and fragments to the outline (navigation tree)#410
JoviDeCroock wants to merge 1 commit into
mainfrom
feat/document-symbols

Conversation

@JoviDeCroock

Copy link
Copy Markdown
Member

What/Why

GraphQL documents embedded in TypeScript files were invisible to editor outline features. This PR proxies getNavigationTree so every GraphQL operation and fragment shows up in VS Code's Outline view, breadcrumbs, and in-file symbol navigation (Cmd+Shift+O), e.g. query NavPokemons, query (anonymous), and fragment pokemonFields on Pokemon.

Implementation notes

  • New module packages/graphqlsp/src/navigationTree.ts, wired into the language-service proxy in index.ts using the existing guard() pattern — on any error the original navigation tree is returned unchanged.
  • Documents are collected in both plugin modes: call expressions (graphql()/gql(), via findAllCallExpressions) and tagged templates (via findAllTaggedTemplateNodes + resolveTemplate). Unparseable documents are skipped (parse in try/catch).
  • Each definition becomes a NavigationTree node (ScriptElementKind.constElement) with spans mapped from GraphQL AST loc offsets to TS file positions (document text start = literal start + 1, matching definition.ts). For tagged templates with interpolations, offsets after an interpolation are re-mapped through resolveTemplate's resolved spans; definitions that live entirely inside an interpolated (external) fragment are skipped since they have no text in the file.
  • The GraphQL nodes are appended to the childItems of the deepest existing navigation tree node whose span contains the document, so they nest under the containing variable/function; existing nodes are otherwise untouched.

Test plan

  • New e2e test test/e2e/navigation-tree.test.ts against fixture-project-tada using the tsserver navtree command, asserting text, kind, parent nesting, and exact line/offset spans (including nameSpan) for a named query, an anonymous query, and a fragment.
  • pnpm --filter @0no-co/graphqlsp run build passes, and the full pnpm run test:e2e suite is green: 12 test files, 55 tests passed (3 new).
  • Note: some e2e files (unused-fieds, tada, multi-schema-tada) are timing-flaky when the whole suite runs; they also fail intermittently on main with identical snapshot mismatches and pass consistently in isolation and in the final full-suite run of this branch.

🤖 Generated with Claude Code

Implements a getNavigationTree proxy that parses every GraphQL document
in a file (both call-expression and tagged-template mode) and appends a
navigation item per operation or fragment definition to the deepest
existing navigation tree node containing the document. This powers the
Outline view, breadcrumbs, and in-file symbol navigation in editors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Jul 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 71f9f24

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

This PR includes changesets to release 1 package
Name Type
@0no-co/graphqlsp Minor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant