### Complete Example Workflow: Create Next.js Project

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/cli/create.mdx

This example demonstrates the full process of creating a new Next.js project, installing dependencies, generating the Zeus client, and starting the development server.

```bash
# Create the project
npx graphql-zeus create

# Select "Next.js" and enter "my-app" as the project name

# Navigate and install
cd my-app
npm install

# Generate Zeus client from a public GraphQL API
npx graphql-zeus https://countries.trevorblades.com/graphql ./lib --node

# Start development
npm run dev
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/cli/create.mdx

After creating a project, navigate to the project directory, install dependencies, generate the Zeus client, and start the development server.

```bash
# 1. Navigate to your project
cd my-zeus-app

# 2. Install dependencies
npm install

# 3. Generate Zeus client from your GraphQL schema
npx graphql-zeus https://your-api.com/graphql ./lib --node  # Next.js
# or
npx graphql-zeus https://your-api.com/graphql ./src/lib     # Vite

# 4. Start development server
npm run dev
```

--------------------------------

### Running the Example Commands

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/07-examples/node-typescript.mdx

These commands guide you through generating the GraphQL Zeus client and running the Node.js TypeScript application. Use 'npm run dev' for development or 'npm run build' followed by 'npm start' for a production build.

```bash
# Generate Zeus client
npm run generate

# Run in development
npm run dev

# Or build and run
npm run build
npm start

```

--------------------------------

### Quick Start Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/plan.docs.md

A basic example demonstrating the flow from schema to query result with type inference visualization.

```typescript
// Show side-by-side: schema → generated types → query → result
```

--------------------------------

### Build and Start Production Server

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Build the documentation for production and start the server.

```bash
npm run build
npm start
```

--------------------------------

### Install and Generate Zeus Client

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/index.mdx

Provides the command-line instructions to install Zeus and generate a type-safe client from a GraphQL API endpoint. This is the initial setup step for using Zeus.

```bash
# Install Zeus
npm install graphql-zeus

# Generate your client
npx zeus https://your-api.com/graphql ./src

# Start using it
import { Chain } from './src/zeus';
const chain = Chain('https://your-api.com/graphql');
```

--------------------------------

### Initialize New Project with Create Command

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/cli/create.mdx

Use this command to start a new project with Zeus pre-configured. You can run it directly with npx or if Zeus is installed globally.

```bash
npx graphql-zeus create
```

```bash
zeus create
```

--------------------------------

### Use Globally Installed Zeus CLI

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Example of using the globally installed Zeus CLI to generate a client.

```bash
zeus https://your-api.com/graphql ./src
```

--------------------------------

### Install Dependencies

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Navigate to the docs directory and install npm packages.

```bash
cd docs
npm install
```

--------------------------------

### Basic SSE Subscription Setup

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/plan.docs.md

Demonstrates the fundamental setup for establishing a Server-Sent Events subscription. This is useful for simple real-time updates.

```javascript
import { Client } from 'graphql-zeus';

const client = new Client({
  url: 'http://localhost:4000/graphql',
  subscriptions: {
    url: 'ws://localhost:4000/subscriptions',
  },
});

const subscription = client.subscribe({
  query: `
    subscription OnNewMessage {
      newMessage {
        id
        text
      }
    }
  `,
});

subscription.on('data', (data) => {
  console.log('New message:', data);
});

subscription.on('error', (error) => {
  console.error('Subscription error:', error);
});

// To close the subscription later:
// subscription.off();
```

--------------------------------

### Install and Run Documentation Server

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/IMPLEMENTATION_STATUS.md

Steps to set up and run the local development server for the project's documentation.

```bash
cd docs
npm install
npm run dev
```

--------------------------------

### Complete Example: Fetching Launches

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/quick-start.mdx

A full working example demonstrating how to fetch launch data using the type-safe Chain client. Includes nested selection sets and response handling.

```typescript
import { Chain } from './zeus';

// Initialize client
const chain = Chain('https://spacex-production.up.railway.app/');

async function fetchLaunches() {
  // Query with nested selection
  const response = await chain('query')({
    launches: [
      { limit: 5 },
      {
        mission_name: true,
        launch_date_local: true,
        launch_success: true,
        rocket: {
          rocket_name: true,
          rocket_type: true,
        },
        links: {
          mission_patch: true,
          video_link: true,
        },
      },
    ],
  });

  // Response is fully typed!
  response.launches?.forEach((launch) => {
    console.log(`🚀 ${launch.mission_name}`);
    console.log(`   Rocket: ${launch.rocket?.rocket_name}`);
    console.log(`   Success: ${launch.launch_success ? '✅' : '❌'}`);
  });

  return response;
}

