# @nanorpc/client

> ## Installation

Latest version **0.0.23** (published 2023-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nanorpc/client
pnpm add @nanorpc/client
yarn add @nanorpc/client
bun add @nanorpc/client
```

## 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.0.23 |
| Published | 2023-08-20 |
| First published | 2023-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrvase |

## Links

- npm: https://www.npmjs.com/package/@nanorpc/client
- npm.io page: https://npm.io/package/@nanorpc/client

## Recent versions

- 0.0.23 (latest) — 2023-08-20
- 0.0.22 — 2023-07-31
- 0.0.21 — 2023-07-27
- 0.0.20 — 2023-06-09
- 0.0.19 — 2023-06-07
- 0.0.18 — 2023-06-06
- 0.0.17 — 2023-06-06
- 0.0.16 — 2023-06-05
- 0.0.15 — 2023-06-05
- 0.0.14 — 2023-06-05
- 0.0.13 — 2023-06-02
- 0.0.12 — 2023-06-02
- 0.0.11 — 2023-06-02
- 0.0.10 — 2023-06-02
- 0.0.9 — 2023-06-02
- … 8 more at https://npm.io/package/@nanorpc/client/versions

## README

# `@nanorpc/client`

## Installation

```bash
# npm
npm install @nanorpc/client

# yarn
yarn add @nanorpc/client

# pnpm
pnpm add @nanorpc/client
```

## Basic setup

This setup imports the type of your router to get end-to-end typesafety. See [@nanorpc/server](https://github.com/mrvase/nanorpc/tree/main/packages/server) to learn more.

```ts
import { createClient, withMiddleware } from "@nanorpc/client";
import { createSWRMiddleware } from "@nanorpc/client/swr";
import type { Router } from "./server";

let fetcher = async (key, options) => {
  return await fetch(key, options).then((res) => res.json());
};

// Optionally use the SWR cache middleware
// to store and retrieve data from the cache
fetcher = withMiddleware(fetcher, [createSWRMiddleware()]);

export const { query, mutate } = createClient<Router>("/api")(fetcher);
```

### Call your remote procedure

```ts
import { isError } from "@nanorpc/client";
import { query, mutate } from "./client";

async function getPost(id: string) {
  // Get the fully typed post
  const response = await query.getPost(id);

  // If it responds with an error, log it and return undefined
  if (isError(response)) {
    console.error(response.error);
    return;
  }

  return response;
}
```

## Example with `React` and `swr`

```tsx
import { useQuery, useMutation } from "@nanorpc/client/swr";
import { query, mutate } from "./client";

const errors = {
  NOT_FOUND: "This post does not exist",
  SERVER_ERROR: "Something unexpected happened. Please try again later",
};

export default function Post({ id }: { id: string }) {
  const post = useQuery(query.posts.getPost(id));

  if (post.error === "NOT_FOUND") {
    const createPost = async () => {
      await mutate.posts.createPost({ id });
      post.update();
    };

    return <button onClick={createPost}>Create post</button>;
  }

  if (post.error) {
    return <>Error: {errors[post.error]}</>;
  }

  if (!post.data) {
    return <>Loading...</>;
  }

  return <h1>{post.data.title}</h1>;
}
```

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