### Basic HTTP Request Examples

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/http-client.md

Demonstrates common HTTP methods (GET, POST, PUT, DELETE) using the configured Axios instance for interacting with APISIX routes.

```typescript
import { req } from '@/config/req';

// GET request
const response = await req.get('/routes');

// POST request
const created = await req.post('/routes', { uri: '/api/users' });

// PUT request
const updated = await req.put('/routes/123', { uri: '/api/users-v2' });

// DELETE request
await req.delete('/routes/123');
```

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

### Labels Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/types-core.md

An example demonstrating how to define labels for a resource with environment, team, and tier tags.

```typescript
labels: {
  env: 'production',
  team: 'backend',
  tier: 'premium'
}
```

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

### Start Development Server

Source: https://github.com/apache/apisix-dashboard/blob/master/docs/en/development.md

Execute this command in the terminal within the Dev Container to start the development server and enable real-time preview of code changes.

```sh
pnpm dev
```

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

### APISIXListResponse Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/types-core.md

An example demonstrating the usage of APISIXListResponse to structure a paginated list of routes.

```typescript
const routes: APISIXListResponse<Route> = {
  total: 42,
  list: [
    { key: '/apisix/routes/1', value: { ... }, ... },
    { key: '/apisix/routes/2', value: { ... }, ... }
  ]
};
```

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

### Example: Updating an Upstream

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Shows an example of using `putUpstreamReq` to modify an existing upstream. The example provides the upstream ID and updated configuration details.

```typescript
const updated = await putUpstreamReq(req, {
  id: 'upstream-123',
  name: 'backend-servers',
  type: 'chash',
  hash_on: 'header',
  key: 'X-User-ID',
  nodes: [
    { host: '192.168.1.10', port: 8080, weight: 1 },
    { host: '192.168.1.11', port: 8080, weight: 1 }
  ]
});

```

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

### Basic Authentication Plugin Configuration

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-consumers.md

Example configuration for the Basic Authentication plugin, including username and password.

```typescript
{
  'basic-auth': {
    username: 'auth-username',
    password: 'auth-password'
  }
}
```

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

### TypeScript Usage Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Demonstrates a complete workflow for managing consumer credentials using provided TypeScript functions.

```APIDOC
## Usage Example

This example shows how to list, retrieve, and update credentials for a consumer.

```typescript
import {
  getCredentialListReq,
  getCredentialReq,
  putCredentialReq
} from '@/apis/credentials';
import { req } from '@/config/req';

// List all credentials for a consumer
const creds = await getCredentialListReq(req, { username: 'john-doe' });
console.log(`Found ${creds.total} credentials`);

// Get a specific credential
if (creds.total > 0) {
  const credId = creds.list[0].value.id;
  const credential = await getCredentialReq(req, 'john-doe', credId);

  // Update the credential
  const updated = await putCredentialReq(req, {
    username: 'john-doe',
    id: credId,
    desc: 'Updated description',
    plugins: {
      'key-auth': {
        key: 'new-key-value'
      }
    }
  });

  console.log(`Credential updated successfully`);
}
```
```

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

### APISIXDetailResponse Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/types-core.md

An example demonstrating the usage of APISIXDetailResponse to structure a route resource.

```typescript
const route: APISIXDetailResponse<Route> = {
  key: '/apisix/routes/route-123',
  value: { id: 'route-123', uri: '/api/users', ... },
  createdIndex: 1234567890,
  modifiedIndex: 1234567899
};
```

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

### Plugin Configuration Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/README.md

Shows how to configure multiple plugins, including rate-limiting, key authentication, and CORS, using a key-value map.

```json
{
  plugins: {
    'rate-limit': {
      count: 100,
      time_window: 60
    },
    'key-auth': {},
    'cors': {
      allow_origins: '*',
      allow_methods: ['GET', 'POST']
    }
  }
}
```

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

### Fetch Plugin Schema Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Example of using the `getPluginSchemaQueryOptions` to fetch and display a plugin's schema in a React component. It handles loading states.

```typescript
import { useQuery } from '@tanstack/react-query';
import { getPluginSchemaQueryOptions } from '@/apis/plugins';

function PluginSchemaViewer({ pluginName }) {
  const { data: schema, isPending } = useQuery(
    getPluginSchemaQueryOptions(pluginName)
  );

  if (isPending) return <div>Loading schema...</div>;

  return (
    <pre>{JSON.stringify(schema, null, 2)}</pre>
  );
}
```

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

### Update Plugin Metadata Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

An example demonstrating how to call `putPluginMetadataReq` to update a plugin's metadata, such as configuring the `request-id` plugin.

```typescript
import { putPluginMetadataReq } from '@/apis/plugins';

const response = await putPluginMetadataReq({
  name: 'request-id',
  config: {
    header_name: 'X-Request-ID',
    include_resp_header: true
  }
});

console.log(`Metadata updated: ${response.data.value.id}`);
```

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

### Typical Plugin Schema Structure Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Illustrates a common structure for a plugin schema, including properties for enabling the plugin and its configuration.

```typescript
{
  type: 'object',
  properties: {
    enable: {
      type: 'boolean',
      description: 'Enable the plugin'
    },
    config: {
      type: 'object',
      properties: {
        key: {
          type: 'string',
          description: 'Configuration key'
        }
      }
    }
  }
}
```

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