fetchLaunches().catch(console.error);
```

--------------------------------

### CI/CD Pipeline: Install and Generate Client

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Steps to integrate Zeus client generation into a CI/CD pipeline, including installation and the generation command.

```bash
# Install Zeus
npm install -D graphql-zeus

# Generate in build
npx zeus https://api.com/graphql ./src/zeus
```

--------------------------------

### GraphQL Zeus CLI Usage Examples

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Examples of using the GraphQL Zeus command-line interface to generate clients from schema files or create new projects.

```bash
zeus schema.graphql ./output --node --esModule
```

```bash
zeus create  # Create new project from template
```

--------------------------------

### Start Development Server

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Run the development server to view the documentation locally. Open http://localhost:3000 in your browser.

```bash
npm run dev
```

--------------------------------

### Urql Installation

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Installs the necessary packages for urql integration with graphql-zeus.

```bash
npm install urql graphql
npm install -D graphql-zeus

```

--------------------------------

### Install Dependencies

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/packages/graphql-zeus/starters/nextjs/README.md

Install project dependencies using npm.

```bash
npm install
```

--------------------------------

### Zeus Configuration File Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Define reusable client generation settings in a `zeus.config.json` file. This example includes schema source, output directory, headers, TypedDocumentNode generation, and scalar mappings.

```json
{
  "schema": "https://your-api.com/graphql",
  "output": "./src/zeus",
  "headers": {
    "Authorization": "Bearer ${API_TOKEN}",
    "X-Custom-Header": "value"
  },
  "typedDocumentNode": true,
  "scalars": {
    "DateTime": "string",
    "JSON": "Record<string, any>",
    "Upload": "File"
  }
}
```

--------------------------------

### Install GraphQL Zeus Globally

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/README.md

Install the graphql-zeus CLI globally using npm or yarn.

```bash
npm i -g graphql-zeus
```

```bash
yarn global add graphql-zeus
```

--------------------------------

### Install GraphQL Zeus Locally and Use via npx/yarn

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/README.md

Install graphql-zeus locally to a project and execute it using npx or yarn.

```bash
npx zeus schema.graphql ./
```

```bash
yarn zeus schema.graphql ./
```

--------------------------------

### Install Apollo Client and GraphQL Zeus

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Install the necessary packages for Apollo Client and graphql-zeus. This includes the client library, graphql, and the development dependency for graphql-zeus.

```bash
npm install @apollo/client graphql
npm install -D graphql-zeus
```

--------------------------------

### Deploy with Vercel

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Install Vercel globally and run the deploy command.

```bash
npm install -g vercel
vercel
```

--------------------------------

### Package.json Scripts for GraphQL Zeus Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/07-examples/node-typescript.mdx

Defines scripts for generating the GraphQL Zeus client, building the TypeScript project, and running the application. Ensure you have the necessary dependencies installed.

```json
{
  "name": "graphql-zeus-example",
  "version": "1.0.0",
  "description": "GraphQL Zeus Node.js + TypeScript example",
  "main": "dist/index.js",
  "scripts": {
    "generate": "zeus https://spacex-production.up.railway.app/ ./src/zeus",
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "ts-node src/index.ts",
    "clean": "rm -rf dist",
    "rebuild": "npm run clean && npm run build"
  },
  "dependencies": {
    "graphql-zeus": "^5.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "ts-node": "^10.9.0",
    "typescript": "^5.7.0"
  }
}

```

--------------------------------

### GraphQL Zeus CLI Configuration Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Example of configuring GraphQL Zeus via CLI flags for schema generation. This includes specifying the schema source, output directory, environment, module system, subscriptions, typed document node support, and custom headers.

```bash
zeus https://api.example.com/graphql ./src/zeus \
  --node \
  --esModule \
  --subscriptions graphql-ws \
  --typedDocumentNode \
  --header "Authorization:Bearer token"
```

--------------------------------

### Example Configuration File Content

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

A sample JSON configuration file demonstrating various settings for GraphQL Zeus.

```json
{
  "urlOrPath": "https://api.example.com/graphql",
  "esModule": true,
  "node": true,
  "method": "POST",
  "subscriptions": "graphql-ws"
}
```

--------------------------------

### Urql Client Setup

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Sets up the urql client and provides it to the React application using the Provider component.

```typescript
import { createClient, Provider } from 'urql';

const client = createClient({
  url: 'https://api.com/graphql',
});

function App() {
  return (
    <Provider value={client}>
      <YourApp />
    </Provider>
  );
}

