Install

Adding MediaKit/tRPC to SolidStart

It is recommended to use Create JD App to create a fully working tRPC project instead of having to do all of this.

Install

pnpm install @solid-mediakit/trpc@latest @tanstack/solid-query@latest @trpc/client@latest @trpc/server@latest solid-start-trpc@latest

Creating The tRPC Client

This is the trpc query client that will be used from any page.

import { QueryClient } from '@tanstack/solid-query'
import { createTRPCSolidStart } from '@solid-mediakit/trpc'
import { httpBatchLink } from '@trpc/client'
import { isServer } from 'solid-js/web'
import type { AppRouter } from './router' // wherever your trpc router is located

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return ''
  return `http://localhost:${process.env.PORT ?? 3000}`
}

export const trpc = createTRPCSolidStart<IAppRouter>({
  config(event) {
    // PageEvent of Solid-start
    return {
      links: [
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers: () => {
            if (isServer && event?.request) {
              // do something
            }
            return {}
          },
        }),
      ],
    }
  },
})

export const queryClient = new QueryClient()

TRPCProvider

Make sure to wrap your app.tsx with the TRPCProvider and QueryClientProvider from solid-query.

// @refresh reload
import { MetaProvider, Title } from '@solidjs/meta'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import { Suspense } from 'solid-js'
import './app.css'
import { queryClient, trpc } from './utils/trpc'
import { QueryClientProvider } from '@tanstack/solid-query'

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <Suspense>
            <QueryClientProvider client={queryClient}>
              <trpc.Provider queryClient={queryClient}>
                {props.children}
              </trpc.Provider>
            </QueryClientProvider>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

Now go ahead and setup a tRPC router here