### Key Authentication Plugin Configuration

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-consumers.md

Example configuration for the Key Authentication plugin, specifying the API key value.

```typescript
{
  'key-auth': {
    key: 'api-key-value'
  }
}
```

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

### Example Usage of deleteAllRoutes (TypeScript)

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-routes.md

Example of how to call the deleteAllRoutes function and log a confirmation message.

```typescript
await deleteAllRoutes(req);
console.log('All routes deleted');
```

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

### JSON Configuration for Key Authentication

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Example of configuring key-based authentication for a consumer. This snippet shows the structure for the 'key-auth' plugin.

```json
{
  "plugins": {
    "key-auth": {
      "key": "api-key-value-123"
    }
  }
}
```

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

### JSON Configuration for Basic Authentication

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Example of configuring basic username and password authentication. This snippet demonstrates the structure for the 'basic-auth' plugin.

```json
{
  "plugins": {
    "basic-auth": {
      "username": "basic-user",
      "password": "basic-password"
    }
  }
}
```

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

### Expressions (Vars) Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/types-core.md

An example showing how to define APISIX expression arrays for filtering based on HTTP version and cookie values.

```typescript
vars: [
  ['http_version', '==', '2.0'],
  ['cookie_user_type', '==', 'premium']
]
```

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

### PEM Private Key Format Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-ssls.md

Illustrates the required PEM format for private keys. Ensure your private key data adheres to this structure for proper parsing.

```text
-----BEGIN PRIVATE KEY-----
Base64-encoded-key-data
-----END PRIVATE KEY-----
```

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

### Example: Using Immer Producer for Deep Cleaning

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/utilities.md

Shows how to use the `produceDeepCleanEmptyKeys` function with Immer's `produce` to create a new state object with empty keys removed. This is a common pattern for state management.

```typescript
import { produce } from 'immer';
import { produceDeepCleanEmptyKeys } from '@/utils/producer';

const cleaned = produce(data, produceDeepCleanEmptyKeys());

```

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

### Example Usage of deleteAllUpstreams

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Demonstrates how to call the deleteAllUpstreams function with a configured Axios instance.

```typescript
await deleteAllUpstreams(req);
console.log('All upstreams deleted');
```

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

### Basic Server Certificate Setup

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-ssls.md

Configure a basic server certificate for an API endpoint. This includes the certificate, private key, SNI hostname, and supported SSL protocols.

```typescript
{
  cert: `-----BEGIN CERTIFICATE-----
MIIC7TCCAlagAwIBAgI...
-----END CERTIFICATE-----`,
  key: `-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQ...
-----END PRIVATE KEY-----`,
  sni: 'api.example.com',
  snis: ['api.example.com', 'api-v2.example.com'],
  type: 'server',
  ssl_protocols: ['TLSv1.2', 'TLSv1.3']
}
```

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

### Get Plugin Config List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Fetches a list of plugin configurations with support for pagination and filtering.

```typescript
export const getPluginConfigListReq = (
  req: AxiosInstance,
  params: PageSearchType
)
  =>
  req
    .get<unknown, APISIXType['RespPluginConfigList']>
    (API_PLUGIN_CONFIGS, { params })
    .then((v) => v.data);
```

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

### Configure Service Plugins

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-services.md

Enable various plugins like rate-limiting, key authentication, and CORS for a service. Ensure plugins are installed and configured correctly.

```typescript
{
  plugins: {
    'rate-limit': {
      count: 100,
      time_window: 60
    },
    'key-auth': {},
    'cors': {
      allow_origins: '*',
      allow_methods: 'GET,POST'
    }
  }
}
```

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

### JWT Authentication Plugin Configuration

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-consumers.md

Example configuration for the JWT Authentication plugin, specifying the JWT key ID.

```typescript
{
  'jwt-auth': {
    key: 'jwt-key-id'
  }
}
```

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

### Example: Restoring Empty Plugin Configurations

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/utilities.md

Demonstrates using `produceRestoreEmptyPlugins` with Immer's `produce` to ensure that empty plugin configurations, such as an empty object for a plugin, are preserved in the final state. This is crucial when certain plugins require an empty configuration object.

```typescript
import { produce } from 'immer';
import { produceRestoreEmptyPlugins } from '@/utils/producer';

const originalData = {
  name: 'route',
  plugins: { 'key-auth': {} }  // Empty config
};

const final = produce(originalData, produceRestoreEmptyPlugins(originalData));
// Ensures { 'key-auth': {} } is preserved

```

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

### Get List of Protobuf Definitions

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Fetches a paginated list of Protocol Buffer definitions. Requires an Axios instance and pagination parameters.

```typescript
export const getProtoListReq = (req: AxiosInstance, params: PageSearchType) =>
  req
    .get<unknown, APISIXType['RespProtoList']>(API_PROTOS, { params })
    .then((v) => v.data);
```

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

### Example: Creating an Upstream

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Demonstrates how to use the `postUpstreamReq` function to create a new upstream with specified name, type, nodes, and timeout settings. Logs the ID of the created upstream.

