update

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 golang.cz
+Copyright (c) 2022 golang.cz and github.com/webrpc authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,33 +1,79 @@
-react-query adapter for webrpc
-==============================
+@webrpc/react-query -- a react-query adapter for webrpc
+=======================================================
+
+Enjoy the RPC code-gen ergonomics + type-safety benefits of webrpc, with the comfort
+of react-query from your React apps :) 
+
+
+## Install
+
+From your webapps: `npm install @webrpc/react-query`
+
+As well, make sure you install `@tanstack/react-query` and `react` in your app, which are
+peer-dependencies of this library.
+
+
+## Example
+
+Please see a full example project with both server and client [here](./example).
+
+To run the example:
+
+1. git clone this repo
+2. `cd example/webapp`
+3. `pnpm install`
+4. Start the server -- in one terminal: `make run-server`
+5. Start the webapp -- in another terminal: `make run-webapp`
+6. Open the webapp at http://localhost:4444 and open your browser console
 
-Server synchronization made easy & type-safe!
 
 ## How to use
 
-First, you'll need an api contract, ideally in the webRPC format.
-Then create an instance of your contract and pass it as an argument to the WebRPCClient constructor.
+First, you'll need a webrpc schema definition either in JSON or RIDL.
+
+Then create an instance of your RPC client and pass it as an argument to the WebRpcClient constructor.
 It should look something like this:
 
 ```ts
-const ContractInstance = new Chat('hostname', customFetch)
-export const client = new WebRpcClient(ContractInstance)
+import { Example } from './client.gen'
+import { WebRpcQueryClient } from '@webrpc/react-query'
+
+const rpc = new Example('http://localhost:4242', fetch)
+const client = new WebRpcQueryClient(rpc)
 ```
 
 Import `client` where you need to make your API calls and let type inference guide your way!
 
+
 ## Differentiating queries and mutations
 
 If you want to make the distinction between a query and a mutation even clearer, you can define custom _query prefixes_.
 You do so by adding a generic type to your `WebRpcClient` instance.
 
 ```ts
-const ContractInstance = new Chat('hostname', fetch)
-const client = new WebRpcClient<typeof ContractInstance, ['get', 'list']>(
-  ContractInstance,
-)
+import { Example } from './client.gen'
+import { WebRpcQueryClient } from '@webrpc/react-query
+
+const rpc = new Example('http://localhost:4242', fetch)
+const client = new WebRpcQueryClient<typeof rpc, ['get', 'list']>(rpc)
 ```
 
 With this configuration, you can only use `client.useQuery` hook with paths that start with either `'get'` or `'list'`.
 
 Any other method from your contract will be considered a _mutation_. If you choose not to provide _query prefixes_, you will be able to call both `client.useQuery` and `client.useMutation` with any path from your contract.
+
+
+## Local dev
+
+You can update `example/webapp/package.json" package to `"@webrpc/react-query": "workspace:../../"`
+which will use the build from the local repo.
+
+
+## Credits
+
+Thank you to @vojoup from the github.com/golang-cz team for the idea and original implementation of this library :)
+
+
+## LICENSE
+
+Licensed under [MIT License](./LICENSE)

example/Makefile

@@ -11,10 +11,10 @@ generate-client:
 
 bootstrap:
 	rm -rf webapp/node_modules
-	cd webapp && yarn
+	cd webapp && pnpm i
 
 run-server:
 	@go run ./server
 
 run-client:
-	@cd webapp && yarn start
+	@cd webapp && pnpm start

example/webapp/package.json

@@ -4,17 +4,16 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "yarn start",
-    "start": "webpack-dev-server --mode development --progress --color --config webpack.config.js",
-    "dist": "rm -rf ./dist && webpack --mode production --color --config webpack-dist.config.js"
+    "dev": "pnpm start",
+    "start": "webpack-dev-server --mode development --progress --color --config webpack.config.js"
   },
   "dependencies": {
     "@tanstack/react-query": "^4.13.4",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "webrpc-react-query": "workspace:../../"
+    "webrpc-react-query": "^0.1.0"
   },
   "devDependencies": {
     "@types/node": "^18.7.14",