Slab GraphQL Extension

A VS Code extension that provides enhanced GraphQL fragment support for TypeScript/React projects.

Features

📋 Fragment Hover Information

Hover over any GraphQL fragment spread (e.g., ...PostTopicBar_series) to see:

• All fields included in the fragment (recursively expanded)
• Which fragments contribute each field
• Nested field structures with proper indentation
• Clickable links to navigate to fragment definitions

📊 Field Count Decorations

Inline display of field counts next to fragment spreads:

• Shows (N fields) after each ...FragmentName in your code
• Automatically updates as you edit
• Counts all unique fields

🔗 Smart Navigation

• Click fragment names in hover to jump to their definitions
• [via] links show the fragment chain for nested fields
• Automatic deduplication of fields from multiple fragments

Usage

1. Open any TypeScript or TSX file containing GraphQL fragments
2. Hover over a fragment spread (...FragmentName) to see field details
3. Field counts appear automatically next to fragment spreads

Requirements

• VS Code 1.60.0 or higher
• TypeScript/React project with GraphQL fragments defined using gql tagged templates
• Fragments should be in assets/**/*.{ts,tsx} files

Extension Settings

This extension works out of the box with no configuration needed.

Known Issues

• Only scans assets/**/*.{ts,tsx} directory pattern
• Assumes fragments are defined with gql template literals

Release Notes

0.0.1

Initial release with hover support and field count decorations.