Skip to content
This repository has been archived by the owner on Mar 23, 2024. It is now read-only.
/ prpc Public archive

Utility Library For NextJS, Bling & SolidStart, Combining Tanstack Query With server$

Notifications You must be signed in to change notification settings

OrJDev/prpc

Repository files navigation

pRPC

Write server code in frontend files with built in colocation, middlewares, schema validation and more, everything is type safed and works with NextJS, Bling and SolidStart

Read more at our docs

pRPC currently has 3 adapters, one for NextJS, one for Bling and one for SolidStart, it has a trpc like API, except it using server$ under the hood which allows colocation (server code in frontend files)

Query Example

import { middleware$, query$, response$, error$ } from '@prpc/react'
import { z } from 'zod'

const testMw = middleware$(async ({ request$ }) => {
  const ua = request$.headers.get('user-agent')
  console.log('middleware called on server ', ua)
  if (ua?.includes('bot')) {
    return error$('Bots are not allowed')
  }
  return {
    ua,
  }
})

const myQuery = query$({
  queryFn: ({ request$, ctx$, payload }) => {
    console.log(
      'queryFn called on server ',
      ctx$.ua === request$.headers.get('user-agent'),
      payload
    )
    return response$(payload.num / 2)
  },
  key: 'testQuery',
  middlewares: [testMw],
  schema: z.object({
    num: z.number(),
  }),
})

NextJS

Read More Here Regarding NextJS

SolidStart

Read More Here Regarding SolidStart

Bling

Read More Here Regarding Bling

Full Page Colocation Example - NextJS

How would this look like (NextJS example):

import { middleware$, query$, response$, error$ } from '@prpc/react'
import { type NextPage } from 'next'
import { z } from 'zod'

const testMw = middleware$(async ({ request$ }) => {
  const ua = request$.headers.get('user-agent')
  console.log('middleware called on server ', ua)
  if (ua?.includes('bot')) {
    return error$('Bots are not allowed')
  }
  return {
    ua,
  }
})

const myQuery = query$({
  queryFn: ({ request$, ctx$, payload }) => {
    console.log(
      'queryFn called on server ',
      ctx$.ua === request$.headers.get('user-agent'),
      payload
    )
    return response$(payload.num / 2)
  },
  key: 'testQuery',
  middlewares: [testMw],
  schema: z.object({
    num: z.number(),
  }),
})

const Home: NextPage = () => {
  const { data, isLoading } = myQuery({
    num: 2,
  })

  return (
    <main className='flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]'>
      {isLoading ? (
        <p className='text-xl font-bold text-white'>Loading...</p>
      ) : data ? (
        <div className='text-5xl text-white'>query: {data}</div>
      ) : null}
    </main>
  )
}

export default Home

About

Utility Library For NextJS, Bling & SolidStart, Combining Tanstack Query With server$

Resources

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published