npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

trpc-netlify-functions

v0.5.0

Published

An adapter to run tRPC Server on Netlify Functions

Downloads

20

Readme

tRPC Netlify Functions Adapter

An Adapter to run tRPC Server on Netlify Functions.

The Problem

When I'm not building with a framework (like NextJS), but into 2 separate pieces of a Client side, and a Backend running purely with Netlify Serverless Functions, I often run into cases where tRPC's Lambda Adapter cannot be fully used within the Netlify Handler, because the event object from Netlify and APIGateway Proxy event object isn't the same.

(An example of this is my Netlify Fullstack Template)

The solution

Inspired by tRPC SvelteKit and tRPC Lambda Adapter, I have created this adapter to intercept the Netlify event and convert that into a request to a pure Node server underneath for tRPC to resolve.

How to use this adapter

Install dependencies

npm install @netlify/functions @trpc/server trpc-netlify-functions

Create a tRPC Router and context

Implement your tRPC router and context. Some samples are given below. Assuming these are created in the trpc folder.

// file: trpc/router.ts
import { initTRPC } from '@trpc/server';

export const t = initTRPC.create();

export const userRouter = t.router({
  me: t.procedure.query((_req) => "hello, it's me"),
});

export const appRouter = t.router({
  users: userRouter,
});

export type AppRouter = typeof appRouter;
// file: trpc/context.ts
import { inferAsyncReturnType } from '@trpc/server';
import { CreateNetlifyContextOptions } from 'trpc-netlify-functions';

export function createContext({ event, context }: CreateNetlifyContextOptions) {
  // Empty context
  return {};
}

export type Context = inferAsyncReturnType<typeof createContext>;

Use this Netlify Functions Adapter

With Netlify Functions v1 a.k.a the Lambda Compatible Handler

Create a file called trpc.ts inside your Netlify Functions folder. Default is: [PROJECT_DIRECTORY]/netlify/functions and add the adapter in like so.

// file: netlify/functions/trpc.ts
import { netlifyTRPCHandler } from 'trpc-netlify-functions';
import { createContext } from '../../trpc/context';
import { appRouter } from '../../trpc/router';

export const handler = netlifyTRPCHandler({
  router: appRouter,
  createContext,
});

Build and deploy your code, and you can use your Netlify Functions URL to call your function.

| Endpoint | HTTP URI | | ---------- | -------------------------------------------------------------- | | users.me | GET https://<your-site-url>/.netlify/functions/trpc/users.me |