Skip to content

Latest commit

 

History

History
65 lines (57 loc) · 2.19 KB

README.md

File metadata and controls

65 lines (57 loc) · 2.19 KB
Raw

@solid-mediakit/trpc

tRPC integration for SolidJS.

Installation

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

Usage

import { type VoidComponent } from 'solid-js'
import { A, Head, Title, Meta, Link } from 'solid-start'
import { trpc } from '../utils/trpc'

const Home: VoidComponent = () => {
  const hello = trpc.example.hello.createQuery(() => ({ name: 'from tRPC' }))
  return (
    <>
      <Head>
        <Title>Create JD App</Title>
        <Meta name='description' content='Generated by create-jd-app' />
        <Link rel='icon' href='/favicon.ico' />
      </Head>
      <main class='flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#026d56] to-[#152a2c]'>
        <div class='container flex flex-col items-center justify-center gap-12 px-4 py-16 '>
          <h1 class='text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]'>
            Create <span class='text-[hsl(88, 77%, 78%)]'>JD</span> App
          </h1>
          <div class='grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8'>
            <A
              class='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
              href='https://start.solidjs.com'
              target='_blank'
            >
              <h3 class='text-2xl font-bold'>Solid Start →</h3>
              <div class='text-lg'>
                Learn more about Solid Start and the basics.
              </div>
            </A>
            <A
              class='flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20'
              href='https://github.com/orjdev/create-jd-app'
              target='_blank'
            >
              <h3 class='text-2xl font-bold'>JD End →</h3>
              <div class='text-lg'>
                Learn more about Create JD App, the libraries it uses, and how
                to deploy it
              </div>
            </A>
          </div>
          <p class='text-2xl text-white'>{hello.data}</p>
        </div>
      </main>
    </>
  )
}

export default Home

Read More Here