trpc-qwik-city

KO | EN

gitlite — search

#javascript #python #ai #typescript #golang #machine-learning #linux #nodejs #windows #awesome #vue #mcp #ios #open-source

(★ 32)

Qwik City adapter for trpc.io

trpc-qwik-city 최신버젼 다운로드

최종 버전 다운로드 (.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
```

or

```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 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

trpc-qwik-city

trpc-qwik-city 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README