GqlQueryLoaderHelper

A VS Code extension that provides intelligent autocompletion and "Go to Definition" functionality for GraphQL query loading in your projects.

Features

Autocompletion for Query Paths

When typing inside a loadQuery() function call, the extension provides intelligent suggestions based on your existing query files in the resources/queries directory.

// Type loadQuery(" and get suggestions like:
loadQuery("user.profile")
loadQuery("posts.list")
loadQuery("auth.login")

• Converts file paths to dot notation automatically (e.g., user/profile.graphql becomes user.profile)
• Case-insensitive filtering for easier discovery
• Supports nested directory structures

Quick Query File Creation

When no matching query file exists, the extension offers quick options to create new files:

• Create as GraphQL file (.graphql)
• Create as PHP file (.php)

The extension automatically:

• Creates the necessary directory structure
• Uses templates from your templates/ folder (or built-in defaults)
• Opens the newly created file for editing

Config File Support (config/shopify-polling.php)

The extension also provides full support for query references in config/shopify-polling.php:

// Autocomplete, go-to-definition, diagnostics, and quick-fix all work here:
'query' => 'shopify.products.list'

• Autocomplete suggestions when typing inside 'query' => '...'
• Ctrl+Click to navigate to the referenced query file
• Error diagnostics for missing query files
• Quick-fix code actions to create missing query files

Go to Definition

Ctrl+Click (or Cmd+Click on macOS) on any query path inside loadQuery() or 'query' => '...' (in config files) to navigate directly to the query file.

loadQuery("user.profile")  // Ctrl+Click to open resources/queries/user/profile.graphql

How It Works

1. Query Discovery: The extension scans your resources/queries/ directory for .graphql and .php files
2. Path Conversion: File paths are converted to dot notation for easy reference in code
3. Autocompletion: As you type inside loadQuery(), matching suggestions are filtered and displayed
4. File Creation: If you type a path that doesn't exist, you can create it with one click
5. Navigation: Use "Go to Definition" to jump from code to the actual query file

Supported Languages

The extension activates for the following file types:

• PHP (.php)

Project Structure

For the extension to work correctly, your project should have the following structure:

your-project/
├── resources/
│   └── queries/
│       ├── user/
│       │   └── profile.graphql
│       ├── posts/
│       │   └── list.graphql
│       └── auth.graphql
└── templates/                    # Optional
    ├── template.graphql
    └── template.php

Templates

You can customize the templates used when creating new query files by adding them to a templates/ folder in your workspace root:

templates/template.graphql

query QueryName {

}

templates/template.php

<?php

return <<<'GRAPHQL'
query QueryName {

}
GRAPHQL;

If no templates are provided, the extension uses sensible defaults.

Requirements

• VS Code version 1.108.1 or higher
• A project with a resources/queries/ directory structure

Extension Settings

This extension currently has no configurable settings. It works out of the box with the default conventions:

• Query files location: resources/queries/
• Supported extensions: .graphql, .php

Known Issues

None at this time. Please report issues on the GitHub repository.

Release Notes

0.0.2 (Unreleased)

• Query autocomplete, go-to-definition, diagnostics, and quick-fix support for 'query' => '...' entries in config/shopify-polling.php

0.0.1

Initial release:

• Autocompletion for loadQuery() function calls
• Go to Definition support for query paths
• Quick file creation with GraphQL and PHP templates
• Support for TypeScript, JavaScript, and PHP files

License

MIT

Enjoy!