-
Notifications
You must be signed in to change notification settings - Fork 77
feat: adds react-query automatic proxy package #2440
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
| 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) | ||
| }, | ||
| }, | ||
| } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### 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 | ||
| 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", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🧩 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
fiRepository: 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.jsonRepository: 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 | sortRepository: akash-network/console Length of output: 373 Create src/index.ts to properly export the public API. The 🤖 Prompt for AI Agents |
||
| "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" | ||
| } | ||
| } | ||
There was a problem hiding this comment.
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