```typescript
const upstream = await postUpstreamReq(req, {
  name: 'backend-servers',
  type: 'roundrobin',
  nodes: [
    { host: '192.168.1.10', port: 8080, weight: 1 },
    { host: '192.168.1.11', port: 8080, weight: 1 }
  ],
  timeout: {
    connect: 6,
    send: 6,
    read: 6
  }
});

console.log(`Created upstream: ${upstream.data.value.id}`);

```

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

### Multi-Certificate Setup

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-ssls.md

Configure multiple server certificates to handle different SNI hostnames. This allows serving different certificates for distinct domains from a single configuration.

```typescript
{
  sni: 'api.example.com',
  snis: ['api.example.com', 'api-v2.example.com'],
  certs: [
    '-----BEGIN CERTIFICATE-----\nCert1\n-----END CERTIFICATE-----',
    '-----BEGIN CERTIFICATE-----\nCert2\n-----END CERTIFICATE-----'
  ],
  keys: [
    '-----BEGIN PRIVATE KEY-----\nKey1\n-----END PRIVATE KEY-----',
    '-----BEGIN PRIVATE KEY-----\nKey2\n-----END PRIVATE KEY-----'
  ]
}
```

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

### React Query Integration for Plugin List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Demonstrates how to use @tanstack/react-query hooks with `getPluginsListQueryOptions` to fetch plugin list data. Includes examples for both `useQuery` and `useSuspenseQuery`.

```typescript
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { getPluginsListQueryOptions } from '@/apis/plugins';

// With useQuery
const { data, isLoading } = useQuery(getPluginsListQueryOptions());

// With useSuspenseQuery (requires Suspense boundary)
const data = useSuspenseQuery(getPluginsListQueryOptions()).data;
```

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

### Get Global Rule List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a list of all global rules. Requires a configured Axios instance.

```typescript
export const getGlobalRuleListReq = (req: AxiosInstance) =>
  req
    .get<unknown, APISIXType['RespGlobalRuleList']>(API_GLOBAL_RULES)
    .then((v) => v.data);
```

```typescript
import { getGlobalRuleListReq } from '@/apis/global_rules';

const rules = await getGlobalRuleListReq(req);
rules.list.forEach(rule => {
  console.log(`Global plugins: ${Object.keys(rule.value.plugins)}`);
});
```

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

### Example Usage of getCredentialListReq

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Demonstrates how to use the getCredentialListReq function to fetch credentials and process the response, including handling cases with no credentials found.

```typescript
import { getCredentialListReq } from '@/apis/credentials';
import { req } from '@/config/req';

const response = await getCredentialListReq(req, { username: 'john-doe' });

if (response.total === 0) {
  console.log('No credentials for this consumer');
} else {
  response.list.forEach(cred => {
    console.log(`Credential ID: ${cred.value.id}`);
    console.log(`Plugins: ${Object.keys(cred.value.plugins || {})}`);
  });
}

```

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

### PEM Certificate Format Example

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-ssls.md

Illustrates the required PEM format for certificates. Ensure your certificate data adheres to this structure for proper parsing.

```text
-----BEGIN CERTIFICATE-----
Base64-encoded-certificate-data
-----END CERTIFICATE-----
```

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

### Making API Requests

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/README.md

Demonstrates common HTTP methods (GET, POST, PUT, DELETE) using the pre-configured `req` Axios instance. Ensure `req` and `API_ROUTES` are imported.

```typescript
import { req } from '@/config/req';
import { API_ROUTES } from '@/config/constant';

// List with pagination
const routes = await req.get(API_ROUTES, {
  params: { page: 1, page_size: 10 }
});

// Get single
const route = await req.get(`${API_ROUTES}/route-123`);

// Create
const created = await req.post(API_ROUTES, {
  uri: '/api/users',
  methods: ['GET', 'POST'],
  upstream_id: 'upstream-1'
});

// Update
const updated = await req.put(`${API_ROUTES}/route-123`, {
  uri: '/api/users-v2'
});

// Delete
await req.delete(`${API_ROUTES}/route-123`);
```

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

### JSON Configuration for JWT Authentication

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Example of configuring JSON Web Token (JWT) authentication. This snippet shows the required 'key' and 'algorithm' for the 'jwt-auth' plugin.

```json
{
  "plugins": {
    "jwt-auth": {
      "key": "jwt-secret-key",
      "algorithm": "HS256"
    }
  }
}
```

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

### Service Discovery Configuration

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/README.md

Example configuration for upstream service discovery using Eureka. Specifies the discovery type and service name.

```json
{
  discovery_type: 'eureka',
  service_name: 'my-service',
  discovery_args: { /* discovery-specific */ }
}
```

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

### Get Plugin Metadata Query Options

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Creates React Query options for fetching plugin metadata. Pass the plugin name and optional custom headers. The query key includes the plugin name.

```typescript
export const getPluginMetadataQueryOptions = (
  plugin_name: string,
  headers?: AxiosRequestConfig<unknown>['headers']
)
  =>
  queryOptions({
    queryKey: ['plugin_metadata', plugin_name],
    queryFn: () =>
      req
        .get<unknown, APISIXType['RespPluginMetadataDetail']>(
          `${API_PLUGIN_METADATA}/${plugin_name}`,
          { headers }
        )
        .then((v) => v.data),
  });
```

