feat: Next 13 app Dir fetch support! (#315)

* init commit

* linting

* add request cache

* cleanup, fix tests

* add changeset

* Update early-frogs-joke.md

Author: michaelangeloio

.changeset/early-frogs-joke.md

@@ -0,0 +1,6 @@
+---
+'@ts-rest/core': minor
+'@ts-rest/next': minor
+---
+
+Adds support for fetch cache and support for Nextjs App Dir fetch, see this PR for more info: https://github.com/ts-rest/ts-rest/pull/315

apps/example-next/next.config.js

@@ -10,6 +10,9 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  expiremental: {
+    serverActions: true
+  }
 };
 
 module.exports = withNx(nextConfig);

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

@@ -156,6 +156,7 @@ type ClientGetPostsType = Expect<
   Equal<
     Parameters<typeof client.posts.getPosts>[0],
     | {
+        cache?: RequestCache;
         query?: {
           take?: number;
           skip?: number;
@@ -182,6 +183,7 @@ type ClientGetPostType = Expect<
   Equal<
     Parameters<typeof client.posts.getPost>[0],
     {
+      cache?: RequestCache;
       params: {
         id: string;
       };
@@ -338,6 +340,7 @@ describe('client', () => {
           published: true,
           filter: { title: 'test' },
         },
+        
       });
 
       expect(result.body).toStrictEqual(value);
@@ -629,6 +632,7 @@ type CustomClientGetPostsType = Expect<
   Equal<
     Parameters<typeof customClient.posts.getPosts>[0],
     {
+      cache?: RequestCache;
       query?: {
         take?: number;
         skip?: number;
@@ -655,6 +659,7 @@ type CustomClientGetPostType = Expect<
   Equal<
     Parameters<typeof customClient.posts.getPost>[0],
     {
+      cache?: RequestCache;
       params: {
         id: string;
       };

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

@@ -7,14 +7,16 @@ import {
   ClientInferRequest,
   ClientInferResponses,
   PartialClientInferRequest,
+  NextClientArgs,
+  Frameworks
 } from './infer-types';
 
 type RecursiveProxyObj<T extends AppRouter, TClientArgs extends ClientArgs> = {
   [TKey in keyof T]: T[TKey] extends AppRoute
-    ? AppRouteFunction<T[TKey], TClientArgs>
-    : T[TKey] extends AppRouter
-    ? RecursiveProxyObj<T[TKey], TClientArgs>
-    : never;
+  ? AppRouteFunction<T[TKey], TClientArgs>
+  : T[TKey] extends AppRouter
+  ? RecursiveProxyObj<T[TKey], TClientArgs>
+  : never;
 };
 
 /**
@@ -59,6 +61,12 @@ export type ApiFetcherArgs = {
   contentType: AppRouteMutation['contentType'];
   credentials?: RequestCredentials;
   signal?: AbortSignal;
+  cache?: RequestCache;
+  /**
+   * Only to be used by `@ts-rest/next`.
+   * You can obtain a Nextjs Client by calling `initNextClient`
+   */
+  next?: NextClientArgs['next'] | undefined;
 };
 
 export type ApiFetcher = (args: ApiFetcherArgs) => Promise<{
@@ -81,14 +89,20 @@ export const tsRestFetchApi: ApiFetcher = async ({
   body,
   credentials,
   signal,
+  cache,
+  next
 }) => {
   const result = await fetch(path, {
     method,
     headers,
     body,
     credentials,
     signal,
-  });
+    cache,
+    next
+    // we must type cast here because the typescript types for RequestInit
+    // do not include properties like "next" for Frameworks (like Nextjs)
+  } as RequestInit);
   const contentType = result.headers.get('content-type');
 
   if (contentType?.includes("application/") && contentType?.includes('json')) {
@@ -143,6 +157,7 @@ export const fetchApi = ({
   extraInputArgs,
   headers,
   signal,
+  next
 }: {
   path: string;
   clientArgs: ClientArgs;
@@ -152,6 +167,12 @@ export const fetchApi = ({
   extraInputArgs: Record<string, unknown>;
   headers: Record<string, string | undefined>;
   signal?: AbortSignal;
+  // ---- Framework specific ----
+  /**
+   * only to be used by @ts-rest/next
+   * You can obtain a Nextjs Client by calling `initNextClient`
+   */
+  next?: NextClientArgs['next'] | undefined;
 }) => {
   const apiFetcher = clientArgs.api || tsRestFetchApi;
 
@@ -179,6 +200,7 @@ export const fetchApi = ({
       rawQuery: query,
       contentType: 'multipart/form-data',
       signal,
+      next,
       ...extraInputArgs,
     });
   }
@@ -198,6 +220,7 @@ export const fetchApi = ({
     rawQuery: query,
     contentType: route.method !== 'GET' ? 'application/json' : undefined,
     signal,
+    next,
     ...extraInputArgs,
   });
 };
@@ -220,16 +243,21 @@ export const getCompleteUrl = (
   return `${baseUrl}${path}${queryComponent}`;
 };
 
-export const getRouteQuery = <TAppRoute extends AppRoute>(
+export const getRouteQuery = <TAppRoute extends AppRoute, Framework extends Frameworks = 'none'>(
   route: TAppRoute,
-  clientArgs: InitClientArgs
+  clientArgs: InitClientArgs,
 ) => {
   const knownResponseStatuses = Object.keys(route.responses);
   return async (
-    inputArgs?: ClientInferRequest<AppRouteMutation, ClientArgs>
+    inputArgs?: Framework extends 'nextjs' ? 
+      ClientInferRequest<AppRouteMutation, ClientArgs, 'nextjs'> 
+      : ClientInferRequest<AppRouteMutation, ClientArgs>
   ) => {
-    const { query, params, body, headers, extraHeaders, ...extraInputArgs } =
-      inputArgs || {};
+    const { query, params, body, headers, extraHeaders, next, ...extraInputArgs } =
+      // ---- Merge all framework Request infer types ----
+      inputArgs as ClientInferRequest<AppRouteMutation, ClientArgs, 'nextjs'> &
+        ClientInferRequest<AppRouteMutation, ClientArgs>
+      || {};
 
     const completeUrl = getCompleteUrl(
       query,
@@ -246,6 +274,7 @@ export const getRouteQuery = <TAppRoute extends AppRoute>(
       body,
       query,
       extraInputArgs,
+      next,
       headers: {
         ...extraHeaders,
         ...headers,
@@ -287,7 +316,7 @@ export const initClient = <
   return Object.fromEntries(
     Object.entries(router).map(([key, subRouter]) => {
       if (isAppRoute(subRouter)) {
-        return [key, getRouteQuery(subRouter, args)];
+        return [key, getRouteQuery<typeof subRouter>(subRouter, args)];
       } else {
         return [key, initClient(subRouter, args)];
       }

libs/ts-rest/core/src/lib/infer-types.spec.ts

@@ -497,6 +497,7 @@ it('type inference helpers', () => {
       ClientInferRequest<typeof contract>,
       {
         getPost: {
+          cache?: RequestCache;
           query: { includeComments?: boolean | undefined };
           params: { id: string };
           headers: { authorization: string; age?: number };
@@ -506,6 +507,7 @@ it('type inference helpers', () => {
           } & Record<string, string | undefined>;
         };
         createPost: {
+          cache?: RequestCache;
           body: { title: string; content: string };
           headers: { authorization: string; age?: number };
           extraHeaders?: {
@@ -514,6 +516,7 @@ it('type inference helpers', () => {
           } & Record<string, string | undefined>;
         };
         uploadImage: {
+          cache?: RequestCache;
           body:
             | {
                 image: File;
@@ -527,6 +530,7 @@ it('type inference helpers', () => {
         };
         nested: {
           getComments: {
+            cache?: RequestCache;
             params: { id: string };
             headers: {
               authorization: string;

libs/ts-rest/core/src/lib/infer-types.ts

@@ -24,6 +24,12 @@ import {
 import { ApiFetcher, ClientArgs } from './client';
 import { ParamsFromUrl } from './paths';
 
+export type Frameworks = 'nextjs' | 'none';
+
+export type NextClientArgs = {
+  next?: { revalidate?: number | false, tags?: string[]} | undefined
+}
+
 type ExtractExtraParametersFromClientArgs<
   TClientArgs extends Pick<ClientArgs, 'api'>
 > = TClientArgs['api'] extends ApiFetcher
@@ -176,6 +182,7 @@ export type ServerInferRequest<
   : never;
 
 type ClientInferRequestBase<
+  Framework extends Frameworks,
   T extends AppRoute,
   TClientArgs extends Omit<ClientArgs, 'baseUrl'> = {
     baseHeaders: {};
@@ -187,7 +194,7 @@ type ClientInferRequestBase<
           keyof LowercaseKeys<TClientArgs['baseHeaders']>
         >
       >
-    : never
+    : never,
 > = Prettify<
   Without<
     {
@@ -212,6 +219,10 @@ type ClientInferRequestBase<
       extraHeaders?: {
         [K in NonNullable<keyof THeaders>]?: never;
       } & Record<string, string | undefined>;
+      cache?: RequestCache;
+      next?: Framework extends 'nextjs'
+        ? NextClientArgs['next'] 
+        : never;
     } & ExtractExtraParametersFromClientArgs<TClientArgs>,
     never
   >
@@ -221,9 +232,10 @@ export type ClientInferRequest<
   T extends AppRoute | AppRouter,
   TClientArgs extends Omit<ClientArgs, 'baseUrl'> = {
     baseHeaders: {};
-  }
+  },
+  Framework extends Frameworks = 'none'
 > = T extends AppRoute
-  ? ClientInferRequestBase<T, TClientArgs>
+  ? ClientInferRequestBase<Framework, T, TClientArgs>
   : T extends AppRouter
   ? { [TKey in keyof T]: ClientInferRequest<T[TKey]> }
   : never;
@@ -232,5 +244,6 @@ export type PartialClientInferRequest<
   TRoute extends AppRoute,
   TClientArgs extends Omit<ClientArgs, 'baseUrl'> = {
     baseHeaders: {};
-  }
-> = OptionalIfAllOptional<ClientInferRequest<TRoute, TClientArgs>>;
+  },
+  Framework extends Frameworks = 'none'
+> = OptionalIfAllOptional<ClientInferRequest<TRoute, TClientArgs, Framework>>;

libs/ts-rest/next/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/ts-rest-next';
+export * from './lib/next-client';

libs/ts-rest/next/src/lib/next-client.spec.ts

@@ -0,0 +1,74 @@
+import { initContract } from '@ts-rest/core';
+import { z } from 'zod';
+import { initNextClient } from './next-client';
+import type { Equal, Expect } from './test-helpers';
+
+const UserSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  email: z.string(),
+});
+
+const c = initContract();
+const contract = c.router({
+  getUser: {
+    method: 'GET',
+    path: '/users/:id',
+    responses: {
+      200: UserSchema,
+    },
+  },
+});
+
+describe('next-client', () => {
+  it('Client Args should include "next" property if client is initNextClient', () => {
+    const usersClient = initNextClient(contract, {
+      baseHeaders: {},
+      baseUrl: 'http://localhost:5002',
+    });
+    type UserClient = typeof usersClient;
+    type Test = Parameters<UserClient['getUser']>[0]
+    type ExpectedClientArgs = {
+      params: {
+        id: string;
+      };
+      next?: {
+        revalidate?: number | false | undefined;
+        tags?: string[] | undefined;
+      } | undefined;
+      extraHeaders?: Test['extraHeaders'];
+      cache?: RequestCache
+    }
+    type NextClientTypeTest = Expect<Equal<Test, ExpectedClientArgs>>;
+
+  });
+  it('Should include "next" property in the fetch request', async () => {
+    const usersClient = initNextClient(contract, {
+      baseHeaders: {},
+      baseUrl: 'http://localhost:5002',
+    });
+    global.fetch = jest.fn(() => Promise.resolve({
+      json: () => Promise.resolve({
+        id: '1',
+        name: 'John',
+        email: 'some@email'
+      }),
+      headers: new Headers({
+        'content-type': 'application/json'
+      })
+    } as Response));
+    await usersClient.getUser({ params: { id: '1' }, next: { revalidate: 1, tags: ['user1'] } });
+    expect(global.fetch).toHaveBeenCalledWith('http://localhost:5002/users/1', {
+      body: undefined,
+      credentials: undefined,
+      headers: {
+        'content-type': 'application/json'
+      },
+      method: 'GET',
+      signal: undefined,
+      next: { revalidate: 1, tags: ['user1'] }
+    });
+    (global.fetch as jest.Mock).mockClear();
+  })
+}
+)