write readme and fix export issue in the . endpoint

Author: arnaudpfu

README.md

@@ -1,2 +1,209 @@
 # next-trpc
-A simple typed rpc interface to easily type api endpoints in a app router nextjs application
+
+A simple typed rpc interface to easily type api endpoints in an app router nextjs application.
+
+## Installation
+
+```sh
+npm install @creatorem/next-trpc
+```
+
+<br/>
+
+## Setup
+
+### Create a router file
+
+Contains your api endpoints.
+
+`trpc/router.ts`
+
+```ts
+import { router, endpoint } from "@creatorem/next-trpc";
+import z from "zod";
+
+export const appRouter = router({
+  getUser: endpoint.action(async ({ db }) => {
+    return await myAsyncFunction();
+  }),
+  greeting: endpoint
+    .input(
+      // you can add zod typechecking to your entry params
+      z.object({
+        name: z.string(),
+        age: z.coerce.number(),
+      })
+    )
+    .action(({ name, age }) => {
+      return `Hi my name is ${name}, and I am ${age} years old.`;
+    }),
+});
+
+export type AppRouter = typeof appRouter;
+```
+
+### Connect your router to an api endpoint.
+
+`app/api/trpc/[trpc]/route.ts`
+
+```ts
+import { createTrpcAPI } from "@creatorem/next-trpc/server";
+import { appRouter } from "~/trpc/router";
+
+const handler = createTrpcAPI({
+  router: appRouter,
+});
+
+export { handler as GET, handler as POST };
+```
+
+### Start fetching with a type safe client!
+
+`trpc/client.ts`
+
+```ts
+import { envs } from "~/envs";
+import { createTrpcClient } from "@creatorem/next-trpc/client";
+import { type AppRouter } from "./router";
+
+const url = envs().NEXT_PUBLIC_YOUR_APP_URL + "/api/trpc";
+
+export const trpc = createTrpcClient<AppRouter>({
+  url,
+  headers: async () => {
+    // add custom headers like Authorization to make it works with auth logic
+    return {
+      /* Authorization: `Bearer ${jwt!}` */
+    };
+  },
+});
+```
+
+Done !
+
+## Usage
+
+Now you can use the `trpc` client and server side.
+
+`app/layout.tsx`
+
+```tsx
+import React from "react";
+import { redirect } from "next/navigation";
+import { trpc } from "~/trpc/client";
+
+export default async function Layout(
+  props: React.PropsWithChildren
+): Promise<React.JSX.Element> {
+  const user = await trpc.getUser.fetch();
+
+  if (!user) {
+    return redirect(/* path to login page */);
+  }
+
+  return <>{props.children}</>;
+}
+```
+
+### Integrated useQuery hook usage
+
+We offer a client side only function to create client object that pre-implement the `useQuery` hook from `@tanstack/react-query` package.
+
+You need to have `@tanstack/react-query` installed.
+
+```sh
+npm install @tanstack/react-query
+```
+
+Then you can create the following file :
+
+`trpc/query-client.ts`
+
+```ts
+import "client-only";
+
+import { envs } from "~/envs";
+import { createTrpcQueryClient } from "@creatorem/next-trpc/query-client";
+import { type AppRouter } from "./router";
+
+const url = envs().NEXT_PUBLIC_YOUR_APP_URL + "/api/trpc";
+
+export const clientTrpc = createTrpcQueryClient<AppRouter>({
+  url,
+  headers: async () => {
+    // add custom headers like Authorization to make it works with auth logic
+    return {
+      /* Authorization: `Bearer ${jwt!}` */
+    };
+  },
+});
+```
+
+Now you can do :
+
+```tsx
+"use client";
+
+import React from "react";
+import { clientTrpc } from "~/trpc/query-client";
+
+export const MyClientComponent: React.FC<React.PropsWithChildren> = (props) => {
+  const { data: user } = clientTrpc.getUser.useQuery();
+  /* ... */
+
+  return <>{props.children}</>;
+};
+```
+
+## Use a router context
+
+You can use a context object to pass data to all your endpoint callbacks.
+
+`trpc/router.ts`
+
+```ts {4-7,9}
+import { CtxRouter, endpoint } from "@creatorem/next-trpc";
+import z from "zod";
+
+export const createContext = async () => {
+  /* your own context logic here ... */
+  return { db /* let's say db is a database client. */ };
+};
+
+const ctx = new CtxRouter<Awaited<ReturnType<typeof createContext>>>();
+
+export const appRouter = ctx.router({
+  getUser: endpoint.action(async ({ db }) => {
+    return await db.user.get();
+  }),
+  greeting: endpoint
+    .input(
+      // you can add zod typechecking to your entry params
+      z.object({
+        name: z.string(),
+        age: z.coerce.number(),
+      })
+    )
+    .action(({ name, age }) => {
+      return `Hi my name is ${name}, and I am ${age} years old.`;
+    }),
+});
+
+export type AppRouter = typeof appRouter;
+```
+
+Next pass your context to the nextjs api endpoint.
+
+`app/api/trpc/[trpc]/route.ts`
+
+```ts {6}
+import { createTrpcAPI } from "@creatorem/next-trpc/server";
+import { appRouter, createContext } from "~/trpc/router";
+
+const handler = createTrpcAPI({
+  router: appRouter,
+  ctx: createContext,
+});
+
+export { handler as GET, handler as POST };
+```

package.json