```typescript
const { data } = useQuery(
  getPluginMetadataQueryOptions('log-rotate')
);

console.log(`Metadata ID: ${data?.value.id}`);
```

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

### Get Service List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-services.md

Retrieves a paginated list of services. Pass pagination parameters like page number and size.

```typescript
export const getServiceListReq = (req: AxiosInstance, params: PageSearchType) =>
  req
    .get<unknown, APISIXType['RespServiceList']>(API_SERVICES, {
      params,
    })
    .then((v) => v.data);
```

```typescript
import { getServiceListReq } from '@/apis/services';
import { req } from '@/config/req';

const response = await getServiceListReq(req, {
  page: 1,
  page_size: 10,
  name: 'payment-service'
});

response.list.forEach(service => {
  console.log(`Service: ${service.value.name}`);
});
```

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

### Example APISIX Error Response

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/http-client.md

Illustrates a typical JSON structure for an error response from APISIX, containing an error message.

```json
{
  "error_msg": "stream mode is disabled"
}
```

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

### JSON Configuration for OAuth 2.0 Authentication

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Example of configuring OAuth 2.0 authentication. This snippet includes the necessary 'client_id' and 'client_secret' for the 'oauth2' plugin.

```json
{
  "plugins": {
    "oauth2": {
      "client_id": "client-id-value",
      "client_secret": "client-secret-value"
    }
  }
}
```

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

### Type-Safe GET Request

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/http-client.md

Demonstrates a type-safe GET request using TypeScript generics. Specify the expected response type for enhanced safety.

```typescript
// Typed GET
const response = await req.get<undefined, APISIXType['RespRouteList']>(
  '/routes', 
  { params } 
);
```

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

### Fetch and Display Plugin List using React Query

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Demonstrates how to use the `getPluginsListQueryOptions` to fetch plugin names and display them in a list. Assumes `@tanstack/react-query` is set up.

```typescript
import { useQuery } from '@tanstack/react-query';
import { getPluginsListQueryOptions } from '@/apis/plugins';

function PluginList() {
  const { data: pluginNames, isPending } = useQuery(getPluginsListQueryOptions());

  if (isPending) return <div>Loading plugins...</div>;

  return (
    <ul>
      {pluginNames?.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}
```

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

### Get Stream Route by ID

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a specific stream route by its unique identifier.

```typescript
export const getStreamRouteReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespStreamRouteDetail']>
    (`${API_STREAM_ROUTES}/${id}`)
    .then((v) => v.data);
```

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

### Get Plugin Config by ID

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a specific plugin configuration by its unique identifier.

```typescript
export const getPluginConfigReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespPluginConfigDetail']>
    (`${API_PLUGIN_CONFIGS}/${id}`)
    .then((v) => v.data);
```

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

### File Distribution Overview

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/MANIFEST.md

This snippet shows the distribution of files within the project, indicating their size, percentage of total size, and a brief description of their content. It helps in understanding the project's structure and the relative importance of different modules.

```text
README.md              13 KB (9%)   — Entry point
api-*.md              51 KB (36%)   — API reference
types-*.md            19 KB (14%)   — Type definitions
http-client.md         8 KB (5%)    — HTTP setup
constants.md           8 KB (5%)    — Configuration
utilities.md           9 KB (6%)    — Helpers
api-other-modules.md  11 KB (8%)    — Additional APIs
MANIFEST.md           ~12 KB (8%)    — This file
```

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

### Get Stream Route List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Fetches a list of stream routes. Supports filtering by service_id.

```typescript
export const getStreamRouteListReq = (
  req: AxiosInstance,
  params: WithServiceIdFilter
)
  =>
  req
    .get<unknown, APISIXType['RespStreamRouteList']>(API_STREAM_ROUTES, {
      params,
    })
    .then((v) => v.data);
```

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

### Get Consumer List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-consumers.md

Retrieves a paginated list of consumers. Use this to fetch multiple consumers with pagination.

```typescript
export const getConsumerListReq = (req: AxiosInstance, params: PageSearchType) =>
  req
    .get<unknown, APISIXType['RespConsumerList']>(API_CONSUMERS, {
      params,
    })
    .then((v) => v.data);
```

```typescript
import { getConsumerListReq } from '@/apis/consumers';
import { req } from '@/config/req';

const response = await getConsumerListReq(req, {
  page: 1,
  page_size: 10
});

console.log(`Total consumers: ${response.total}`);
response.list.forEach(consumer => {
  console.log(`Consumer: ${consumer.value.username}`);
});
```

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

### Jotai Store Integration for HTTP Client

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/http-client.md

Shows how to integrate the HTTP client with Jotai for state management. It demonstrates retrieving the admin key and setting a state to open a settings modal on 401 Unauthorized errors.

```typescript
import { getDefaultStore } from 'jotai';
import { adminKeyAtom, isSettingsOpenAtom } from '@/stores/global';

// Get current admin key
const adminKey = getDefaultStore().get(adminKeyAtom);

// On 401 Unauthorized, open settings modal
getDefaultStore().set(isSettingsOpenAtom, true);
```

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

### getGlobalRuleListReq

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a list of all global rules configured in APISIX. This is useful for getting an overview of all applied global plugins.

