From d0d87d7c97b62e4120380beed2fa42d043afe758 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 31 Dec 2022 10:51:38 -0600
Subject: [PATCH] Adding to docs to make it easier for solidjs newcomers

- Adding more specific example of using output of query response in a reactive context
- How to invalidate queries as it's different than trpc docs
---
 README.MD | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/README.MD b/README.MD
index 430f8f8..21613d6 100644
--- a/README.MD
+++ b/README.MD
@@ -72,13 +72,35 @@ Solid tRPC input is considered to be a Solid accessor, meaning that you are requ
 
 ```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
 ```
 
+## Output
+To use the output of the query, you must remember to **not** destructure elements. Doing so violates the reactivity of the query result. This principle is general to Solid, please read more here https://github.com/solidjs/solid/discussions/408#discussioncomment-628486.
+
+```ts
+const { data, refetch...} = trpc.example.hello.useQuery(name()); // ❌ data will be evaluated only once and not update
+
+const Navbar = () => {
+  return <div>{data}</div>;
+}
+
+---
+
+const queryRes = trpc.example.hello.useQuery(name()); // ✅
+
+const Navbar = () => {
+  return <div>{queryRes.data}</div>;
+}
+
+```
+
 ## Enabled Property 
 
 If you are using the `enabled` property make sure you follow Solid Query rules:
@@ -95,3 +117,31 @@ const query = trpc.queryName.useQuery(() => "hey there", {
   },
 });
 ```
+
+## Query Invalidation
+To invalidate queries, please see the following example of using `utils` which come as part of the `trpc` object you created through `createTRPCSolid.`
+
+```ts
+// navbar.tsx
+const queryRes = trpc.example.hello.useQuery(name()); // ✅
+
+const Navbar = () => {
+  return <div>{queryRes.data}</div>;
+}
+```
+
+```ts
+// another file - footer.tsx
+const Footer = () => {
+  const trpcUtils = trpc.useContext()
+  
+  const sayHelloAgain = () => {
+    trpcUtils.example.hello.invalidate()
+  }
+  
+  return <button onClick={sayHelloAgain}>say hello again</div>;
+}
+
+```
+
+_Note: the official trpc docs use a different method for query invalidation : https://trpc.io/docs/v9/invalidateQueries_