Update README.MD
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
# Solid tRPC - v10 - RC
|
# Solid tRPC - v10
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
@@ -33,34 +33,47 @@ export const queryClient = new QueryClient();
|
|||||||
### TRPC Provider
|
### TRPC Provider
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
// App.tsx
|
// entry-client.tsx
|
||||||
import { Component } from "solid-js";
|
import { mount, StartClient } from "solid-start/entry-client";
|
||||||
import { client, trpc, queryClient } from "./utils/trpc"; // the client we created above
|
import { client, queryClient, trpc } from "./utils/trpc";
|
||||||
import Home from "./pages/Home"; // page for instance
|
|
||||||
|
|
||||||
interface IAppProps {}
|
mount(
|
||||||
|
() => (
|
||||||
const App: Component<IAppProps> = ({}) => {
|
|
||||||
return (
|
|
||||||
<trpc.Provider client={client} queryClient={queryClient}>
|
<trpc.Provider client={client} queryClient={queryClient}>
|
||||||
<Home />
|
<StartClient />
|
||||||
</trpc.Provider>
|
</trpc.Provider>
|
||||||
);
|
),
|
||||||
};
|
document
|
||||||
|
);
|
||||||
export default App;
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Example
|
### Example
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
|
// routes/example.tsx
|
||||||
import { trpc } from "./utils/trpc";
|
import { trpc } from "./utils/trpc";
|
||||||
import { createSignal } from "solid-js";
|
import { createSignal } from "solid-js";
|
||||||
const [name, setName] = createSignal("");
|
const [name, setName] = createSignal("");
|
||||||
const res = trpc.queryName.useQuery(() => ({ name: name() })); // this will be called onMount and when name changes
|
const res = trpc.queryName.useQuery(() => ({ name: name() })); // this will be called onMount and when name changes
|
||||||
```
|
```
|
||||||
|
|
||||||
### Using Options
|
### Reactivity
|
||||||
|
|
||||||
|
|
||||||
|
## Input
|
||||||
|
|
||||||
|
Solid tRPC input is considered to be a Solid accessor, meaning that you are required to pass a callback and SQ will rerun the tRPC endpoint whenever the signal changes.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const [name, setName] = createSignal("John");
|
||||||
|
trpc.example.hello.useQuery(name); // ✅
|
||||||
|
trpc.example.hello.useQuery(name()); // ❌
|
||||||
|
trpc.example.useQuery(()=> name().slice(1)); // ✅
|
||||||
|
// or even
|
||||||
|
trpc.example.useQuery(()=> "John"); // ✅ will be called once
|
||||||
|
```
|
||||||
|
|
||||||
|
## Enabled Property
|
||||||
|
|
||||||
If you are using the `enabled` property make sure you follow Solid Query rules:
|
If you are using the `enabled` property make sure you follow Solid Query rules:
|
||||||
|
|
||||||
@@ -76,5 +89,3 @@ const query = trpc.queryName.useQuery(() => "hey there", {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
And options could be passed to all hooks.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user