Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

106 changes: 106 additions & 0 deletions packages/react-query-proxy/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
# React Query Proxy

> Wrap any async service into fully-typed TanStack React Query hooks at runtime.
> Works with REST, gRPC, XML-RPC, generated clients, or hand-written APIs — no codegen required.
---

## ✨ Why?

Most teams already have an API client / SDK:
- generated from OpenAPI / gRPC
- written by hand
- shared between frontend, backend, scripts, and tests

This library lets you **reuse that SDK directly in React** by turning it into:
- `useQuery` hooks
- `useMutation` hooks
- stable, predictable query keys

All **at runtime**, without generating code or schemas.

---

## 📦 Installation

```bash
npm install @akashnetwork/react-query-proxy
```

> Peer dependencies:
> - `react >= 18`
> - `@tanstack/react-query >= 5`
---

## 🚀 Basic usage

### 1. Start with a plain async SDK

```ts
const sdk = {
alerts: {
async list(input?: { page?: number }) {
return fetchAlerts(input)
},

async create(input: { name: string }) {
return createAlert(input)
},
},
}
Comment on lines +41 to +51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: how would this be defined? with the auto generation code from this pr? https://github.com/akash-network/console/pull/2437/changes

```

---

### 2. Wrap it with `createProxy`

```ts
import { createProxy } from '@akashnetwork/react-query-proxy'

export const api = createProxy(sdk)
```

---

### 3. Use queries

```tsx
function AlertsList() {
const q = api.alerts.list.useQuery({ page: 1 })

if (q.isLoading) return <div>Loading…</div>
if (q.isError) return <div>Error</div>

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

---

### 4. Use mutations

```tsx
function CreateAlert() {
const m = api.alerts.create.useMutation()

return (
<button onClick={() => m.mutate({ name: 'CPU High' })} disabled={m.isPending}>
Create
</button>
)
}
```

---

## 🔑 Query keys & invalidation

```ts
api.alerts.list.getKey({ page: 1 })
// → ['alerts', 'list', { page: 1 }]
```

## 📄 License

Apache 2.0
26 changes: 26 additions & 0 deletions packages/react-query-proxy/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "@akashnetwork/react-query-proxy",
"version": "1.0.0",
"description": "",
"repository": {
"type": "git",
"url": "https://github.com/akash-network/console"
},
"license": "Apache-2.0",
"author": "Akash Network",
"main": "src/index.ts",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if src/index.ts exists and verify exports in the react-query-proxy package
if [ -f "packages/react-query-proxy/src/index.ts" ]; then
  echo "=== src/index.ts exists ==="
  cat -n "packages/react-query-proxy/src/index.ts"
else
  echo "ERROR: src/index.ts does not exist"
  exit 1
fi

Repository: akash-network/console

Length of output: 99


🏁 Script executed:

#!/bin/bash
# Check the structure of the react-query-proxy package
echo "=== Directory structure of packages/react-query-proxy ==="
ls -la packages/react-query-proxy/

echo ""
echo "=== Check if src directory exists ==="
if [ -d "packages/react-query-proxy/src" ]; then
  echo "src directory exists. Contents:"
  ls -la packages/react-query-proxy/src/
else
  echo "src directory does NOT exist"
fi

echo ""
echo "=== Check package.json main field ==="
grep -A 2 -B 2 '"main"' packages/react-query-proxy/package.json

Repository: akash-network/console

Length of output: 808


🏁 Script executed:

#!/bin/bash
# Check what's in the createProxy directory
echo "=== Contents of src/createProxy ==="
find packages/react-query-proxy/src -type f

echo ""
echo "=== Full directory tree ==="
tree packages/react-query-proxy/src/ 2>/dev/null || find packages/react-query-proxy/src -type f -o -type d | sort

Repository: akash-network/console

Length of output: 373


Create src/index.ts to properly export the public API.

The main field in package.json points to src/index.ts, but this file does not exist. The actual implementation is in src/createProxy/createProxy.ts. Create src/index.ts to export createProxy and related types so the package can be imported correctly.

🤖 Prompt for AI Agents
In packages/react-query-proxy/package.json around line 11, package.json's "main"
points to src/index.ts but that file is missing; create src/index.ts that
re-exports the public API from src/createProxy/createProxy.ts (export
createProxy and any related types/interfaces) so imports resolve correctly;
ensure the file uses named exports matching the implementation and update any
type-only exports if needed.

"scripts": {
"test": "jest",
"validate:types": "tsc --noEmit && echo"
},
"dependencies": {
"@tanstack/react-query": "^5.67.2"
},
"devDependencies": {
"@akashnetwork/dev-config": "*",
"jest": "^29.7.0",
"prettier": "^3.3.0",
"ts-jest": "^29.4.0",
"typescript": "~5.8.2"
}
}
Loading
Loading