Skip to content

Commit a734db1

Browse files
committed
Short doc about custom query prefixes
1 parent 3240a7c commit a734db1

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

+27
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
11
# webRPC react-query client
22

33
Server synchronization made easy & type-safe!
4+
## How to use
5+
6+
First, you'll need an api contract, ideally in the webRPC format.
7+
Then create an instance of your contract and pass it as an argument to the WebRPCClient constructor.
8+
It should look something like this:
9+
10+
```ts
11+
const ContractInstance = new Chat('hostname', customFetch)
12+
export const client = new WebRpcClient(ContractInstance)
13+
```
14+
15+
Import `client` where you need to make your API calls and let type inference guide your way!
16+
17+
## Differentiating queries and mutations
18+
19+
If you want to make the distinction between a query and a mutation even clearer, you can define custom _query prefixes_.
20+
You do so by adding a generic type to your `WebRpcClient` instance.
21+
22+
```ts
23+
const ContractInstance = new Chat('hostname', fetch)
24+
const client = new WebRpcClient<typeof ContractInstance, ['get', 'list']>(
25+
ContractInstance,
26+
)
27+
```
28+
29+
With this configuration, you can only use `client.useQuery` hook with paths that start with either `'get'` or `'list'`.
30+
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.

0 commit comments

Comments
 (0)