```APIDOC
## GET /apisix/admin/global_rules

### Description
Retrieves a list of all global rules. This endpoint allows you to fetch all the global configurations applied across your APISIX instance.

### Method
GET

### Endpoint
/apisix/admin/global_rules

### Parameters
#### Query Parameters
None

### Request Example
```typescript
import { getGlobalRuleListReq } from '@/apis/global_rules';

// Assuming 'req' is a configured Axios instance
const rules = await getGlobalRuleListReq(req);
rules.list.forEach(rule => {
  console.log(`Global plugins: ${Object.keys(rule.value.plugins)}`);
});
```

### Response
#### Success Response (200)
- **list** (array) - An array of GlobalRule objects.
  - **id** (string) - The unique identifier for the global rule.
  - **value** (object) - Contains the configuration for the global rule.
    - **plugins** (object) - An object where keys are plugin names and values are plugin configurations.

#### Response Example
```json
{
  "list": [
    {
      "id": "global-rule-1",
      "value": {
        "plugins": {
          "rate-limit": {
            "count": 100,
            "time_window": 60
          }
        }
      }
    }
  ],
  "count": 1
}
```
```

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

### Get Upstream List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Retrieves a paginated list of upstreams. Requires a configured Axios instance and pagination parameters.

```typescript
export const getUpstreamListReq = (
  req: AxiosInstance,
  params: PageSearchType
) =>
  req
    .get<undefined, APISIXType['RespUpstreamList']>(API_UPSTREAMS, { params })
    .then((v) => v.data);
```

```typescript
import { getUpstreamListReq } from '@/apis/upstreams';
import { req } from '@/config/req';

const response = await getUpstreamListReq(req, {
  page: 1,
  page_size: 10
});

console.log(`Found ${response.total} upstreams`);
```

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

### Full Consumer Credential Workflow

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-credentials.md

Demonstrates listing all credentials for a consumer, retrieving a specific credential, and updating it. Requires importing necessary functions and configuration.

```typescript
import {
  getCredentialListReq,
  getCredentialReq,
  putCredentialReq
} from '@/apis/credentials';
import { req } from '@/config/req';

// List all credentials for a consumer
const creds = await getCredentialListReq(req, { username: 'john-doe' });
console.log(`Found ${creds.total} credentials`);

// Get a specific credential
if (creds.total > 0) {
  const credId = creds.list[0].value.id;
  const credential = await getCredentialReq(req, 'john-doe', credId);

  // Update the credential
  const updated = await putCredentialReq(req, {
    username: 'john-doe',
    id: credId,
    desc: 'Updated description',
    plugins: {
      'key-auth': {
        key: 'new-key-value'
      }
    }
  });

  console.log(`Credential updated successfully`);
}
```

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

### Get Secret List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a paginated list of secret manager configurations. Requires an Axios instance and pagination parameters.

```typescript
export const getSecretListReq = (req: AxiosInstance, params: PageSearchType) =>
  req
    .get<unknown, APISIXType['RespSecretList']>(API_SECRETS, {
      params,
    })
    .then((v) => v.data);
```

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

### Get Consumer Group List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a paginated list of consumer groups. Requires an Axios instance and pagination parameters.

```typescript
export const getConsumerGroupListReq = (
  req: AxiosInstance,
  params: PageSearchType
) =>
  req
    .get<unknown, APISIXType['RespConsumerGroupList']>(
      API_CONSUMER_GROUPS,
      { params }
    )
    .then((v) => v.data);
```

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

### Get Single Upstream

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Retrieves details for a specific upstream by its ID. Requires a configured Axios instance and the upstream ID.

```typescript
export const getUpstreamReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespUpstreamDetail']>(`${API_UPSTREAMS}/${id}`)
    .then((v) => v.data);
```

```typescript
const upstream = await getUpstreamReq(req, 'upstream-123');
console.log(`Upstream type: ${upstream.value.type}`); // 'roundrobin', 'chash', etc.
console.log(`Nodes: ${upstream.value.nodes.length}`);
```

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

### Get Service by ID

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-services.md

Retrieves a single service by its unique identifier. Requires a configured Axios instance and the service ID.

```typescript
export const getServiceReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespServiceDetail']>(`${API_SERVICES}/${id}`)
    .then((v) => v.data);
```

```typescript
const service = await getServiceReq(req, 'service-123');
console.log(`Service name: ${service.value.name}`);
console.log(`Upstream ID: ${service.value.upstream_id}`);
```

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

### Serialize Simple Parameters

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/http-client.md

Demonstrates how to send simple key-value pairs as URL parameters. The parameters are appended to the URL in a query string format.

```typescript
// Simple parameters
req.get('/routes', { params: { page: 1, page_size: 10 } });
// URL: /routes?page=1&page_size=10
```

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

### Fetch and Display HTTP Plugins with Schema using React Query

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Demonstrates using `getPluginsListWithSchemaQueryOptions` to retrieve HTTP plugins that have 'schema' metadata. Displays the names of these plugins.

