inital

README.MD

@@ -0,0 +1,102 @@
+# SolidJS tRPC
+
+## 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 solid-trpc
+```
+
+### Creating A Client
+
+```ts
+// utils/trpc.ts
+import { IAppRouter } from "api/src/routers/_route"; // your trpc appRouter type
+import { createSolidQueryHooks } from "solid-trpc";
+
+export const trpc = createSolidQueryHooks<IAppRouter>();
+export const client = trpc.createClient({
+  url: "/api/trpc", // your trpc server url
+});
+```
+
+### TRPC Provider
+
+```tsx
+// App.tsx
+import { QueryClient } from "@tanstack/solid-query";
+import { Component } from "solid-js";
+import { TRPCProvider } from "solid-trpc";
+import { client } from "./utils/trpc"; // the client we created above
+import Home from "./pages/Home"; // any page that uses trpc
+
+interface IAppProps {}
+
+const queryClient = new QueryClient();
+const App: Component<IAppProps> = ({}) => {
+  return (
+    <TRPCProvider client={client} queryClient={queryClient}>
+      <Home />
+    </TRPCProvider>
+  );
+};
+
+export default App;
+```
+
+### Queries
+
+```tsx
+// pages/Home.tsx
+import { Component } from "solid-js";
+import { trpc } from "../../utils/trpc";
+
+interface IHomeProps {}
+
+const Home: Component<IHomeProps> = ({}) => {
+  const test = trpc.createQuery(() => ["example.test", { name: "example" }]);
+
+  return (
+    <div>
+      <h1>{test.data ?? "no data || yet"}</h1>
+    </div>
+  );
+};
+
+export default Home;
+```
+
+### Mutations
+
+```tsx
+// pages/Home.tsx
+import { Component, onMount } from "solid-js";
+import { trpc } from "../../utils/trpc";
+
+interface IHomeProps {}
+
+const Home: Component<IHomeProps> = ({}) => {
+  const test = trpc.createMutation(() => "example.mTest");
+
+  onMount(() => {
+    test.mutateAsync({ number: 3 });
+  });
+
+  return (
+    <div>
+      <h1>{test.data ?? "no data || yet"}</h1>
+    </div>
+  );
+};
+
+export default Home;
+```
+
+## What is different
+
+- No SSR
+- Replace "use" with "create" (e.g. useQuery -> createQuery)
+- Query paths (key and input) are being treated as Solid Accessor (callback) instead of a string (eg: useQuery(["MyKey", {...}]) -> createQuery(()=> ["MyKey", {...}]))