gioboa/trpc-qwik-city

Qwik City adapter for trpc.io

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.