```

--------------------------------

### Install React Query and GraphQL Zeus

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Install the necessary packages for React Query and graphql-zeus. This includes the query library, graphql-request, and the development dependency for graphql-zeus.

```bash
npm install @tanstack/react-query graphql-request
npm install -D graphql-zeus
```

--------------------------------

### Install TypeScript, Zeus, and Types

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/07-examples/node-typescript.mdx

Installs necessary development and runtime dependencies for using TypeScript and GraphQL Zeus in a Node.js project.

```bash
npm install typescript ts-node @types/node
npm install graphql-zeus
```

--------------------------------

### GraphQL Zeus Generation Script Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/packages/graphql-zeus-core/README.md

Example of adding a script to package.json for generating Zeus clients using the CLI. This includes specifying the schema URL, output directory, and options like TypeScript and headers.

```json
{
  "scripts": {
    //...
    "generate": "zeus https://faker.graphqleditor.com/a-team/olympus/graphql zeusGenerated --typescript --header='My-Auth-Secret:JsercjjJY5MmghtHww6UF' --apollo"
  }
}
```

--------------------------------

### Create a New Documentation Page

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Example of creating a new MDX page with frontmatter for title and description.

```mdx
---
title: My New Feature
description: Learn about my new feature
---

# My New Feature

Your content here...
```

--------------------------------

### Verify GraphQL Zeus Installation

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Run this command to check if GraphQL Zeus has been installed correctly and display its version.

```bash
npx zeus --version
```

--------------------------------

### Install GraphQL Zeus as a Dev Dependency

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Install GraphQL Zeus as a development dependency, suitable for build-time code generation.

```bash
npm install --save-dev graphql-zeus
```

--------------------------------

### Example Query with Zeus

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Demonstrates how to perform a query using the Zeus client. Specify the query type and the fields to retrieve.

```typescript
const result = await Zeus('query', {
  user: [
    { id: '123' },
    { id: true, name: true, email: true }
  ]
});
```

--------------------------------

### Live Dashboard Implementation with SSE

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/plan.docs.md

A practical example of building a live dashboard using SSE subscriptions to display real-time data updates.

```javascript
import { Client } from 'graphql-zeus';

const client = new Client({
  url: 'http://localhost:4000/graphql',
  subscriptions: {
    url: 'ws://localhost:4000/subscriptions',
  },
});

const updateDashboard = (data) => {
  const dashboardElement = document.getElementById('dashboard-metrics');
  if (dashboardElement) {
    dashboardElement.innerText = `Current Metric: ${data.metricValue}`;
  }
};

const subscription = client.subscribe({
  query: `
    subscription DashboardUpdates {
      metrics {
        metricValue
      }
    }
  `,
});

subscription.on('data', (result) => {
  console.log('Dashboard data received:', result.data.metrics);
  updateDashboard(result.data.metrics);
});

subscription.on('error', (error) => {
  console.error('Dashboard subscription error:', error);
});

// Ensure cleanup when the dashboard is no longer needed
// subscription.off();
```

--------------------------------

### SSE Subscription Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/04-advanced/sse-subscriptions.mdx

Demonstrates how to set up and use an SSE subscription with GraphQL Zeus. Requires importing SSESubscription and calling open() to initiate the stream.

```typescript
// SSE - Simpler, HTTP-based
import { SSESubscription } from './zeus';

const sse = SSESubscription('https://api.com/graphql');
const stream = sse('subscription')({ data: { value: true } });
stream.on((data) => console.log(data));
stream.open();
```

--------------------------------

### Thunder Client Usage

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/02-core-concepts/generated-types.mdx

Example of initializing and using the Thunder client with a custom fetch implementation.

```typescript
import { Thunder } from './zeus';

const thunder = Thunder(async (query, variables) => {
  // Custom fetch implementation
  return data;
});

// Same typed interface as Chain
const result = await thunder('query')({
  /* ... */
});
```

--------------------------------

### Valid Header Format Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

Demonstrates the correct `Name:Value` format for passing headers via the command line.

```bash
# ✓ Correct
zeus schema.graphql ./output -h "Authorization:Bearer token"

# ✗ Wrong (space instead of colon)
zeus schema.graphql ./output -h "Authorization Bearer token"
```

--------------------------------

### Deno Output Configuration (--deno)

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/generated-code-guide.md

Example of import statements for Deno environments, using `.ts` extensions.

```typescript
// With .ts extensions for Deno
import { AllTypesProps } from './const.ts';
```

--------------------------------

### WebSocket Subscription Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/04-advanced/sse-subscriptions.mdx

Illustrates how to set up a WebSocket subscription using GraphQL Zeus for bi-directional communication. This is presented for comparison with SSE.

```typescript
// WebSocket - More complex, bi-directional
import { Subscription } from './zeus';

