# next-rpc-ts

> This is a library for

Latest version **0.1.1** (published 2022-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-rpc-ts
pnpm add next-rpc-ts
yarn add next-rpc-ts
bun add next-rpc-ts
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-06-15 |
| First published | 2022-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 78 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jotoh98 |
| Maintainers | jotoh98 |
| Keywords | next, rpc, typescript |

## Links

- npm: https://www.npmjs.com/package/next-rpc-ts
- npm.io page: https://npm.io/package/next-rpc-ts

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2022-06-15
- 0.1.0 — 2022-05-26

## README

# Next JSON RPC

This is a library for

- [Typescript](https://www.typescriptlang.org/)
- [Nextjs](https://nextjs.org/)
- [remote procedure calls (RPC)](https://wikipedia.org/wiki/Remote_procedure_call).

## Getting started

Install the package via

```shell
npm i next-rpc-ts
```

or

```shell
yarn add next-rpc-ts
```

## How to use `next-rpc-ts`

### 1. Create a router

```ts
// router.ts
import { createRouter } from 'next-rpc-ts'

export const router = createRouter().addRoute(
  'myFirstRoute',
  (x: string) => x.length
)
```

### 2. Export the routers api handler

```ts
// ~/pages/api/[...route].ts
import { router } from '~/router'

const handler = router.getApiHandler()

export default handler
```

**_Important_**: The name of the file has to correspond to the router configuration `apiFileName` field. More about
configuration [here](#router-configuration)

> You can learn more about this type of api route in the [nextjs docs](https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes).

### 3. Create the client side fetcher function

```ts
// fetcher.ts
import { createRouteFetcher } from 'next-rpc-ts'
import type { router } from '~/router'

export const fetcher = createRouteFetcher({
  baseUrl: 'http://localhost:3000',
})
```

You can learn more about the fetchers configuration [here](#fetcher-configuration)

### 4. Use the fetcher in a type-safe way

```ts
import { fetcher } from '~/fetcher'

// length = 6
const length = await fetcher('myFirstRoute', 'string')

// type error
await fetcher('myFirstRoute', 4)
```

## Router Configuration

The router shares some common config options with the fetcher: [config.ts](src/config.ts).

You can find the jsdoc for the router configuration [here](src/Router.ts).

## Fetcher Configuration

The fetcher shares some common config options with the router: [config.ts](src/config.ts).

You can find the jsdoc for the fetcher configuration [here](src/createRouteFetcher.ts).

## How does this work?

Typescript makes it possible to preserve each individual routes function type assigned to the specific name.

By collecting all the routes and juggling around with their types we work out a few type connections, including but
not limited to:

- the parameter types for a route by name
- the return type for a route by name
- the context type by a functions return type
- etc.

We can import the routers type to the client and into the `createRouteFetcher` function.
The different routes are then combined into a function taking the name, the list of parameters and returning a
promise holding the routes return value.

---
_Source: https://npm.io/package/next-rpc-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._