LSP Setup
When using Graffle's .gql()
method with GraphQL document syntax, you can enhance your development experience with editor validation and autocomplete by configuring the GraphQLSP LSP plugin.
INFO
This is optional - Graffle provides full type safety at compile time without the LSP. The LSP adds real-time editor feedback as you write GraphQL documents.
Setup
1. Install GraphQLSP
npm add -D @0no-co/graphqlsp
2. Configure TypeScript Plugin
Add the GraphQLSP plugin to your tsconfig.json
:
{
"compilerOptions": {
"plugins": [
{
"name": "@0no-co/graphqlsp",
"schema": "./path/to/your/schema/as/sdl/schema.graphql"
}
]
}
}
3. Generate SDL File (Optional)
If you don't already have your schema as an SDL file, Graffle can generate one for you:
// graffle.config.ts
export default {
schema: '...', // Your schema source (URL, file, etc.)
outputSDL: true, // Graffle will generate an SDL file
}
TIP
Graffle CLI will check your GraphQLSP configuration and provide helpful setup instructions if it's not correctly configured. To disable this check, set lint.missingGraphqlSP: false
in your graffle.config.ts
.
What You Get
With GraphQLSP configured, you'll get:
- Real-time validation - Syntax errors, type mismatches, and unknown fields highlighted as you type
- Autocomplete - Field suggestions, argument names, and enum values
- Go to definition - Navigate from field usage to schema definition
- Schema-aware hints - Hover over fields to see types and documentation
Related
- Requests Guide - Learn about using
.gql()
and.send()
- GraphQLSP Documentation - Full LSP plugin documentation
Future Improvements
We want Graffle to configure GraphQLSP for you automatically. Track progress in #1389.