const ws = Subscription('wss://api.com/graphql');
ws('subscription')({ data: { value: true } }).on((data) => {
  console.log(data);
});
```

--------------------------------

### Install GraphQL Zeus with npm

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Use this command to add GraphQL Zeus as a project dependency using npm.

```bash
npm install graphql-zeus
```

--------------------------------

### Install GraphQL Zeus with pnpm

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Use this command to add GraphQL Zeus as a project dependency using pnpm.

```bash
pnpm add graphql-zeus
```

--------------------------------

### Install GraphQL Zeus with yarn

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/installation.mdx

Use this command to add GraphQL Zeus as a project dependency using yarn.

```bash
yarn add graphql-zeus
```

--------------------------------

### Example ResolveTreeSplit Usage

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

Demonstrates how to use TreeToTS.resolveTreeSplit with custom headers and environment settings.

```typescript
import { TreeToTS } from 'graphql-zeus-core';
import { Parser } from 'graphql-js-tree';

const tree = Parser.parseAddExtensions(schemaString);

const split = TreeToTS.resolveTreeSplit({
  tree,
  env: 'node',
  host: 'https://api.example.com/graphql',
  headers: {
    'Authorization': 'Bearer token',
    'X-API-Key': 'secret',
  },
  subscriptions: 'graphql-ws',
});
```

--------------------------------

### Apollo Client Setup

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Configure a new Apollo Client instance with your GraphQL API endpoint and an in-memory cache.

```typescript
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-api.com/graphql',
  cache: new InMemoryCache(),
});
```

--------------------------------

### Browser Output Configuration

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/generated-code-guide.md

Example of import statements for browser environments, omitting `.js` extensions and utilizing native `fetch`.

```typescript
// No .js extensions
import { AllTypesProps } from './const';
// Uses native fetch
```

--------------------------------

### Node.js Output Configuration (--node)

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/generated-code-guide.md

Example of import statements for Node.js environments, including `.js` extensions and potentially using Node-specific APIs.

```typescript
// With .js extensions
import { AllTypesProps } from './const.js';
// May include Node-specific APIs
```

--------------------------------

### React Query Setup

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Configure a QueryClient for React Query and a GraphQLClient instance for making requests. The GraphQLClient is set up with the API endpoint and an authorization header.

```typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GraphQLClient } from 'graphql-request';

const queryClient = new QueryClient();

const graphqlClient = new GraphQLClient('https://api.com/graphql', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});
```

--------------------------------

### Simple Post Creation Mutation

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/03-queries-mutations/mutations.mdx

Example of creating a new post with title, content, and author ID. Specifies the fields to be returned upon successful creation.

```typescript
const result = await chain('mutation')({
  createPost: [
    {
      input: {
        title: 'GraphQL Zeus',
        content: 'Type-safe GraphQL client',
        authorId: '123',
      },
    },
    {
      id: true,
      title: true,
      createdAt: true,
    },
  ],
});
```

--------------------------------

### Import and Initialize GraphQL Zeus Chain

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Basic TypeScript example to import the Chain class and initialize it with a GraphQL endpoint.

```typescript
import { Chain } from './zeus';

const chain = Chain('https://api.com/graphql');
```

--------------------------------

### Example JSON Schema Output Structure

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/api-reference/tree-to-jsonschema.md

Illustrates the basic structure of the generated JSON schema file, showing top-level keys for 'inputs' and 'types'.

```json
{
  "inputs": { ... },
  "types": { ... }
}
```

--------------------------------

### Execute Zeus CLI Commands

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/module-exports.md

Examples of using the Zeus CLI for schema generation and help commands. These commands are executed directly in the terminal.

```bash
zeus schema.graphql ./output --node --esModule
zeus create
zeus --help
```

--------------------------------

### Create New Project and Generate Client

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/api-reference/cli.md

Demonstrates the workflow for creating a new project using `zeus create`, setting up dependencies, and then generating a client from a remote API.

```bash
zeus create
cd my-app
npm install
npm run dev
npx zeus https://api.example.com/graphql ./src/zeus --node
```

--------------------------------

### Scalar Definition Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/types.md

Provides an example of how to define custom encoders and decoders for DateTime and JSON scalars.

```typescript
const scalars: ScalarDefinition = {
  DateTime: {
    encode: (value: Date) => value.toISOString(),
    decode: (value: string) => new Date(value),
  },
  JSON: {
    encode: (value: any) => JSON.stringify(value),
    decode: (value: string) => JSON.parse(value),
  },
};
```

--------------------------------

### Display Help Information

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Show all available commands and options for the Zeus CLI.

```bash
zeus --help
```

--------------------------------

### Gql() Function Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/generated-code-guide.md

Constructs GraphQL query documents from TypeScript selector objects. The example demonstrates building a query for a user with specific fields.

```typescript
const query = Gql("query", {
  user: [
    { id: "123" },
    {
      id: true,
      name: true,
      email: true,
    },
  ],
});
// Returns: "query { user(id: "123") { id name email } }"
```

--------------------------------

### Create New Project with Zeus CLI

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Initiate a new project using the Zeus CLI. This command provides an interactive setup process for selecting project templates.

```bash
zeus create
# Interactive setup with template selection
```

--------------------------------

### Custom Scalar Handling Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/code-generation-pipeline.md

Provides an example of configuring and using custom scalar types, specifically 'DateTime', with encode and decode functions to handle Date objects during GraphQL operations.

```typescript
const scalars = {
  DateTime: {
    encode: (date: Date) => date.toISOString(),
    decode: (str: string) => new Date(str),
  }
};

