✨ Add normal query and mutation to react-query

Author: oliverbutler

.changeset/sixty-ghosts-admire.md

@@ -0,0 +1,6 @@
+---
+'@ts-rest/core': minor
+'@ts-rest/react-query': minor
+---
+
+Add query and mutation support to react-query, instead of requring useMutation and useQuery

libs/ts-rest/core/src/lib/client.ts

@@ -24,20 +24,28 @@ type DataReturnArgs<TRoute extends AppRoute> = {
     : never;
 };
 
-type DataReturn<TRoute extends AppRoute> = (
+/**
+ * Returned from a mutation or query call
+ */
+export type DataReturn<TRoute extends AppRoute> = (
   args: Without<DataReturnArgs<TRoute>, never>
 ) => Promise<
   | { data: TRoute['response']; error: null; status: number }
   | { data: null; error: string; status: number }
 >;
 
-type ClientArgs = {
+export type ClientArgs = {
   baseUrl: string;
   baseHeaders: Record<string, string>;
   api: ApiFetcher;
 };
 
-const defaultApi: ApiFetcher = async ({ path, method, headers, body }) => {
+export const defaultApi: ApiFetcher = async ({
+  path,
+  method,
+  headers,
+  body,
+}) => {
   const result = await fetch(path, { method, headers, body });
 
   if (result.ok) {
@@ -67,7 +75,7 @@ export type ApiFetcher = (args: {
     }
 >;
 
-const getRouteQuery = <TAppRoute extends AppRoute>(
+export const getRouteQuery = <TAppRoute extends AppRoute>(
   route: TAppRoute,
   clientArgs: ClientArgs
 ) => {

libs/ts-rest/react-query/src/lib/ts-rest-client.ts

@@ -1,9 +1,14 @@
 import { z } from 'zod';
 import {
+  ApiFetcher,
   AppRoute,
   AppRouteMutation,
   AppRouteQuery,
   AppRouter,
+  ClientArgs,
+  DataReturn,
+  defaultApi,
+  getRouteQuery,
   isAppRoute,
   Without,
 } from '@ts-rest/core';
@@ -54,11 +59,6 @@ type DataReturnArgs<TRoute extends AppRoute> = {
     : never;
 };
 
-// Used on X.query and X.mutation
-type DataReturn<TRoute extends AppRoute> = (
-  args: Without<DataReturnArgs<TRoute>, never>
-) => Promise<{ data: TRoute['response']; status: number }>;
-
 // Used on X.useQuery
 type DataReturnQuery<TAppRoute extends AppRoute> = (
   queryKey: QueryKey,
@@ -81,30 +81,6 @@ type DataReturnMutation<TAppRoute extends AppRoute> = (
   unknown
 >;
 
-type ClientArgs = {
-  baseUrl: string;
-  baseHeaders: Record<string, string>;
-  api: ApiFetcher;
-};
-
-const defaultApi: ApiFetcher = async ({ path, method, headers, body }) => {
-  const result = await fetch(path, { method, headers, body }).then((res) =>
-    res.json()
-  );
-
-  return { status: 200, data: result };
-};
-
-export type ApiFetcher = (args: {
-  path: string;
-  method: string;
-  headers: Record<string, string>;
-  body: string | undefined;
-}) => Promise<{
-  status: number;
-  data: unknown;
-}>;
-
 const getCompleteUrl = (query: any, baseUrl: string, path: string) => {
   const queryString =
     typeof query === 'object'
@@ -194,9 +170,9 @@ const createNewProxy = (router: AppRouter | AppRoute, args: ClientArgs) => {
         if (isAppRoute(router)) {
           switch (propKey) {
             case 'query':
-              throw new Error('Not implemented');
+              throw getRouteQuery(router, args);
             case 'mutation':
-              throw new Error('Not implemented');
+              throw getRouteQuery(router, args);
             case 'useQuery':
               return getRouteUseQuery(router, args);
             case 'useMutation':

package.json

@@ -12,15 +12,15 @@
   ],
   "dependencies": {
     "@changesets/cli": "^2.24.1",
-    "@docusaurus/core": "2.0.0-rc.1",
-    "@docusaurus/preset-classic": "2.0.0-rc.1",
-    "@mdx-js/react": "1.6.21",
+    "@docusaurus/core": "2.0.1",
+    "@docusaurus/preset-classic": "2.0.1",
+    "@mdx-js/react": "2.1.2",
     "@nestjs/common": "^9.0.7",
     "@nestjs/core": "^9.0.7",
     "@nestjs/platform-express": "^9.0.7",
     "@prisma/client": "^4.1.1",
     "@stackblitz/sdk": "^1.8.0",
-    "@swc/helpers": "~0.3.3",
+    "@swc/helpers": "~0.4.3",
     "@tailwindcss/typography": "^0.5.4",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
@@ -45,7 +45,7 @@
     "zod": "^3.17.10"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
+    "@docusaurus/module-type-aliases": "2.0.1",
     "@nestjs/schematics": "^9.0.1",
     "@nestjs/testing": "^9.0.7",
     "@nrwl/cli": "14.5.1",
@@ -77,7 +77,7 @@
     "@typescript-eslint/parser": "^5.31.0",
     "babel-jest": "28.1.3",
     "cypress": "^10.3.1",
-    "eslint": "~8.20.0",
+    "eslint": "~8.21.0",
     "eslint-config-next": "12.2.3",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-cypress": "^2.10.3",