tRPC
🤝
Qwik City
End-to-end typesafe APIs made easy with
tRPC.io in Qwik City applications.
Build & consume fully typesafe APIs, without schemas or code generation.
Working example: tRPC Qwik City
Getting started
Install trpc-qwik-city package
npm install trpc-qwik-city
or
yarn add trpc-qwik-city
Create tRPC routes
e.g.
// 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
// 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.
import trpc from '~/client/trpc';
...
...
const authors = await trpc(fetch.bind(window)).query('authors:list');
License
The ISC License.
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
81 Dec 31, 2022
3 Oct 7, 2022
7 Dec 20, 2022
5 Dec 28, 2022
15 Dec 21, 2022
120 Dec 2, 2022
2 May 2, 2022