const result = await Zeus("query", {
  getCreatedAt: true,
}, { scalars });
// result.getCreatedAt is automatically decoded to Date
```

--------------------------------

### Generate Client with All Options

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

A comprehensive example of generating a client from a GraphQL API, including Node.js support, ES modules, subscriptions, typed document nodes, JSON schema generation, and custom headers.

```bash
zeus https://api.example.com/graphql ./src \
  --node \
  --esModule \
  --subscriptions graphql-ws \
  --typedDocumentNode \
  --jsonSchema ./schemas \
  --graphql ./schema.graphql \
  --header "Authorization:Bearer token"
```

--------------------------------

### Basic SSE Subscription Client

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/04-advanced/sse-subscriptions.mdx

Demonstrates how to create an SSE client, establish a subscription stream, and handle incoming data, errors, and connection events. Ensure the correct API endpoint and authorization headers are provided.

```typescript
import { SSESubscription } from './zeus';

// Create SSE client
const sseClient = SSESubscription('https://your-api.com/graphql', {
  headers: {
    Authorization: 'Bearer token',
  },
});

// Create a subscription stream
const stream = sseClient('subscription')({
  messageAdded: {
    id: true,
    content: true,
    author: {
      name: true,
      avatar: true,
    },
    timestamp: true,
  },
});

// Handle incoming data
stream.on((data) => {
  console.log('New message:', data.messageAdded);
});

// Handle errors
stream.error((err) => {
  console.error('Stream error:', err);
});

// Handle connection open
stream.open(() => {
  console.log('SSE connection established');
});

// Handle connection close
stream.off(() => {
  console.log('SSE connection closed');
});

// Close when done
setTimeout(() => {
  stream.close();
}, 60000);
```

--------------------------------

### GraphQL Query String

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Example of a standard GraphQL query string.

```graphql
query { user(id: "1") { id name email } }
```

--------------------------------

### GraphQL Query Syntax

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/README.md

Example of a standard GraphQL query, which is not type-safe.

```graphql
query ($id: String!) {
  usersQuery {
    admin {
      sequenceById(_id: $id) {
        _id
        name
        analytics {
          sentMessages
          sentInvitations
          receivedReplies
          acceptedInvitations
        }
        replies {
          message
          createdAt
          _id
        }
        messages {
          _id
          content
          renderedContent
          sendAfterDays
        }
        tracks {
          _id
          createdAt
          inviteSent
          inviteAccepted
          contact {
            linkedInId
          }
        }
      }
    }
  }
}
```

--------------------------------

### Display Zeus Version

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Check the currently installed version of the Zeus CLI.

```bash
zeus --version
```

--------------------------------

### Run Zeus with Configuration File

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Execute the Zeus CLI using settings defined in the default `zeus.config.json` file.

```bash
zeus
```

--------------------------------

### Build for Netlify Deployment

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Build the project for deployment on Netlify. The .next folder will contain the deployable assets.

```bash
npm run build
# Deploy the .next folder
```

--------------------------------

### Selector Function Usage

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/02-core-concepts/generated-types.mdx

Example of creating and reusing typed selector functions for GraphQL queries.

```typescript
import { Selector } from './zeus';

// Create typed selector
const userFields = Selector('User')({
  id: true,
  name: true,
  email: true,
});

// Reuse in queries
const result = await chain('query')({
  user: [{ id: '123' }, userFields],
  users: [{ first: 10 }, userFields],
});
```

--------------------------------

### Chain Client Usage

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/02-core-concepts/generated-types.mdx

Example of initializing and using the Chain client for typed GraphQL operations.

```typescript
import { Chain } from './zeus';

const chain = Chain('https://api.com/graphql');

