GraphQL LSP Setup

This command will configure your GraphQL development environment with graphql-lsp server and essential tools.

Prerequisites Check

First, verify Node.js is installed:

node --version
npm --version

Installation Steps

1. Install graphql-lsp Server

npm install -g graphql-language-service-cli graphql

2. Install Development Tools

Quick install (all recommended tools):

npm install -g prettier @graphql-eslint/eslint-plugin graphql-tag

3. Verify Installation

# Check graphql-lsp
graphql-lsp --version

# Check GraphQL
graphql --version

# Check Prettier
prettier --version

4. Create Project Configuration (Optional)

.graphqlrc.yml:

schema: schema.graphql
documents:
  - 'src/**/*.graphql'
  - 'src/**/*.gql'
extensions:
  endpoints:
    default:
      url: http://localhost:4000/graphql

Or graphql.config.js:

module.exports = {
  schema: './schema.graphql',
  documents: ['./src/**/*.{graphql,gql}'],
  extensions: {
    endpoints: {
      default: {
        url: 'http://localhost:4000/graphql',
      },
    },
  },
};

5. Enable LSP in Claude Code

export ENABLE_LSP_TOOL=1

Verification

Test the LSP integration:

# Create a test schema
cat > test_schema.graphql << 'EOF'
type Query {
  hello: String!
}
EOF

# Validate schema
graphql-inspector validate test_schema.graphql

# Format with Prettier
prettier --write test_schema.graphql

# Clean up
rm test_schema.graphql

Optional: Code Generation Setup

Install GraphQL Code Generator:

npm install -g @graphql-codegen/cli

# Initialize configuration
graphql-codegen init