React CCM GraphQL Client (WIP)

GraphQL -> GQL

TypeScript -> TS

GraphQL + TypeScript -> graphql-codegen

This package exposes Harness CCM GraphQL APIs as typed @tanstack/react-query hooks, generated from the CCM GraphQL schema using @graphql-codegen/cli.

It is a companion to @harnessio/react-ccm-service-client — that package covers REST endpoints; this one covers the GraphQL endpoint (/ccm/api/graphql).

Package Structure

packages/ccm-graphql-client/
├── schema.graphql          # CCM GraphQL schema (source of truth — update when schema changes)
├── queries/                # .gql query/mutation files (one per operation)
├── codegen.ts              # graphql-codegen config
├── package.json
├── tsconfig.json
└── src/
    ├── index.ts            # Exports CCMGraphQLClient class + all generated hooks
    ├── fetcher.ts          # Custom fetch implementation wired to CCMGraphQLClient config
    └── services/
        └── index.ts        # Auto-generated — DO NOT edit manually

How to Generate and Build

Generate hooks from schema + queries:

yarn generate

Full build (generate + compile):

yarn build

src/services/index.ts is auto-generated. Never edit it by hand — update schema.graphql or .gql files and re-run yarn generate.

Initializing the Client

Before using any hook, initialize CCMGraphQLClient once at app startup:

import { CCMGraphQLClient } from '@harnessio/react-ccm-graphql-client'

new CCMGraphQLClient({
  urlInterceptor: (url) => window.getApiBaseUrl(`/ccm/api/${url}`),
  getRequestHeaders: () => ({
    'harness-account': accountId
  }),
  responseInterceptor: (response) => {
    if (response.status === 401) {
      on401Handler()
    }
    return response
  }
})

CCMGraphQLClientCallbacks

| Field | Type | Required | Description | |---|---|---|---| | urlInterceptor | (url: string) => string | Yes | Receives "graphql" and must return the full endpoint URL including account query params | | getRequestHeaders | () => Record<string, string> | Yes | Returns headers added to every request (auth, account, etc.) | | responseInterceptor | (response: Response) => Response | No | Called after every response — use for 401 handling |

Using Hooks

Generated hooks follow the @tanstack/react-query pattern:

import { useFetchAllPerspectivesQuery } from '@harnessio/react-ccm-graphql-client'

const { data, isLoading, error } = useFetchAllPerspectivesQuery({
  folderId: props.defaultFolderId,
  pageNo: 0,
  pageSize: 100
})

All available hooks are exported from the package root.

Platform UI Integration Plan

Platform UI (apps/cacm) already uses @harnessio/react-ccm-service-client. These are the steps to add GraphQL support.

Step 1 — Build and publish via yalc (in react-api-client)

cd packages/ccm-graphql-client
yarn install
yarn build
yalc publish

Step 2 — Add to platform UI cacm app

cd /path/to/platformUI
yalc add @harnessio/react-ccm-graphql-client
pnpm install
pnpm add graphql @tanstack/react-query  # if not already in cacm/package.json

Step 3 — Initialize the client alongside CCMServiceAPIClient

In apps/cacm/src/init-client.ts, add the GraphQL client init next to the existing REST client:

import { CCMServiceAPIClient } from '@harnessio/react-ccm-service-client'
import { CCMGraphQLClient } from '@harnessio/react-ccm-graphql-client'

export const useOpenApiClients = (accountId: string) => {
  if (!accountId) return

  new CCMServiceAPIClient({
    urlInterceptor(url) {
      return window.getApiBaseUrl(`/ccm/api${url}`)
    },
    requestInterceptor: getRequestInterceptor(accountId),
    responseInterceptor: handle401Response
  })

  new CCMGraphQLClient({
    urlInterceptor: (url) =>
      window.getApiBaseUrl(`/ccm/api/${url}?accountIdentifier=${accountId}&routingId=${accountId}`),
    getRequestHeaders: () => ({ 'harness-account': accountId }),
    responseInterceptor: handle401Response
  })
}

Step 4 — Use a hook in a component

import { useFetchAllPerspectivesQuery } from '@harnessio/react-ccm-graphql-client'

export const PerspectiveList = () => {
  const { data, isLoading } = useFetchAllPerspectivesQuery({
    folderId: '',
    pageNo: 0,
    pageSize: 20,
    filters: [],
    sortCriteria: { sortOrder: 'ASCENDING', sortType: 'NAME' },
    searchKey: '',
    viewIds: []
  })

  if (isLoading) return <span>Loading...</span>
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

Step 5 — Sync after rebuilding

When you make changes to the package:

# in packages/ccm-graphql-client:
yarn build && yalc push

Step 6 — Remove yalc link when publishing to npm

cd /path/to/platformUI
yalc remove @harnessio/react-ccm-graphql-client
pnpm install
# add the real npm version to cacm/package.json

Updating the Schema or Queries

1. Replace schema.graphql with the latest from the CCM backend team
2. Add/edit .gql files under queries/
3. Run yarn generate to regenerate src/services/index.ts
4. Run yarn build to compile
5. Run yalc push to sync to platform UI for local testing

Versioning

Versioning is driven by schema changes and query additions. Do not manually edit src/services/index.ts.

License

MIT. Copyright(c) Harness Inc