// Fully typed operations
const queryResult = await chain('query')({
  /* ... */
});
const mutationResult = await chain('mutation')({
  /* ... */
});
const subscription = chain('subscription')({
  /* ... */
});
```

--------------------------------

### GraphQL Pagination Query

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/first-query.mdx

Example of implementing pagination in a GraphQL query by specifying limit and offset arguments.

```typescript
async function fetchPage(page: number, pageSize: number) {
  return chain('query')({
    users: [
      {
        limit: pageSize,
        offset: page * pageSize,
      },
      {
        id: true,
        name: true,
      },
    ],
  });
}
```

--------------------------------

### Nextra Card Component

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Example of using Nextra's Cards and Card components to highlight features.

```mdx
import {Cards, Card} from 'nextra/components';

<Cards>
  <Card icon="⚡" title="Feature 1" href="/link">
    Description
  </Card>
</Cards>
```

--------------------------------

### Nextra Warning Callout

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/README.md

Example of using Nextra's built-in Callout component for warning messages.

```mdx
<Callout type="warning">This is a warning message</Callout>
```

--------------------------------

### Create New GraphQL Zeus Project

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/api-reference/cli.md

Run the `zeus create` command to interactively set up a new GraphQL Zeus project. This command guides you through selecting a template and naming your project.

```bash
zeus create
# Interactive prompts follow
# ✅ Created "my-app" successfully!
```

--------------------------------

### Generate Client from Multiple Schema Files

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Use glob patterns to include multiple schema files from a directory for client generation.

```bash
zeus "./schemas/**/*.graphql" ./src/zeus
```

--------------------------------

### Generate Client with Basic Authentication

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Use the CLI to generate a client for an API protected by Basic Authentication. Ensure your username and password are correctly encoded.

```bash
zeus https://api.com/graphql ./src/zeus \
  --header "Authorization: Basic $(echo -n user:pass | base64)"
```

--------------------------------

### Using Thunder with Node.js

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/02-core-concepts/thunder.mdx

Integrates Thunder with the 'node-fetch' library for use in Node.js environments. Ensure 'node-fetch' is installed.

```typescript
import fetch from 'node-fetch';
import { Thunder } from './zeus';

const thunder = Thunder(async (query, variables) => {
  const response = await fetch('https://api.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query, variables }),
  });

  return (await response.json()).data;
});
```

--------------------------------

### Set Up WebSocket Subscription (Legacy)

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/integration-patterns.md

Establish a WebSocket subscription for real-time data updates using the legacy subscription method. Includes event listeners for messages and errors.

```typescript
import { useSubscription } from './zeus';

const subscription = useSubscription('subscription', {
  onUserUpdate: [
    { userId: '123' },
    {
      id: true,
      name: true,
      status: true,
    }
  ]
});

subscription.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Updated user:', data);
});

subscription.addEventListener('error', () => {
  console.error('Subscription error');
  subscription.close();
});
```

--------------------------------

### React/Browser Project Configuration

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

Command-line configuration for a React/Browser project using GraphQL Zeus.

```bash
zeus https://api.example.com/graphql ./src/zeus \
  --subscriptions graphql-ws \
  --typedDocumentNode
```

--------------------------------

### package.json Scripts for Build Integration

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Example scripts in `package.json` to integrate Zeus client generation into the build process, including watch mode and pre-build steps.

```json
{
  "scripts": {
    "generate": "zeus https://api.com/graphql ./src/zeus",
    "generate:watch": "nodemon --exec npm run generate",
    "prebuild": "npm run generate",
    "build": "tsc",
    "dev": "npm run generate && ts-node src/index.ts"
  }
}
```

--------------------------------

### Simple Query Generation Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/code-generation-pipeline.md

Demonstrates generating a GraphQL query using Zeus. It shows the input schema, parsing steps, analysis of types, and the final function call to execute the query.

```graphql
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String!
}
```

```plaintext
ParserTree {
  nodes: [
    {
      name: "Query",
      args: [{ name: "user", ... }],
      ...
    },
    {
      name: "User",
      args: [
        { name: "id", ... },
        { name: "name", ... }
      ],
      ...
    }
  ]
}
```

```json
{
  Query: {
    user: { argTypes: { id: "ID!" } }
  },
  User: {
    id: { argTypes: {} },
    name: { argTypes: {} }
  }
}
```

```json
{
  Query: {
    user: "User"
  },
  User: {
    id: "ID",
    name: "String"
  }
}
```

```typescript
type ValueTypes = {
  Query: {
    __typename?: true,
    user?: [
      { id: "ID!" },
      ValueTypes["User"]
    ]
  },
  User: {
    __typename?: true,
    id?: true,
    name?: true
  }
}
```

```typescript
const result = await Zeus("query", {
  user: [
    { id: "123" },
    { id: true, name: true }
  ]
});
// Type: { user?: { id: string; name: string } }
```

--------------------------------

### Generating GraphQL Zeus Client with graphql-ws Subscriptions

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/packages/graphql-zeus/README.md

Provides instructions on generating a GraphQL Zeus client that supports subscriptions using the graphql-ws protocol, including necessary package installation.

```bash
zeus schema.gql ./ --subscriptions graphql-ws
# Add graphql-ws to your project's dependencies
npm install graphql-ws
```

--------------------------------

### Generated UserRole Enum

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/generated-code-guide.md

TypeScript enum generated from a GraphQL enum definition. Example shows usage with a variable.

```graphql
enum UserRole {
  ADMIN
  USER
  GUEST
}
```

```typescript
export enum UserRole {
  ADMIN = "ADMIN",
  USER = "USER",
  GUEST = "GUEST",
}

