Use when setting up GraphQL Inspector in CI/CD pipelines, GitHub Actions, or GitLab CI for automated schema validation.
Configures automated GraphQL schema validation in CI/CD pipelines to catch breaking changes before deployment.
/plugin marketplace add thebushidocollective/han/plugin install graphql-inspector@hanThis skill is limited to using the following tools:
Expert knowledge of integrating GraphQL Inspector into continuous integration and deployment pipelines for automated schema and operation validation.
GraphQL Inspector provides multiple integration options for CI/CD, from simple CLI commands to dedicated GitHub Apps and Actions. This skill covers all integration patterns for automated GraphQL quality enforcement.
The official GitHub App provides the richest integration:
.github/graphql-inspector.yaml:schema: 'schema.graphql'
branch: 'main'
endpoint: 'https://api.example.com/graphql'
diff: true
notifications:
slack: ${{ secrets.SLACK_WEBHOOK }}
name: GraphQL Schema Check
on:
pull_request:
paths:
- 'schema.graphql'
- '**/*.graphql'
jobs:
schema-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install GraphQL Inspector
run: npm install -g @graphql-inspector/cli
- name: Check for breaking changes
run: |
graphql-inspector diff \
'git:origin/main:schema.graphql' \
'schema.graphql'
name: GraphQL Validation
on:
pull_request:
paths:
- '**/*.graphql'
- 'src/**/*.tsx'
- 'schema.graphql'
jobs:
validate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install dependencies
run: npm install -g @graphql-inspector/cli
- name: Schema Diff
id: diff
run: |
graphql-inspector diff \
'git:origin/main:schema.graphql' \
'schema.graphql' \
--onlyBreaking
continue-on-error: true
- name: Validate Operations
run: |
graphql-inspector validate \
'src/**/*.graphql' \
'schema.graphql' \
--maxDepth 10
- name: Audit Operations
run: |
graphql-inspector audit \
'src/**/*.graphql'
- name: Comment on PR
if: steps.diff.outcome == 'failure'
uses: actions/github-script@v7
with:
script: |
github.rest.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: '⚠️ Breaking GraphQL schema changes detected!'
})
name: Multi-Schema Validation
on: pull_request
jobs:
validate:
runs-on: ubuntu-latest
strategy:
matrix:
service:
- { name: 'users', schema: 'services/users/schema.graphql' }
- { name: 'orders', schema: 'services/orders/schema.graphql' }
- { name: 'products', schema: 'services/products/schema.graphql' }
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Install GraphQL Inspector
run: npm install -g @graphql-inspector/cli
- name: Diff ${{ matrix.service.name }}
run: |
graphql-inspector diff \
'git:origin/main:${{ matrix.service.schema }}' \
'${{ matrix.service.schema }}'
stages:
- validate
graphql-diff:
stage: validate
image: node:20
before_script:
- npm install -g @graphql-inspector/cli
script:
- graphql-inspector diff "git:origin/main:schema.graphql" schema.graphql
rules:
- changes:
- "**/*.graphql"
graphql-validate:
stage: validate
image: node:20
before_script:
- npm install -g @graphql-inspector/cli
script:
- graphql-inspector validate 'src/**/*.graphql' schema.graphql
rules:
- changes:
- "**/*.graphql"
- "src/**/*.tsx"
graphql-diff:
stage: validate
image: node:20
script:
- npm install -g @graphql-inspector/cli
- |
OUTPUT=$(graphql-inspector diff "git:origin/main:schema.graphql" schema.graphql 2>&1 || true)
if [[ "$OUTPUT" == *"Breaking"* ]]; then
curl --request POST \
--header "PRIVATE-TOKEN: $GITLAB_TOKEN" \
--data "body=⚠️ Breaking GraphQL changes detected" \
"$CI_API_V4_URL/projects/$CI_PROJECT_ID/merge_requests/$CI_MERGE_REQUEST_IID/notes"
fi
version: 2.1
jobs:
graphql-check:
docker:
- image: cimg/node:20.0
steps:
- checkout
- run:
name: Install GraphQL Inspector
command: npm install -g @graphql-inspector/cli
- run:
name: Schema Diff
command: |
graphql-inspector diff \
'git:origin/main:schema.graphql' \
'schema.graphql'
- run:
name: Validate Operations
command: |
graphql-inspector validate \
'src/**/*.graphql' \
'schema.graphql'
workflows:
validate:
jobs:
- graphql-check
Create .graphql-inspector.yaml for all commands:
# Schema configuration
schema:
path: './schema.graphql'
# Or for federation
# federation: true
# Diff configuration
diff:
rules:
- suppressRemovalOfDeprecatedField
failOnBreaking: true
failOnDangerous: false
notifications:
slack: ${SLACK_WEBHOOK_URL}
# Validate configuration
validate:
documents: './src/**/*.graphql'
maxDepth: 10
maxAliasCount: 5
maxComplexityScore: 100
# Audit configuration
audit:
documents: './src/**/*.graphql'
# GitHub Actions with caching
- name: Cache npm
uses: actions/cache@v4
with:
path: ~/.npm
key: ${{ runner.os }}-graphql-inspector
- name: Install GraphQL Inspector
run: npm install -g @graphql-inspector/cli
- name: Notify Slack on breaking changes
if: failure()
uses: slackapi/slack-github-action@v1
with:
payload: |
{
"text": "⚠️ Breaking GraphQL changes in ${{ github.repository }}",
"attachments": [{
"color": "danger",
"title": "Pull Request #${{ github.event.pull_request.number }}",
"title_link": "${{ github.event.pull_request.html_url }}"
}]
}
env:
SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
Configure repository settings:
- name: Diff against production
run: |
graphql-inspector diff \
'https://api.production.example.com/graphql' \
'schema.graphql'
env:
GRAPHQL_INSPECTOR_HEADERS: |
Authorization: Bearer ${{ secrets.PROD_API_TOKEN }}
--onlyBreaking to focus on critical issues- uses: actions/checkout@v4
with:
fetch-depth: 0 # Fetch full history
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.