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.
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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/jwebmp-angular-graphql/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How jwebmp-angular-graphql Compares
| Feature / Agent | jwebmp-angular-graphql | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/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
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
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
Weather Icons font library for JWebMP providing weather icon fonts. Use when displaying weather-related icons.
jwebmp-waypoints
Waypoints jQuery plugin for JWebMP triggering functions when elements enter the viewport. Use when implementing scroll-based interactions and animations.
jwebmp-waves-effect
Waves material design ripple effect for JWebMP creating Material Design click ripples on elements. Use when adding Material Design interaction effects.
jwebmp-vertx
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
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
Toastr jQuery notification plugin integration for JWebMP displaying non-blocking toast notifications. Use when showing transient user notifications and alerts.
jwebmp-themify-icons
Themify Icons font library for JWebMP providing a comprehensive icon font collection. Use when adding Themify icons to projects.
jwebmp-skycons
Skycons animated weather icons for JWebMP creating beautiful animated SVG weather visualizations. Use when rendering weather data with animated icons.
jwebmp-session-storage
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
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.