const role: UserRole = UserRole.ADMIN;
```

--------------------------------

### Zeus Selection Object

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/README.md

Example of building a type-safe GraphQL query using a Zeus selection object in TypeScript.

```typescript
{
  user: [
    { id: "1" },
    { id: true, name: true, email: true }
  ]
}
```

--------------------------------

### Generated Enum Example

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/types.md

Illustrates the conversion of a GraphQL enum definition to a TypeScript enum, maintaining the same name and values.

```typescript
// GraphQL
enum UserRole {
  ADMIN
  USER
  GUEST
}

// Generated TypeScript
enum UserRole {
  ADMIN = 'ADMIN',
  USER = 'USER',
  GUEST = 'GUEST',
}
```

--------------------------------

### Deno Project Configuration

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

Command-line configuration for a Deno project using GraphQL Zeus.

```bash
zeus schema.graphql ./zeus \
  --deno \
  --subscriptions graphql-ws
```

--------------------------------

### Using Composables with Zeus

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/README.md

Example of creating and using a composable function for reusable selection sets in Zeus queries.

```ts
import {
  Gql,
  ComposableSelector,
} from './zeus/index.js';

const withComposable = <T extends ComposableSelector<'Card'>, Z extends T>(id: string, rest: Z | T) =>
  Gql('query')({
    cardById: [{ cardId: id }, rest],
  });
  const c1result = await withComposable('12', {
    id: true,
  });
  const c2result = await withComposable('12', {
    Defense: true,
    Attack: true,
  });
```

--------------------------------

### Query with a Single Variable

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/03-queries-mutations/variables.mdx

Example of a GraphQL query that uses a single variable to filter or identify a specific user by their ID.

```typescript
const result = await chain('query')({
  user: [
    {
      id: $('userId', 'ID!'),
    },
    {
      id: true,
      name: true,
      email: true,
    },
  ],
})({
  userId: '123',
});
```

--------------------------------

### Queries with urql

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/05-integrations/typed-document-node.mdx

Demonstrates how to fetch user data using a Zeus-generated query with urql. Includes handling loading and error states.

```typescript
import { useQuery, useMutation } from 'urql';
import { typedGql } from './zeus';

const GET_USER = typedGql('query')({
  user: [ 
    { id: '$id' }, 
    {
      id: true,
      name: true,
      email: true
    }
  ]
});

function UserProfile({ userId }: { userId: string }) {
  const [result] = useQuery({ 
    query: GET_USER,
    variables: { id: userId },
  });

  const { data, fetching, error } = result;

  if (fetching) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{data.user.name}</h1>
      <p>{data.user.email}</p>
    </div>
  );
}

