V1 API: Wrapping react-query

examples/react/basic/buf.gen.yaml

@@ -3,13 +3,13 @@
 version: v1
 plugins:
   - name: es
-    path: ./node_modules/.bin/protoc-gen-es
+    path: protoc-gen-es
     out: src/gen
     opt:
       - target=ts
 
   - name: connect-query
-    path: ./node_modules/.bin/protoc-gen-connect-query
+    path: protoc-gen-connect-query
     out: src/gen
     opt:
       - target=ts

examples/react/basic/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@connectrpc/connect-query-example-react-basic",
+  "name": "@connectrpc/connect-react-query-example-basic",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -16,12 +16,12 @@
     "@bufbuild/protobuf": "^1.3.3",
     "@bufbuild/protoc-gen-es": "^1.3.3",
     "@connectrpc/connect": "^1.1.2",
-    "@connectrpc/connect-query": "workspace:*",
+    "@connectrpc/connect-react-query": "workspace:*",
     "@connectrpc/connect-web": "^1.1.2",
     "@connectrpc/protoc-gen-connect-es": "^1.1.2",
-    "@connectrpc/protoc-gen-connect-query": "^0.5.1",
+    "@connectrpc/protoc-gen-connect-query": "workspace:*",
     "@tanstack/react-query": "^5.0.0",
-    "@tanstack/react-query-devtools": "^4.36.1",
+    "@tanstack/react-query-devtools": "^5.0.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.30",

examples/react/basic/src/example.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from "@connectrpc/connect-react-query";
 import type { FC } from "react";
 
 import { Data, Datum } from "./datum";
@@ -24,9 +24,7 @@ import { Page } from "./page";
  * This example demonstrates a basic usage of Connect-Query with `useQuery`
  */
 export const Example: FC = () => {
-  const { status, fetchStatus, error, data } = useQuery({
-    ...say.useQuery({}),
-  });
+  const { status, fetchStatus, error, data } = useQuery(say);
 
   return (
     <Page>

examples/react/basic/src/gen/eliza-BigIntService_connectquery.ts

@@ -18,11 +18,6 @@
 
 import { CountRequest, CountResponse } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.BigIntService";
 
@@ -44,12 +39,16 @@ export const BigIntService = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: BigIntService });
-
 /**
  * @generated from rpc connectrpc.eliza.v1.BigIntService.Count
  */
-export const count: UnaryFunctionsWithHooks<CountRequest, CountResponse> = {
-  ...$queryService.count,
-  ...createUnaryHooks($queryService.count),
-};
+export const count = {
+  localName: "count",
+  name: "Count",
+  kind: MethodKind.Unary,
+  I: CountRequest,
+  O: CountResponse,
+  service: {
+    typeName: "connectrpc.eliza.v1.BigIntService",
+  },
+} as const;

examples/react/basic/src/gen/eliza-ElizaService_connectquery.ts

@@ -25,11 +25,6 @@ import {
   SayResponse,
 } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.ElizaService";
 
@@ -96,24 +91,34 @@ export const ElizaService = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: ElizaService });
-
 /**
  * Say is a unary RPC. Eliza responds to the prompt with a single sentence.
  *
  * @generated from rpc connectrpc.eliza.v1.ElizaService.Say
  */
-export const say: UnaryFunctionsWithHooks<SayRequest, SayResponse> = {
-  ...$queryService.say,
-  ...createUnaryHooks($queryService.say),
-};
+export const say = {
+  localName: "say",
+  name: "Say",
+  kind: MethodKind.Unary,
+  I: SayRequest,
+  O: SayResponse,
+  service: {
+    typeName: "connectrpc.eliza.v1.ElizaService",
+  },
+} as const;
 
 /**
  * SayAgain is a unary RPC. Eliza responds to the prompt with a single sentence.
  *
  * @generated from rpc connectrpc.eliza.v1.ElizaService.SayAgain
  */
-export const sayAgain: UnaryFunctionsWithHooks<SayRequest, SayResponse> = {
-  ...$queryService.sayAgain,
-  ...createUnaryHooks($queryService.sayAgain),
-};
+export const sayAgain = {
+  localName: "sayAgain",
+  name: "SayAgain",
+  kind: MethodKind.Unary,
+  I: SayRequest,
+  O: SayResponse,
+  service: {
+    typeName: "connectrpc.eliza.v1.ElizaService",
+  },
+} as const;

