feat: refreshable query atom (#19)

* feat: refreshable query atom

* refactor: remove dependency on `atomWithRefresh`

* ci: bump Node to 18

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "buildCommand": "compile",
   "sandboxes": ["new", "react-typescript-react-ts"],
-  "node": "14"
+  "node": "18"
 }

package.json

@@ -64,7 +64,7 @@
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jotai": "^2.2.1",
+    "jotai": "^2.7.0",
     "microbundle": "^0.15.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",

src/createTRPCJotai.ts

@@ -47,16 +47,24 @@ const atomWithQuery = <TProcedure extends AnyQueryProcedure, TClient>(
   getOptions?: ValueOrGetter<TRPCRequestOptions & CustomOptions>,
 ) => {
   type Output = inferProcedureOutput<TProcedure>;
-  const queryAtom = atom(async (get, { signal }) => {
-    const procedure = getProcedure(getClient(get), path);
-    const options = isGetter(getOptions) ? getOptions(get) : getOptions;
-    const input = await (isGetter(getInput) ? getInput(get) : getInput);
-    if (input === DISABLED) {
-      return options?.disabledOutput;
-    }
-    const output: Output = await procedure.query(input, { signal, ...options });
-    return output;
-  });
+  const refreshAtom = atom(0);
+  const queryAtom = atom(
+    async (get, { signal }) => {
+      get(refreshAtom);
+      const procedure = getProcedure(getClient(get), path);
+      const options = isGetter(getOptions) ? getOptions(get) : getOptions;
+      const input = await (isGetter(getInput) ? getInput(get) : getInput);
+      if (input === DISABLED) {
+        return options?.disabledOutput;
+      }
+      const output: Output = await procedure.query(input, {
+        signal,
+        ...options,
+      });
+      return output;
+    },
+    (_, set) => set(refreshAtom, (counter) => counter + 1),
+  );
   return queryAtom;
 };