trpc-qwik-city

KO | EN

gitlite — search

#javascript #python #hacktoberfest #go #machine-learning #docker #nodejs #java #cli #awesome-list #security #pytorch #mcp #ios

(★ 32)

Qwik City adapter for trpc.io

trpc-qwik-city Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

End-to-end typesafe APIs made easy with 
 <a href="https://trpc.io">tRPC.io</a> in <a href="https://qwik.builder.io/qwikcity/overview">Qwik City</a> applications.
 
 Build & consume fully typesafe APIs, without schemas or code generation.

## Working example: [tRPC Qwik City](https://github.com/gioboa/trpc-qwik-city-example)

## Getting started

### Install `trpc-qwik-city` package

```ts
npm install trpc-qwik-city
```

```ts
yarn add trpc-qwik-city
```

### Create tRPC [routes](https://trpc.io/docs/router)

e.g.

```ts
// src/server/trpc/index.ts

import type { inferAsyncReturnType } from '@trpc/server';
import * as trpc from '@trpc/server';
import trpcTransformer from 'trpc-transformer';
import authors from './authors';

export const createContext = async () => ({});

export const router = trpc
 .router<inferAsyncReturnType<typeof createContext>>()
 .transformer(trpcTransformer)
 .merge('authors:', authors);

export type Router = typeof router;
```

### Expose tRPC Api

```ts
// src/routes/api/trpc/[whatever]/index.ts

import type { EndpointHandler } from '@builder.io/qwik-city';
import { resolveTRPCResponse } from 'trpc-qwik-city';
import { createContext, router } from '../../../../server/trpc';

// GET manage queries
export const onGet: EndpointHandler = async ({ request, params }) => {
  const response = await resolveTRPCResponse({
    request,
    params,
    router,
    createContext,
  });
  const json = await response.json();
  return json;
};

// POST manage mutations
export const onPost: EndpointHandler = async ({ request, params }) => {
  const response = await resolveTRPCResponse({
    request,
    params,
    router,
    createContext,
  });
  const json = await response.json();
  return json;
};
```

### Use tRPC inside component

e.g.

```ts
import trpc from '~/client/trpc';
...
...
const authors = await trpc(fetch.bind(window)).query('authors:list');
```

## License

The [ISC License](https://github.com/gioboa/trpc-qwik-city/blob/main/LICENSE).

trpc-qwik-city

trpc-qwik-city Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

trpc-qwik-city

trpc-qwik-city Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README