```

--------------------------------

### Usage of ValueTypes in Queries

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/02-core-concepts/generated-types.mdx

Example demonstrating how to use the ValueTypes structure to construct a GraphQL query with arguments and nested selections.

```typescript
// Using ValueTypes structure
const result = await chain('query')({
  user: [
    { id: '123' }, // Arguments
    {
      id: true, // Select scalar
      name: true,
      posts: {
        // Select nested fields
        title: true,
        content: true,
      },
    },
  ],
});
```

--------------------------------

### Project Folder Structure

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/plan.docs.md

The documentation site will be built using Nextra and Next.js, with a structured folder organization for pages, components, styles, and configuration files.

```tree
docs/
├── .next/
│   # Next.js build output
├── public/
│   ├── images/
│   │   ├── zeus-logo.svg     # Updated vectorized logo
│   │   ├── lightning.svg     # Lightning bolt icon
│   │   ├── mount-olympus.svg # Background graphic
│   │   └── greek-patterns/   # Border patterns
│   └── fonts/
│       └── cinzel/           # Greek-inspired serif font
├── pages/
│   ├── _app.tsx              # Custom app with theme provider
│   ├── _meta.json            # Navigation structure
│   ├── index.mdx             # Landing page
│   ├── getting-started/
│   │   ├── _meta.json
│   │   ├── installation.mdx
│   │   ├── quick-start.mdx
│   │   ├── cli-usage.mdx
│   │   └── first-query.mdx
│   ├── core-concepts/
│   │   ├── _meta.json
│   │   ├── chain-client.mdx
│   │   ├── selectors.mdx
│   │   ├── type-inference.mdx
│   │   ├── thunder.mdx
│   │   └── generated-types.mdx
│   ├── queries-mutations/
│   │   ├── _meta.json
│   │   ├── basic-queries.mdx
│   │   ├── mutations.mdx
│   │   ├── variables.mdx
│   │   ├── aliases.mdx
│   │   └── directives.mdx
│   ├── advanced/
│   │   ├── _meta.json
│   │   ├── interfaces-unions.mdx
│   │   ├── scalars.mdx
│   │   ├── subscriptions.mdx
│   │   ├── sse-subscriptions.mdx
│   │   ├── custom-fetch.mdx
│   │   └── error-handling.mdx
│   ├── integrations/
│   │   ├── _meta.json
│   │   ├── apollo-client.mdx
│   │   ├── react-query.mdx
│   │   ├── urql.mdx
│   │   └── typed-document-node.mdx
│   ├── recipes/
│   │   ├── _meta.json
│   │   ├── authentication.mdx
│   │   ├── pagination.mdx
│   │   ├── file-uploads.mdx
│   │   ├── optimistic-updates.mdx
│   │   ├── real-time-notifications.mdx
│   │   ├── live-dashboards.mdx
│   │   └── testing.mdx
│   ├── api-reference/
│   │   ├── _meta.json
│   │   ├── chain.mdx
│   │   ├── zeus.mdx
│   │   ├── thunder.mdx
│   │   ├── selector.mdx
│   │   ├── subscription.mdx
│   │   ├── sse-subscription.mdx
│   │   └── types.mdx
│   ├── cli/
│   │   ├── _meta.json
│   │   ├── commands.mdx
│   │   ├── configuration.mdx
│   │   └── schema-download.mdx
│   ├── examples/
│   │   ├── _meta.json
│   │   ├── node-typescript.mdx
│   │   ├── react-app.mdx
│   │   ├── next-js.mdx
│   │   └── react-native.mdx
│   ├── migration/
│   │   ├── _meta.json
│   │   ├── from-v4.mdx
│   │   └── from-other-clients.mdx
│   └── community/
│       ├── _meta.json
│       ├── contributing.mdx
│       ├── changelog.mdx
│       └── support.mdx
├── components/
│   ├── CodePlayground.tsx    # Interactive code editor
│   ├── FeatureCard.tsx       # Feature highlights
│   ├── LightningBolt.tsx     # Animated lightning effect
│   ├── OlympusBackground.tsx # Hero section background
│   ├── ComparisonTable.tsx   # Zeus vs others
│   └── TypeVisualization.tsx # Type flow diagrams
├── styles/
│   ├── globals.css           # Global styles
│   └── zeus-theme.css        # Custom Nextra theme
├── theme.config.tsx          # Nextra theme configuration
├── next.config.js            # Next.js configuration
├── tailwind.config.js        # Tailwind configuration
├── tsconfig.json             # TypeScript configuration
└── package.json              # Dependencies

```

--------------------------------

### Creating a GraphQL Subscription Client with Zeus

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/packages/graphql-zeus/README.md

Illustrates how to instantiate a GraphQL Zeus subscription client, including passing authentication headers, and subscribing to messages.

```typescript
// Create a new Subscription with some authentication headers
const wsChain = Subscription('wss://localhost:4000/graphql', {
  get headers() {
    return { Authorization: `Bearer ${getToken()}` };
  },
});

// Subscribe to new messages
wsChain('subscription')({
  message: {
    body: true,
  },
}).on(({ message }) => {
  console.log(message.body);
});
```

--------------------------------

### Generate Client from Local Schema File

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Generate a client using a GraphQL schema file stored locally on your filesystem.

```bash
zeus ./schema.graphql ./src/zeus
```

```bash
zeus ./schema.gql ./src/zeus
```

--------------------------------

### Node.js Backend Configuration

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/_autodocs/configuration.md

Command-line configuration for a Node.js backend project using GraphQL Zeus.

```bash
zeus https://api.example.com/graphql ./src/zeus \
  --node \
  --esModule \
  --subscriptions graphql-ws \
  --constEnums
```

--------------------------------

### Watch Mode Setup with nodemon

Source: https://github.com/graphql-editor/graphql-zeus/blob/master/docs/content/01-getting-started/cli-usage.mdx

Configure `nodemon` to automatically regenerate the GraphQL client whenever schema files change.

```bash
npm install -D nodemon
```