OrJDev
81 lines
1.9 KiB
Markdown
81 lines
1.9 KiB
Markdown
# Solid tRPC - v10 - RC
|
|
|
|
## Getting Started
|
|
|
|
I recommend using [Create JD App](https://github.com/OrJDev/create-jd-app) but if you want to create a project from scratch, you can follow the steps below:
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
npm install @trpc/client@10.0.0-rc.2 @trpc/server@10.0.0-rc.2 solid-trpc@next @tanstack/solid-query
|
|
```
|
|
|
|
### Creating A Client
|
|
|
|
```ts
|
|
// utils/trpc.ts
|
|
import { IAppRouter } from "@/whereMyRouterAt"; // your router type
|
|
import { createTRPCSolid } from "solid-trpc";
|
|
import { httpBatchLink } from "@trpc/client";
|
|
import { QueryClient } from "@tanstack/solid-query";
|
|
|
|
export const trpc = createTRPCSolid<IAppRouter>();
|
|
export const client = trpc.createClient({
|
|
links: [
|
|
httpBatchLink({
|
|
url: "/api/trpc",
|
|
}),
|
|
],
|
|
});
|
|
export const queryClient = new QueryClient();
|
|
```
|
|
|
|
### TRPC Provider
|
|
|
|
```tsx
|
|
// App.tsx
|
|
import { Component } from "solid-js";
|
|
import { client, trpc, queryClient } from "./utils/trpc"; // the client we created above
|
|
import Home from "./pages/Home"; // page for instance
|
|
|
|
interface IAppProps {}
|
|
|
|
const App: Component<IAppProps> = ({}) => {
|
|
return (
|
|
<trpc.Provider client={client} queryClient={queryClient}>
|
|
<Home />
|
|
</trpc.Provider>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
### Example
|
|
|
|
```ts
|
|
import { trpc } from "./utils/trpc";
|
|
import { createSignal } from "solid-js";
|
|
const [name, setName] = createSignal("");
|
|
const res = trpc.queryName.useQuery(() => ({ name: name() })); // this will be called onMount and when name changes
|
|
```
|
|
|
|
### Using Options
|
|
|
|
If you are using the `enabled` property make sure you follow Solid Query rules:
|
|
|
|
```ts
|
|
const [enabled, setEnabled] = createSignal(false);
|
|
const query = trpc.queryName.useQuery(() => "hey there", {
|
|
// ❌ passing a signal directly is not reactive
|
|
// enabled: enabled(),
|
|
|
|
// ✅ passing a function that returns a signal is reactive
|
|
get enabled() {
|
|
return enabled();
|
|
},
|
|
});
|
|
```
|
|
|
|
And options could be passed to all hooks.
|