Install

Adding pRPC to solid-start

Create pRPC App

You can use create-prpc-app to create a new pRPC app.

npm create prpc-app@latest

Or do it manually

Install

pnpm add @prpc/solid@latest @tanstack/solid-query@beta @prpc/vite@latest

Vite Plugin

Add the following to your vite config

import prpc from '@prpc/vite';
import solid from 'solid-start/vite';
...
export default defineConfig(() => {
  return {
    ...
    plugins: [
      prpc(), // Important that this plugin runs before the solid one!
      solid()
    ]
    ...
  }
})

QueryProvider

// @refresh reload
import { QueryProvider } from '@prpc/solid'
import { Suspense } from 'solid-js'
import {
  Body,
  ErrorBoundary,
  FileRoutes,
  Head,
  Html,
  Link,
  Meta,
  Routes,
  Scripts,
  Title,
} from 'solid-start'

export default function Root() {
  return (
    <Html lang='en'>
      <Head>
        <Title>pRPC Basic</Title>
        <Meta charset='utf-8' />
        <Meta name='viewport' content='width=device-width, initial-scale=1' />
        <Meta name='theme-color' content='#026d56' />
        <Meta name='description' content='pRPC Basic example' />
        <Link rel='icon' href='/favicon.ico' />
      </Head>
      <Body>
        <QueryProvider>
          <Suspense>
            <ErrorBoundary>
              <Routes>
                <FileRoutes />
              </Routes>
            </ErrorBoundary>
          </Suspense>
        </QueryProvider>
        <Scripts />
      </Body>
    </Html>
  )
}