```typescript
import { useQuery } from '@tanstack/react-query';
import { getPluginsListWithSchemaQueryOptions } from '@/apis/plugins';

function HttpPluginsWithSchema() {
  const { data } = useQuery(
    getPluginsListWithSchemaQueryOptions({
      subsystem: 'http',
      schema: 'schema'
    })
  );

  return (
    <div>
      <p>Plugins with schema: {data?.names.join(', ')}</p>
    </div>
  );
}
```

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

### Clone and Open APISIX Dashboard Project

Source: https://github.com/apache/apisix-dashboard/blob/master/docs/en/development.md

Clone the APISIX Dashboard repository and open it in VS Code to begin development.

```sh
git clone https://github.com/apache/apisix-dashboard.git
cd apisix-dashboard
code .
```

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

### getPluginsListQueryOptions

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Creates a React Query query options object for fetching the list of all available plugins. This function is useful for displaying a list of plugin names.

```APIDOC
## getPluginsListQueryOptions

### Description
Creates a React Query query options object for fetching the list of all available plugins.

### Method
GET

### Endpoint
/api/plugins/list

### Parameters
None

### Request Example
```typescript
import { useQuery } from '@tanstack/react-query';
import { getPluginsListQueryOptions } from '@/apis/plugins';

function PluginList() {
  const { data: pluginNames, isPending } = useQuery(getPluginsListQueryOptions());

  if (isPending) return <div>Loading plugins...</div>;

  return (
    <ul>
      {pluginNames?.map(name => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}
```

### Response
#### Success Response (200)
- **data** (string[]) - A list of available plugin names.

#### Response Example
```json
["proxy-rewrite", "limit-conn", "api-breaker"]
```
```

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

### Get Specific Secret

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves details for a specific secret manager configuration by its ID. Requires an Axios instance and the secret ID.

```typescript
export const getSecretReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespSecretDetail']>(`${API_SECRETS}/${id}`)
    .then((v) => v.data);
```

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

### Handling Credentials Errors

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Shows how to fetch credentials, ensuring an empty list is returned on 404 or connection errors, preventing exceptions.

```typescript
const creds = await getCredentialListReq(req, { username });
// Never throws on missing credentials endpoint
```

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

### Get Specific Consumer Group

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves details for a specific consumer group by its ID. Requires an Axios instance and the group ID.

```typescript
export const getConsumerGroupReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespConsumerGroupDetail']>
     컨스트 API_CONSUMER_GROUPS = '/consumer-groups';
    `${API_CONSUMER_GROUPS}/${id}`
    )
    .then((v) => v.data);
```

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

### Get Single Global Rule

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a specific global rule by its ID. Requires a configured Axios instance and the rule ID.

```typescript
export const getGlobalRuleReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespGlobalRuleDetail']>(
      `${API_GLOBAL_RULES}/${id}`
    )
    .then((v) => v.data);
```

```typescript
const rule = await getGlobalRuleReq(req, 'global-rule-1');
console.log(rule.value.plugins);
```

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

### Get Consumer by Username

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-consumers.md

Retrieves a single consumer's details using their username. Use this to fetch information for a specific consumer.

```typescript
export const getConsumerReq = (req: AxiosInstance, username: string) =>
  req
    .get<unknown, APISIXType['RespConsumerDetail']>(
      `${API_CONSUMERS}/${username}`
    )
    .then((v) => v.data);
```

```typescript
const consumer = await getConsumerReq(req, 'john-doe');
console.log(`Consumer desc: ${consumer.value.desc}`);
console.log(`Group ID: ${consumer.value.group_id}`);
console.log(`Plugins: ${Object.keys(consumer.value.plugins || {})}`);
```

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

### Project File Structure

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/MANIFEST.md

Lists the directory structure for the output of the APISIX Dashboard project documentation. This helps in navigating and locating specific documentation files.

```text
output/
├── README.md                  — START HERE
├── MANIFEST.md                — This file
├── api-routes.md
├── api-upstreams.md
├── api-services.md
├── api-consumers.md
├── api-plugins.md
├── api-credentials.md
├── api-ssls.md
├── api-other-modules.md
├── types-core.md
├── types-resources.md
├── http-client.md
├── constants.md
└── utilities.md
```

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

### Protos

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/constants.md

Constants for managing Protocol Buffer definitions.

```APIDOC
## GET /protos

### Description
List all Protocol Buffer definitions.

### Method
GET

### Endpoint
/apisix/admin/protos

## GET /protos/{id}

### Description
Retrieve a specific Protocol Buffer definition by its ID.

### Method
GET

### Endpoint
/apisix/admin/protos/{id}

## POST /protos

### Description
Create a new Protocol Buffer definition.

### Method
POST

### Endpoint
/apisix/admin/protos

## PUT /protos/{id}

### Description
Update an existing Protocol Buffer definition by its ID.

### Method
PUT

### Endpoint
/apisix/admin/protos/{id}

## DELETE /protos/{id}

### Description
Delete a Protocol Buffer definition by its ID.

### Method
DELETE

### Endpoint
/apisix/admin/protos/{id}
```

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

### Get Specific Protobuf Definition

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Retrieves a single Protocol Buffer definition by its ID. Requires an Axios instance and the definition's ID.

```typescript
export const getProtoReq = (req: AxiosInstance, id: string) =>
  req
    .get<unknown, APISIXType['RespProtoDetail']>(`${API_PROTOS}/${id}`)
    .then((v) => v.data);
```

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

### Create React Query Options for Plugin List

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Generates React Query options to fetch a list of all available APISIX plugin names. Use this when you need a simple list of plugin identifiers.

```typescript
export const getPluginsListQueryOptions = () => {
  return queryOptions({
    queryKey: ['plugins-list'],
    queryFn: () =>
      req
        .get<unknown, APISIXType['RespPluginList']>(API_PLUGINS_LIST)
        .then((v) => v.data),
  });
};
```

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

### Plugins

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/constants.md

Constants for retrieving information about available plugins and their schemas.

```APIDOC
## GET /plugins

### Description
Get information about all available plugins and their schemas.

### Method
GET

### Endpoint
/apisix/admin/plugins

## GET /plugins/list

### Description
Get a simple list of all available plugin names.

### Method
GET

### Endpoint
/apisix/admin/plugins/list
```

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

### Get Consumer Credentials

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/constants.md

Retrieves credentials for a specific consumer using the API_CREDENTIALS function. The 'req' object must be set up for API calls.

```typescript
import { API_CREDENTIALS } from '@/config/constant';

const credentials = await req.get(
  API_CREDENTIALS('john-doe')
);
```

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

### Configure Embedded Service Upstream

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-services.md

Embed upstream configuration directly within the service definition. Useful for unique or simple upstream setups.

```typescript
// Or embed upstream inline
{
  upstream: {
    type: 'roundrobin',
    nodes: [
      { host: '192.168.1.10', port: 8080, weight: 1 }
    ]
  }
}
```

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

### Create Protobuf Definition

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Creates a new Protocol Buffer definition. Requires an Axios instance and the new definition data.

```typescript
export const postProtoReq = (
  req: AxiosInstance,
  data: APISIXType['ProtoPost']
)
  =>
  req.post<APISIXType['ProtoPost'], APISIXType['RespProtoDetail']>(
    API_PROTOS,
    data
  );
```

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

### Create Secret

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Creates a new secret manager configuration. Requires an Axios instance and the secret data. Example shows creating a Vault secret.

```typescript
export const postSecretReq = (
  req: AxiosInstance,
  data: Partial<APISIXType['Secret']>
) =>
  req.post<Partial<APISIXType['Secret']>, APISIXType['RespSecretDetail']>
    (API_SECRETS,
    data
  );

// Create Vault secret
const secret = await postSecretReq(req, {
  manager: 'vault',
  uri: 'https://vault.example.com',
  prefix: 'apisix/',
  token: 'hvs.XXXXXX'
});
```

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

### Service Discovery Configuration Object

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-upstreams.md

Defines parameters for service discovery, including the discovery type, service name, and discovery-specific arguments.

```typescript
{
  discovery_type: string;    // Service discovery type
  service_name: string;      // Service name
  discovery_args: Record;    // Discovery-specific arguments
}
```

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

### Create Plugin Config

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Creates a new plugin configuration with the provided data.

```typescript
export const postPluginConfigReq = (
  req: AxiosInstance,
  data: APISIXType['PluginConfigPost']
)
  =>
  req.post<
    APISIXType['PluginConfigPost'],
    APISIXType['RespPluginConfigDetail']
  >(API_PLUGIN_CONFIGS, data);
```

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

### Common API Request Patterns

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Standard patterns for interacting with API resources including listing with pagination, getting a single resource, creating, updating, and deleting.

```typescript
// List with pagination
getXxxListReq(req, { page, page_size, name, ... })

// Get single resource
getXxxReq(req, id)

// Create
postXxxReq(req, data)

// Update (extracts id from data)
putXxxReq(req, dataWithId)

// Delete all (batch with pagination)
deleteAllXxxs(req)
```

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

### getPluginsListWithSchemaQueryOptions

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Creates a React Query query options object for fetching plugins with their schema metadata. This is useful for retrieving plugins based on specific schema types within different subsystems.

```APIDOC
## getPluginsListWithSchemaQueryOptions

### Description
Creates a React Query query options object for fetching plugins with their schema metadata. Allows filtering by subsystem and schema type.

### Method
GET

### Endpoint
/api/plugins

### Parameters
#### Query Parameters
- **subsystem** (string) - Optional - Subsystem to query (http or stream).
- **schema** (string) - Optional - Schema type to filter (default: 'schema'). Possible values: 'schema', 'consumer_schema', 'metadata_schema'.

### Request Example
```typescript
import { useQuery } from '@tanstack/react-query';
import { getPluginsListWithSchemaQueryOptions } from '@/apis/plugins';

function HttpPluginsWithSchema() {
  const { data } = useQuery(
    getPluginsListWithSchemaQueryOptions({
      subsystem: 'http',
      schema: 'schema'
    })
  );

  return (
    <div>
      <p>Plugins with schema: {data?.names.join(', ')}</p>
    </div>
  );
}
```

### Response
#### Success Response (200)
- **names** (string[]) - A list of plugin names that match the schema criteria.
- **originObj** (object) - The original response object containing all plugin data.

#### Response Example
```json
{
  "names": ["proxy-rewrite", "prometheus"],
  "originObj": {
    "proxy-rewrite": {
      "schema": { ... },
      "consumer_schema": { ... },
      "metadata_schema": { ... }
    },
    "prometheus": {
      "schema": { ... },
      "consumer_schema": { ... },
      "metadata_schema": { ... }
    }
  }
}
```
```

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

### postProtoReq

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-other-modules.md

Creates a new Protocol Buffer definition.

```APIDOC
## POST /protos

### Description
Creates a new Protocol Buffer definition.

### Method
POST

### Endpoint
/protos

### Parameters
#### Request Body
- **data** (APISIXType['ProtoPost']) - Required - The Protocol Buffer definition object to create.

### Response
#### Success Response (200)
- **data** (APISIXType['RespProtoDetail']) - The newly created Protocol Buffer definition.

#### Response Example
{
  "example": "{\"id\": \"string\", \"name\": \"string\", \"content\": \"string\", \"create_time\": 0, \"update_time\": 0 }"
}
```

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

### Create Service

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-services.md

Creates a new service with the provided data. This endpoint is used to register new services, specifying their name, description, upstream, and any necessary plugins.

```APIDOC
## POST /services

### Description
Creates a new service.

### Method
POST

### Endpoint
`/services`

### Parameters
#### Request Body
- **data** (ServicePostType) - Required - Service data (without id, create_time, update_time).
  - **name** (string) - Required - The name of the service.
  - **desc** (string) - Optional - A description for the service.
  - **upstream_id** (string) - Required - The ID of the associated upstream.
  - **plugins** (object) - Optional - Configuration for plugins.

### Request Example
```json
{
  "name": "user-service",
  "desc": "Manages user operations",
  "upstream_id": "upstream-789",
  "plugins": {
    "key-auth": {}
  }
}
```

### Response
#### Success Response (200)
- **value** (Service) - The newly created service object, including its generated ID.

#### Response Example
```json
{
  "code": 0,
  "message": "Success",
  "value": {
    "id": "service-abc",
    "name": "user-service",
    "desc": "Manages user operations",
    "upstream_id": "upstream-789",
    "plugins": {
      "key-auth": {}
    },
    "create_time": 1678886400,
    "update_time": 1678886400
  }
}
```
```

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

### APISIXDetailResponse Type Definition

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/types-core.md

Defines the structure for wrapping a single resource with metadata, including its key, value, and creation/modification indices. Used for single resource GET operations.

```typescript
type APISIXDetailResponse<T> = {
  key: string;              // Resource key/path
  value: T;                 // Resource value
  createdIndex: number;     // Creation index
  modifiedIndex: number;    // Modification index
};
```

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

### List Routes with Pagination

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/constants.md

Fetches a list of routes using API_ROUTES and a minimum page size. Ensure 'req' is properly configured for API requests.

```typescript
import { API_ROUTES, PAGE_SIZE_MIN } from '@/config/constant';
import { req } from '@/config/req';

const response = await req.get(API_ROUTES, {
  params: { page: 1, page_size: PAGE_SIZE_MIN }
});
```

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

### Example: Deep Cleaning an Object

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/utilities.md

Demonstrates how to use `deepCleanEmptyKeys` to remove undefined and null values from an object, including nested properties. The result is a cleaned object with only defined properties.

```typescript
import { deepCleanEmptyKeys } from '@/utils/producer';

const data = {
  name: 'route',
  desc: undefined,
  plugins: { 'key-auth': {} },
  empty_field: null
};

const cleaned = deepCleanEmptyKeys(data);
// Result: { name: 'route', plugins: { 'key-auth': {} } }

```

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

### Create React Query Options for Plugins with Schema

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/api-plugins.md

Generates React Query options to fetch APISIX plugins along with their specified schema metadata. Useful for filtering plugins based on schema type.

```typescript
export const getPluginsListWithSchemaQueryOptions = (
  props: APISIXType['PluginsQuery'] & NeedPluginSchema = { schema: 'schema' }
) => {
  const { subsystem, schema } = props;
  return queryOptions({
    queryKey: ['plugins-list-with-schema', subsystem, schema],
    queryFn: () =>
      req
        .get<unknown, APISIXType['RespPlugins']>(API_PLUGINS, {
          params: { subsystem, all: true },
        })
        .then((v) => {
          const data = Object.entries(v.data);
          const names = [];
          for (const [name, config] of data) {
            if (config[schema]) {
              names.push(name);
            }
          }
          return { names, originObj: v.data };
        }),
  });
};
```

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

### Services

Source: https://github.com/apache/apisix-dashboard/blob/master/_autodocs/constants.md

Constants for managing shared service configurations.

```APIDOC
## GET /services

### Description
List all services.

### Method
GET

### Endpoint
/apisix/admin/services

## GET /services/{id}

### Description
Retrieve a specific service by its ID.

### Method
GET

### Endpoint
/apisix/admin/services/{id}

## POST /services

### Description
Create a new service.

### Method
POST

### Endpoint
/apisix/admin/services

## PUT /services/{id}

### Description
Update an existing service by its ID.

### Method
PUT

### Endpoint
/apisix/admin/services/{id}

## DELETE /services/{id}

### Description
Delete a service by its ID.

### Method
DELETE

### Endpoint
/apisix/admin/services/{id}
```