jwebmp-angular-graphql

Apollo GraphQL client generation for JWebMP. Exposes the @NgGraphQL annotation to generate typed apollo-angular services from Java for GraphQL queries, mutations, and subscriptions, with signal-based state, polling, fetch/error policies, and default variables via @NgGraphQLVariable. Use when working with GraphQL in JWebMP, generating Apollo Angular clients, mapping GraphQL operations to Angular services, or building reactive GraphQL-backed UIs in JWebMP applications.

5 stars

Best use case

jwebmp-angular-graphql is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Apollo GraphQL client generation for JWebMP. Exposes the @NgGraphQL annotation to generate typed apollo-angular services from Java for GraphQL queries, mutations, and subscriptions, with signal-based state, polling, fetch/error policies, and default variables via @NgGraphQLVariable. Use when working with GraphQL in JWebMP, generating Apollo Angular clients, mapping GraphQL operations to Angular services, or building reactive GraphQL-backed UIs in JWebMP applications.

Teams using jwebmp-angular-graphql should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/jwebmp-angular-graphql/SKILL.md --create-dirs "https://raw.githubusercontent.com/GuicedEE/ai-rules/main/skills/.system/jwebmp-angular-graphql/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/jwebmp-angular-graphql/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How jwebmp-angular-graphql Compares

Feature / Agentjwebmp-angular-graphqlStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Apollo GraphQL client generation for JWebMP. Exposes the @NgGraphQL annotation to generate typed apollo-angular services from Java for GraphQL queries, mutations, and subscriptions, with signal-based state, polling, fetch/error policies, and default variables via @NgGraphQLVariable. Use when working with GraphQL in JWebMP, generating Apollo Angular clients, mapping GraphQL operations to Angular services, or building reactive GraphQL-backed UIs in JWebMP applications.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# JWebMP Angular Apollo GraphQL

Generates Apollo (`apollo-angular`) TypeScript services from Java annotations. Annotate a class with
`@NgGraphQL`, declare the GraphQL operation, and the framework emits a fully typed `@Injectable` Angular
service backed by Apollo and Angular signals — no handwritten TypeScript.

It mirrors the `@NgRestClient` pattern (see `jwebmp-tsclient`): one annotated Java class per GraphQL operation.

## Installation

```xml
<dependency>
    <groupId>com.jwebmp.plugins</groupId>
    <artifactId>angular-graphql</artifactId>
</dependency>
```

- Module: `com.jwebmp.angular.graphql`
- Requires the `angular` (`com.jwebmp.core.angular`) and `typescript-client` plugins.
- npm deps are declared automatically via `@TsDependency`: `apollo-angular` ^11, `@apollo/client` ^4, `graphql` ^16.

## Core pattern

Implement `INgGraphQLClient<Self>` and annotate with `@NgGraphQL`. The implementing class is empty —
all TypeScript is generated from the annotation.

```java
@NgGraphQL(
    operation = """
        query Users($active: Boolean) {
          users(active: $active) { id name email }
        }
        """,
    operationType = NgGraphQL.OperationType.QUERY,
    fetchOnCreate = true)
@NgGraphQLVariable(name = "active", value = "true")
public class UsersQuery implements INgGraphQLClient<UsersQuery> { }
```

## @NgGraphQL attributes

| Attribute | Default | Purpose |
|-----------|---------|---------|
| `operation` | (required) | Raw GraphQL document; embedded into a `gql` template literal |
| `operationType` | `QUERY` | `QUERY`, `MUTATION`, or `SUBSCRIPTION` |
| `value` | `""` | Optional service name base |
| `responseType` | `INgDataType.class` (→ `any`) | Typed result class; imported automatically |
| `responseArray` | `false` | Result is an array of `responseType` |
| `singleton` | `true` | `providedIn: 'root'` vs `'any'` |
| `fetchOnCreate` | `false` | Auto-run on inject (QUERY → `execute()`, SUBSCRIPTION → `subscribe()`; never mutations) |
| `pollingEnabled` | `false` | Query polling via Apollo `pollInterval` |
| `pollingIntervalMs` | `30000` | Polling interval |
| `fetchPolicy` | `CACHE_FIRST` | Apollo fetch policy (`CACHE_AND_NETWORK`, `NETWORK_ONLY`, `CACHE_ONLY`, `NO_CACHE`, `STANDBY`) |
| `errorPolicy` | `NONE` | Apollo error policy (`IGNORE`, `ALL`) |

`@NgGraphQLVariable(name, value)` is repeatable; `value` is emitted as a raw TypeScript expression
(e.g. `"true"`, `"42"`, `"'active'"`). Defaults merge with call-time variables (call-time wins).

## Generated service API

All operation types expose `data()`, `loading()`, `error()`, `success()` signals, plus `reset()`,
`handleResult()`, and `ngOnDestroy` cleanup. The trigger method depends on `operationType`:

- **QUERY** → `execute(variables?)`, `refetch(variables?)`, `startPolling(ms?)`, `stopPolling()`, `polling` signal (uses `apollo.watchQuery`)
- **MUTATION** → `mutate(variables?)` (uses `apollo.mutate`; never auto-executes)
- **SUBSCRIPTION** → `subscribe(variables?)` (uses `apollo.subscribe`)

## Examples

### Mutation

```java
@NgGraphQL(
    operation = """
        mutation CreateOrder($input: OrderInput!) {
          createOrder(input: $input) { id status }
        }
        """,
    operationType = NgGraphQL.OperationType.MUTATION,
    errorPolicy = NgGraphQL.ErrorPolicy.ALL)
public class CreateOrderMutation implements INgGraphQLClient<CreateOrderMutation> { }
```

### Subscription (array result, auto-start)

```java
@NgGraphQL(
    operation = """
        subscription OnNotification {
          notificationAdded { id message }
        }
        """,
    operationType = NgGraphQL.OperationType.SUBSCRIPTION,
    responseArray = true,
    fetchOnCreate = true)
public class NotificationSubscription implements INgGraphQLClient<NotificationSubscription> { }
```

## Authoring a new operation client

1. Create a class implementing `INgGraphQLClient<Self>` in a package scanned by GuicedEE.
2. Add `@NgGraphQL` with the `operation` text and matching `operationType`.
3. For typed results, set `responseType` to an `INgDataType` class and use `responseArray` for lists.
4. Add repeatable `@NgGraphQLVariable` for defaults.
5. Inject the generated service in an `@NgComponent` and read its signals in the template.

## JPMS notes

The plugin registers itself for scanning via `IGuiceScanModuleInclusions`
(`AngularGraphQLScanModule` → `com.jwebmp.angular.graphql`). New client classes only need to live in a
module that is itself scanned; no extra registration per client.

## Build registration

When adding the plugin to a multi-module build, register it in:
- `JWebMP/bom/pom.xml` dependency management (`angular-graphql`).
- The aggregator/profile that builds JWebMP plugins (module `JWebMP/plugins/angular-graphql`).

Related Skills

jwebmp-webawesome

5
from GuicedEE/ai-rules

WebAwesome icon integration for JWebMP — modern, open-source icon library. Provides 1,500+ icons with solid/regular styles, sizing, rotation, animation, and CSS utilities. Drop-in FontAwesome alternative with fresh designs. Use when working with WebAwesome icons, modern icon designs, or as FontAwesome alternative in JWebMP applications.

jwebmp-webawesome-pro

5
from GuicedEE/ai-rules

WebAwesome Pro integration for JWebMP with premium icons and features. Extends jwebmp-webawesome with additional styles, premium icons, and advanced features. Use when working with WebAwesome Pro icons or premium WebAwesome features in JWebMP applications.

jwebmp-weather-icons

5
from GuicedEE/ai-rules

Weather Icons font library for JWebMP providing weather icon fonts. Use when displaying weather-related icons.

jwebmp-waypoints

5
from GuicedEE/ai-rules

Waypoints jQuery plugin for JWebMP triggering functions when elements enter the viewport. Use when implementing scroll-based interactions and animations.

jwebmp-waves-effect

5
from GuicedEE/ai-rules

Waves material design ripple effect for JWebMP creating Material Design click ripples on elements. Use when adding Material Design interaction effects.

jwebmp-vertx

5
from GuicedEE/ai-rules

Portable connector between JWebMP and Vert.x 5 powered by GuicedEE. Provides automatic page routing, AJAX event pipeline, data component servlet, CSS endpoint, site-loader script, WebSocket broadcasting via event bus, user-agent detection, and call-scope integration. Use when working with JWebMP Vert.x integration, HTTP routing, AJAX handling, WebSocket communication, or building reactive web applications with JWebMP.

jwebmp-tsclient

5
from GuicedEE/ai-rules

TypeScript client generation for JWebMP plugins. Provides annotations and utilities for generating TypeScript interfaces, components, services, and modules from Java code. Supports @TsDependency, @TsDevDependency, @NgComponent, @NgDataService, @NgRestClient annotations. Use when creating JWebMP plugins that generate TypeScript code, defining npm dependencies, building Angular-integrated components, or generating typed Angular REST client services.

jwebmp-toastr

5
from GuicedEE/ai-rules

Toastr jQuery notification plugin integration for JWebMP displaying non-blocking toast notifications. Use when showing transient user notifications and alerts.

jwebmp-themify-icons

5
from GuicedEE/ai-rules

Themify Icons font library for JWebMP providing a comprehensive icon font collection. Use when adding Themify icons to projects.

jwebmp-skycons

5
from GuicedEE/ai-rules

Skycons animated weather icons for JWebMP creating beautiful animated SVG weather visualizations. Use when rendering weather data with animated icons.

jwebmp-session-storage

5
from GuicedEE/ai-rules

Browser Session Storage integration for JWebMP providing client-side temporary data storage for the browser session. Use when storing temporary user session data.

jwebmp-prism

5
from GuicedEE/ai-rules

Prism syntax highlighter integration for JWebMP providing powerful code highlighting with line numbers, copy button, and themes. Use when displaying highlighted code with advanced features.