zeus-graphql

Name: zeus-graphql
Availability: InStock
Author: Aexol

Build type-safe GraphQL clients with Zeus and React Query.

27|2|Updated Oct 10, 2023

Search Tags:#typescript #frontend #graphql #type-safety #react-query #selectors

Ready to run

npx skills add https://github.com/aexol-studio/axolotl --skill zeus-graphql

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: zeus-graphql
Source: https://github.com/aexol-studio/axolotl/tree/main/examples/new/.opencode/skills/zeus-graphql
Command: npx skills add https://github.com/aexol-studio/axolotl --skill zeus-graphql

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Type-safe GraphQL client integration in React apps, enabling strong typing, seamless data fetching with React Query, and consistent API usage across components.

Core Features & Use Cases

Type-safe GraphQL queries and mutations powered by Zeus wrappers (api/client.ts, api/query.ts, api/mutation.ts)
Seamless React Query integration for caching, loading states, and automatic refetching
Selector-based type derivation to ensure consistent types across components
Schema-first workflow with code examples that show how to structure queries, variables, and client creation
Use Case: Build a robust frontend that can evolve with a GraphQL backend without manual type maintenance

Quick Start

Install the Zeus client and wire it into your React app to start making type-safe GraphQL queries.

Frequently Asked Questions about zeus-graphql

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a type-safe GraphQL client with React Query?▼

Type-safe GraphQL with React Query is achieved by applying a schema-first workflow using Zeus wrappers for queries and mutations, generating TypeScript types that ensure seamless data fetching and consistent API usage across components.

What is the best way to maintain TypeScript types for GraphQL queries in a React app?▼

Maintaining TypeScript types for GraphQL queries is best handled through selector-based type derivation, which enforces a schema-first workflow to automatically generate and synchronize types as your GraphQL backend evolves without manual type maintenance.

How does Zeus integrate with React Query for cache management?▼

Zeus integrates with React Query by wrapping queries and mutations in dedicated API layers, enabling React Query to handle cache management, loading states, and automatic refetching while preserving end-to-end type safety.

Can I use selectors to derive consistent types across React components?▼

Yes, you can use selectors to derive consistent types across React components, ensuring that the type-safe GraphQL data fetched via Zeus maintains strict type safety and consistent shapes throughout your application.

Do I need a schema-first workflow to use type-safe GraphQL mutations?▼

Yes, a schema-first workflow is required to use type-safe GraphQL mutations, as it allows the Zeus client to automatically generate the necessary TypeScript types for variables, queries, and mutations based on your GraphQL schema.