Add query keys (#41)

* Add query keys

* Simplify example

* Regenrate sse example

* Update readme

Author: AlexanderKolberg

README.md

@@ -1,27 +1,50 @@
-webrpc-gen Typescript templates
-===============================
+# webrpc-gen Typescript templates
 
 This repo contains the templates used by the `webrpc-gen` cli to code-generate
 webrpc Typescript server and client code.
 
 This generator, from a webrpc schema/design file will code-generate:
 
 1. Client -- an isomorphic/universal Typescript client to speak to a webrpc server using the
-provided schema. This client is compatible with any webrpc server language (ie. Go, nodejs, etc.).
-As the client is isomorphic, means you can use this within a Web browser or use the client in a 
-server like nodejs -- both without needing any dependencies. I suggest to read the generated TS
-output of the generated code, and you shall see, its nothing fancy, just the sort of thing you'd
-write by hand.
+   provided schema. This client is compatible with any webrpc server language (ie. Go, nodejs, etc.).
+   As the client is isomorphic, means you can use this within a Web browser or use the client in a
+   server like nodejs -- both without needing any dependencies. I suggest to read the generated TS
+   output of the generated code, and you shall see, its nothing fancy, just the sort of thing you'd
+   write by hand.
 
 2. Server -- a nodejs Typescript server handler. See examples.
 
+## Features
+
+### Query Keys for React Query / SWR
+
+The generated client includes a `queryKey` property with type-safe query key generators for each endpoint. This makes it easy to use with popular data-fetching libraries:
+
+```typescript
+import { useQuery } from '@tanstack/react-query'
+import { Example } from './client.gen'
+
+const client = new Example('http://localhost:3000', fetch)
+
+function UserProfile({ userId }) {
+  const { data } = useQuery({
+    queryKey: client.queryKey.getUser({ userId }),
+    queryFn: ({ signal }) => client.getUser({ userId }, undefined, signal)
+  })
+
+  return <div>{data?.user.name}</div>
+}
+```
+
+The query keys follow the pattern `[ServiceName, methodName, request?]` and are fully type-safe with `as const` assertions.
+
 ## Usage
 
 ```
 webrpc-gen -schema=example.ridl -target=typescript -server -client -out=./example.gen.ts
 ```
 
-or 
+or
 
 ```
 webrpc-gen -schema=example.ridl -target=github.com/webrpc/[email protected] -server -client -out=./example.gen.ts
@@ -36,12 +59,13 @@ webrpc-gen -schema=example.ridl -target=./local-templates-on-disk -server -clien
 As you can see, the `-target` supports default `typescript`, any git URI, or a local folder :)
 
 ### Set custom template variables
+
 Change any of the following values by passing `-option="Value"` CLI flag to `webrpc-gen`.
 
 | webrpc-gen -option | Description          | Default value                                     | Version |
-|--------------------|----------------------|---------------------------------------------------|---------|
+| ------------------ | -------------------- | ------------------------------------------------- | ------- |
 | `-client`          | generate client code | unset (`false`)                                   | v0.0.1  |
-| `-server`          | generate server code | unset (`false`)                                   | v0.0.1  | 
+| `-server`          | generate server code | unset (`false`)                                   | v0.0.1  |
 | `-webrpcHeader`    | `true`               | enable client send webrpc version in http headers | v0.15.0 |
 
 ## LICENSE

_examples/node-ts/server-fastify/server.gen.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // node-ts v1.0.0 21701cae51b73d035bf2180831cdb38220bbbccc
 // --
-// Code generated by Webrpc-gen@v0.28.2-4-gcd30baf with ../../../gen-typescript generator. DO NOT EDIT.
+// Code generated by Webrpc-gen@v0.29.0 with ../../../gen-typescript generator. DO NOT EDIT.
 //
 // webrpc-gen -schema=service.ridl -target=../../../gen-typescript -server -out=./server-fastify/server.gen.ts
 
@@ -535,7 +535,7 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.28.2-4-gcd30baf;gen-typescript@unknown;[email protected]"
+export const WebrpcHeaderValue = "webrpc@v0.29.0;gen-typescript@unknown;[email protected]"
 
 type WebrpcGenVersions = {
   WebrpcGenVersion: string;

_examples/node-ts/server-hono/server.gen.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // node-ts v1.0.0 21701cae51b73d035bf2180831cdb38220bbbccc
 // --
-// Code generated by Webrpc-gen@v0.28.2-4-gcd30baf with ../../../gen-typescript generator. DO NOT EDIT.
+// Code generated by Webrpc-gen@v0.29.0 with ../../../gen-typescript generator. DO NOT EDIT.
 //
 // webrpc-gen -schema=service.ridl -target=../../../gen-typescript -server -out=./server-hono/server.gen.ts
 
@@ -535,7 +535,7 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.28.2-4-gcd30baf;gen-typescript@unknown;[email protected]"
+export const WebrpcHeaderValue = "webrpc@v0.29.0;gen-typescript@unknown;[email protected]"
 
 type WebrpcGenVersions = {
   WebrpcGenVersion: string;

_examples/node-ts/server/server.gen.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // node-ts v1.0.0 21701cae51b73d035bf2180831cdb38220bbbccc
 // --
-// Code generated by Webrpc-gen@v0.28.2-4-gcd30baf with ../../../gen-typescript generator. DO NOT EDIT.
+// Code generated by Webrpc-gen@v0.29.0 with ../../../gen-typescript generator. DO NOT EDIT.
 //
 // webrpc-gen -schema=service.ridl -target=../../../gen-typescript -server -out=./server/server.gen.ts
 
@@ -535,7 +535,7 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.28.2-4-gcd30baf;gen-typescript@unknown;[email protected]"
+export const WebrpcHeaderValue = "webrpc@v0.29.0;gen-typescript@unknown;[email protected]"
 
 type WebrpcGenVersions = {
   WebrpcGenVersion: string;

_examples/node-ts/webapp/client.gen.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // node-ts v1.0.0 21701cae51b73d035bf2180831cdb38220bbbccc
 // --
-// Code generated by Webrpc-gen@v0.28.2-4-gcd30baf with ../../../gen-typescript generator. DO NOT EDIT.
+// Code generated by Webrpc-gen@v0.29.0 with ../../../gen-typescript generator. DO NOT EDIT.
 //
 // webrpc-gen -schema=service.ridl -target=../../../gen-typescript -client -out=./webapp/client.gen.ts
 
@@ -102,6 +102,12 @@ export class Example implements ExampleClient {
     return this.hostname + this.path + name
   }
 
+  queryKey = {
+    ping: () => ['Example', 'ping'] as const,
+    getUser: (req: GetUserRequest) => ['Example', 'getUser', req] as const,
+    getArticle: (req: GetArticleRequest) => ['Example', 'getArticle', req] as const,
+  }
+  
   ping = (headers?: object, signal?: AbortSignal): Promise<PingResponse> => {
     return this.fetch(
       this.url('Ping'),
@@ -484,7 +490,7 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.28.2-4-gcd30baf;gen-typescript@unknown;[email protected]"
+export const WebrpcHeaderValue = "webrpc@v0.29.0;gen-typescript@unknown;[email protected]"
 
 type WebrpcGenVersions = {
   WebrpcGenVersion: string;

_examples/sse/webapp/client.gen.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // webrpc-sse-chat v1.0.0 a799dc63b082644f5d003c8881424546aee23a2c
 // --
-// Code generated by Webrpc-gen@v0.28.2-4-gcd30baf with ../../ generator. DO NOT EDIT.
+// Code generated by Webrpc-gen@v0.29.0 with ../../ generator. DO NOT EDIT.
 //
 // webrpc-gen -schema=service.ridl -target=../../ -client -out=./webapp/client.gen.ts
 
@@ -81,6 +81,12 @@ export class Chat implements ChatClient {
     return this.hostname + this.path + name
   }
 
+  queryKey = {
+    sendMessage: (req: SendMessageRequest) => ['Chat', 'sendMessage', req] as const,
+    subscribeMessages: (req: SubscribeMessagesRequest) => ['Chat', 'subscribeMessages', req] as const,
+    subscribeUsers: () => ['Chat', 'subscribeUsers'] as const,
+  }
+  
   sendMessage = (req: SendMessageRequest, headers?: object, signal?: AbortSignal): Promise<SendMessageResponse> => {
     return this.fetch(
       this.url('SendMessage'),
@@ -550,7 +556,7 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.28.2-4-gcd30baf;@unknown;[email protected]"
+export const WebrpcHeaderValue = "webrpc@v0.29.0;@unknown;[email protected]"
 
 type WebrpcGenVersions = {
   WebrpcGenVersion: string;

client.go.tmpl

@@ -8,11 +8,11 @@
 // Client
 //
 
-{{- "\n" -}}{{- range .Services}}
-export class {{.Name}} implements {{.Name}}Client {
+{{- "\n" -}}{{- range $serviceIndex, $service := .Services}}
+export class {{$service.Name}} implements {{$service.Name}}Client {
   protected hostname: string
   protected fetch: Fetch
-  protected path = '/rpc/{{.Name}}/'
+  protected path = '/rpc/{{$service.Name}}/'
 
   constructor(hostname: string, fetch: Fetch) {
     this.hostname = hostname.replace(/\/*$/, '')
@@ -22,7 +22,13 @@ export class {{.Name}} implements {{.Name}}Client {
   private url(name: string): string {
     return this.hostname + this.path + name
   }
-  {{range $_, $method := .Methods}}
+  
+  queryKey = {
+  {{- range $i, $method := $service.Methods}}
+    {{firstLetterToLower .Name}}: ({{if .Inputs | len}}req: {{.Name}}{{if $opts.compat}}Args{{else}}Request{{end}}{{end}}) => ['{{$service.Name}}', '{{firstLetterToLower .Name}}'{{if .Inputs | len}}, req{{end}}] as const,
+  {{- end}}
+  }
+  {{range $_, $method := $service.Methods}}
   {{firstLetterToLower .Name}} = ({{template "methodInputs" dict "Method" . "Opts" $opts "TypeMap" $typeMap}}): {{if $method.StreamOutput}}WebrpcStreamController{{else}}{{if $method.Succinct}}Promise<{{(index $method.Outputs 0).Type}}>{{else}}Promise<{{$method.Name}}{{if $opts.compat}}Return{{else}}Response{{end}}>{{end}}{{end}} => {
   {{- if $method.StreamOutput }}
     const abortController = new AbortController()