Documentation/Frameworks/Relay
🏗ī¸

Relay

v1.3.0Apache 2.0

Advanced Relay GraphQL framework skills for React applications

frameworksskillhooklsprelaygraphqlreactfragments

Installation

Install han binary (required for hooks to work):

curl -fsSL https://han.guru/install.sh | bash

Then install this plugin:

han plugin install relay

Overview

Advanced Relay GraphQL framework skills for React applications

Skills

This plugin provides the following skills:

  • Relay Fragments Patterns
  • Relay Mutations Patterns
  • Relay Pagination

Usage

Once enabled, Claude will automatically apply these skills when working with relevant code. The plugin provides context and expertise that Claude uses to:

  • Write idiomatic code following best practices
  • Suggest appropriate patterns and architectures
  • Catch common mistakes and anti-patterns
  • Provide framework-specific guidance

Quality Hooks

This plugin includes hooks that ensure Relay artifacts are compiled before completing work. The hooks use @thebushidocollective/han to support both single-package and monorepo projects.

Compile Hook

The compile hook runs npx relay-compiler to generate artifacts from GraphQL fragments and queries. It automatically detects directories containing Relay configuration files:

  • relay.config.js
  • relay.config.json
  • relay.config.cjs
  • relay.config.mjs

The hook runs when any of the following file types are changed:

  • **/*.ts
  • **/*.tsx
  • **/*.js
  • **/*.jsx
  • **/*.graphql

Monorepo Support

The hooks automatically detect directories with Relay config files and run the compiler in each:

bash
han hook run jutsu-relay compile

This ensures all packages in your monorepo have up-to-date Relay artifacts before work is marked complete.

Installation

Install with npx (no installation required):

bash
han plugin install jutsu-relay

LSP Servers

🧠

relay

Languages:

graphql

File Extensions:

.graphql.gql

Command:

${CLAUDE_PLUGIN_ROOT}/scripts/lsp-entrypoint.sh

Skills

📖

relay-fragments-patterns

Use when relay fragment composition, data masking, colocation, and container patterns for React applications.

📖

relay-mutations-patterns

Use when relay mutations with optimistic updates, connections, declarative mutations, and error handling.

📖

relay-pagination

Use when relay pagination with cursor-based pagination, infinite scroll, load more patterns, and connection protocols.

Hooks

⚠ī¸

Token Usage Notice

Hooks run automatically during Claude Code sessions and their output is sent to the model for processing. This may increase token usage and associated costs. Consider disabling hooks you don't need via han-config.yml.

🛑

Stop

Runs when the main Claude Code agent has finished responding. Can verify task completion, check quality gates, or ensure documentation requirements are met before the session ends.

npx relay-compiler