@@ -1,12 +1,22 @@
 {
     "name": "@creatorem/next-trpc",
-    "private": false,
-    "version": "1.0.1",
+    "private": true,
+    "type": "module",
+    "version": "1.0.2",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/creatorem/next-trpc"
+    },
     "homepage": "https://creatorem.com",
     "author": {
         "url": "https://creatorem.com",
         "name": "Creatorem"
     },
+    "keywords": [
+        "nextjs",
+        "trpc",
+        "typescript"
+    ],
     "license": "MIT",
     "publishConfig": {
         "access": "public"
@@ -25,21 +35,21 @@
         "test:coverage": "jest --coverage"
     },
     "exports": {
-        "./": {
+        ".": {
             "require": "./dist/core.js",
             "types": "./dist/core.d.ts"
         },
         "./server": {
-            "require": "./dist/create-rpc-api.js",
-            "types": "./dist/create-rpc-api.d.ts"
+            "require": "./dist/create-trpc-api.js",
+            "types": "./dist/create-trpc-api.d.ts"
         },
         "./client": {
-            "require": "./dist/create-rpc-client.js",
-            "types": "./dist/create-rpc-client.d.ts"
+            "require": "./dist/create-trpc-client.js",
+            "types": "./dist/create-trpc-client.d.ts"
         },
         "./query-client": {
-            "require": "./dist/create-rpc-query-client.js",
-            "types": "./dist/create-rpc-query-client.d.ts"
+            "require": "./dist/create-trpc-query-client.js",
+            "types": "./dist/create-trpc-query-client.d.ts"
         }
     },
     "devDependencies": {

src/core.ts

@@ -14,7 +14,7 @@ export type Endpoint<
         } & Ctx
       ) => Output
     : (
-        input: Input extends Schema ? import("zod").infer<Input> : Input,
+        input: Input extends Schema ? z.infer<Input> : Input,
         context: {
           request: NextRequest;
         } & Ctx

src/create-rpc-api.ts src/create-trpc-api.tssrc/create-rpc-api.ts renamed to src/create-trpc-api.ts

@@ -19,41 +19,40 @@ const parseInput = (request: NextRequest, endpoint: Endpoint<any, any>) => {
   return endpoint.input.parse(paramsObj);
 };
 
-export const createRpcAPI = <Ctx>({
+export const createTrpcAPI = <Ctx>({
   router,
   ctx,
 }: {
-  // router: ReturnType<typeof routerFn>;
   router: ReturnType<typeof routerFn<any, Router<any>>>;
   ctx?: (request: NextRequest) => Promise<Ctx>;
 }) => {
   return async function handler(
     request: NextRequest,
     context: { params: Promise<unknown> }
   ): Promise<NextResponse<unknown>> {
-    const params = (await context.params) as { rpc: string };
+    const params = (await context.params) as { trpc: string };
 
-    if (!("rpc" in params)) {
+    if (!("trpc" in params)) {
       return NextResponse.json(
         {
           data: null,
-          error: "You must call createAPI in a [rpc]/route.ts file.",
+          error: "You must call createAPI in a [trpc]/route.ts file.",
         },
         { status: 400 }
       );
     }
-    if (!params.rpc) {
+    if (!params.trpc) {
       return NextResponse.json(
         {
           data: null,
           error:
-            "You must pass a params in your [rpc]/you-must-put-a-param-here call",
+            "You must pass a params in your [trpc]/you-must-put-a-param-here call",
         },
         { status: 400 }
       );
     }
 
-    const endpointAttribute = camelize(params.rpc);
+    const endpointAttribute = camelize(params.trpc);
 
     if (!(endpointAttribute in router) || !router[endpointAttribute]) {
       return NextResponse.json(

src/create-rpc-client.ts src/create-trpc-client.tssrc/create-rpc-client.ts renamed to src/create-trpc-client.ts

@@ -1,7 +1,7 @@
 import { Router, type Endpoint, type router } from "./core";
 import { kebabize } from "./utils";
 
-type RpcClient<R extends Router<any>> = {
+type TrpcClient<R extends Router<any>> = {
   [K in keyof R]: R[K] extends Endpoint<infer Output, infer Input, any>
     ? Input extends undefined
       ? { fetch: () => Promise<Output> }
@@ -15,14 +15,14 @@ type RpcClient<R extends Router<any>> = {
     : never;
 };
 
-export const getRpcFetch =
+export const getTrpcFetch =
   ({
     endpointSlug,
     url,
     headers,
   }: {
     endpointSlug: string;
-  } & CreateRpcClientOptions) =>
+  } & createTrpcClientOptions) =>
   async (input?: any) => {
     const endpointName = kebabize(endpointSlug);
 
@@ -55,22 +55,21 @@ export const getRpcFetch =
     return result.data;
   };
 
-export interface CreateRpcClientOptions {
+export interface createTrpcClientOptions {
   url: string;
   headers: HeadersInit | (() => Promise<HeadersInit>);
 }
 
-// export const createRpcClient = <R extends ReturnType<typeof router>>({
-export const createRpcClient = <
+export const createTrpcClient = <
   R extends ReturnType<typeof router<any, Router<any>>>
 >(
-  opts: CreateRpcClientOptions
-): RpcClient<R> => {
-  return new Proxy({} as RpcClient<R>, {
+  opts: createTrpcClientOptions
+): TrpcClient<R> => {
+  return new Proxy({} as TrpcClient<R>, {
     get(target, prop) {
       if (typeof prop === "string") {
         return {
-          fetch: getRpcFetch({
+          fetch: getTrpcFetch({
             endpointSlug: prop,
             ...opts,
           }),