examples/react/basic/src/gen/eliza-Haberdasher_connectquery.ts

@@ -18,11 +18,6 @@
 
 import { Nothing } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.Haberdasher";
 
@@ -44,12 +39,16 @@ export const Haberdasher = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: Haberdasher });
-
 /**
  * @generated from rpc connectrpc.eliza.v1.Haberdasher.Work
  */
-export const work: UnaryFunctionsWithHooks<Nothing, Nothing> = {
-  ...$queryService.work,
-  ...createUnaryHooks($queryService.work),
-};
+export const work = {
+  localName: "work",
+  name: "Work",
+  kind: MethodKind.Unary,
+  I: Nothing,
+  O: Nothing,
+  service: {
+    typeName: "connectrpc.eliza.v1.Haberdasher",
+  },
+} as const;

examples/react/basic/src/gen/eliza-PaginatedService_connectquery.ts

@@ -18,11 +18,6 @@
 
 import { ListRequest, ListResponse } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.PaginatedService";
 
@@ -44,12 +39,16 @@ export const PaginatedService = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: PaginatedService });
-
 /**
  * @generated from rpc connectrpc.eliza.v1.PaginatedService.List
  */
-export const list: UnaryFunctionsWithHooks<ListRequest, ListResponse> = {
-  ...$queryService.list,
-  ...createUnaryHooks($queryService.list),
-};
+export const list = {
+  localName: "list",
+  name: "List",
+  kind: MethodKind.Unary,
+  I: ListRequest,
+  O: ListResponse,
+  service: {
+    typeName: "connectrpc.eliza.v1.PaginatedService",
+  },
+} as const;

examples/react/basic/src/gen/eliza-SecondService_connectquery.ts

@@ -25,11 +25,6 @@ import {
   SayResponse,
 } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.SecondService";
 
@@ -80,14 +75,18 @@ export const SecondService = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: SecondService });
-
 /**
  * Say is a unary RPC. Eliza responds to the prompt with a single sentence.
  *
  * @generated from rpc connectrpc.eliza.v1.SecondService.Say
  */
-export const say: UnaryFunctionsWithHooks<SayRequest, SayResponse> = {
-  ...$queryService.say,
-  ...createUnaryHooks($queryService.say),
-};
+export const say = {
+  localName: "say",
+  name: "Say",
+  kind: MethodKind.Unary,
+  I: SayRequest,
+  O: SayResponse,
+  service: {
+    typeName: "connectrpc.eliza.v1.SecondService",
+  },
+} as const;

examples/react/basic/src/gen/eliza-Slouch_connectquery.ts

@@ -18,11 +18,6 @@
 
 import { Nothing } from "./eliza_pb";
 import { MethodKind } from "@bufbuild/protobuf";
-import {
-  createQueryService,
-  createUnaryHooks,
-  UnaryFunctionsWithHooks,
-} from "@connectrpc/connect-query";
 
 export const typeName = "connectrpc.eliza.v1.Slouch";
 
@@ -44,12 +39,16 @@ export const Slouch = {
   },
 } as const;
 
-const $queryService = createQueryService({ service: Slouch });
-
 /**
  * @generated from rpc connectrpc.eliza.v1.Slouch.Work
  */
-export const work: UnaryFunctionsWithHooks<Nothing, Nothing> = {
-  ...$queryService.work,
-  ...createUnaryHooks($queryService.work),
-};
+export const work = {
+  localName: "work",
+  name: "Work",
+  kind: MethodKind.Unary,
+  I: Nothing,
+  O: Nothing,
+  service: {
+    typeName: "connectrpc.eliza.v1.Slouch",
+  },
+} as const;

examples/react/basic/src/main.tsx

@@ -15,7 +15,7 @@
 import "./index.css";
 
 import type { Transport } from "@connectrpc/connect";
-import { TransportProvider } from "@connectrpc/connect-query";
+import { TransportProvider } from "@connectrpc/connect-react-query";
 import { createConnectTransport } from "@connectrpc/connect-web";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";