feat: added useQuery hook, updated examples

Author: coderhammer

.changeset/happy-hairs-return.md

@@ -0,0 +1,7 @@
+---
+"@backhooks/examples": patch
+"@backhooks/http": patch
+---
+
+- Updated types for headers and body hooks
+- Added useQuery hook

package.json

@@ -2,7 +2,7 @@
   "name": "backhooks",
   "scripts": {
     "build": "npm run build --workspaces --if-present",
-    "test": "npm run test --workspaces --if-present",
+    "test": "npm run build && npm run test --workspaces --if-present",
     "publish": "npm run build && changeset publish",
     "make:toc": "markdown-toc -i README.md",
     "format:code": "prettier -w .",

packages/examples/src/runtimes/h3.ts

@@ -8,11 +8,7 @@ import {
   App,
 } from "h3";
 import { listen } from "listhen";
-import {
-  configureBodyHook,
-  configureHeadersHook,
-  useHeaders,
-} from "@backhooks/http";
+import { configureBodyHook, configureHeadersHook } from "@backhooks/http";
 import { runHookContext } from "@backhooks/core";
 import { mainHandler } from "../handlers";
 
@@ -23,15 +19,13 @@ const makeHookableApp = (h3App: App) => {
   h3App.handler = async (event: H3Event) => {
     return runHookContext(() => {
       const headers = getHeaders(event);
-      configureHeadersHook((state) => {
+      configureHeadersHook(() => {
         return {
-          ...state,
           headers,
         };
       });
-      configureBodyHook((state) => {
+      configureBodyHook(() => {
         return {
-          ...state,
           fetch() {
             return readBody(event);
           },

packages/http/src/hooks/body.ts

@@ -1,11 +1,16 @@
 import { createHook } from "@backhooks/core";
 
+interface BodyHookState {
+  body?: any;
+  fetch?: () => any;
+}
+
 const [useBody, configureBodyHook] = createHook({
-  data() {
+  data(): BodyHookState {
     return {
-      body: undefined as any,
+      body: undefined,
       fetch() {
-        return undefined as any;
+        return undefined;
       },
     };
   },

packages/http/src/hooks/headers.ts

@@ -1,16 +1,14 @@
 import { createHook } from "@backhooks/core";
 
-const useHeadersKey = "@backhooks/http/useHeaders";
-
-export interface HeadersHookOptions {
+export interface HeadersHookState {
   headers?: Record<string, string>;
   fetch?: () => Record<string, string>;
 }
 
 const [useHeaders, configureHeadersHook] = createHook({
-  data() {
+  data(): HeadersHookState {
     return {
-      headers: undefined as Record<string, string>,
+      headers: undefined as undefined | Record<string, string>,
       fetch: () => {
         return {};
       },

packages/http/src/hooks/query.ts

@@ -0,0 +1,28 @@
+import { createHook } from "@backhooks/core";
+
+export interface QueryHookState {
+  query?: Record<string, string>;
+  fetch?: () => Record<string, string>;
+}
+
+const [useQuery, setQuery] = createHook({
+  data(): QueryHookState {
+    return {
+      query: undefined as undefined | Record<string, string>,
+      fetch: () => {
+        return {};
+      },
+    };
+  },
+  execute(state) {
+    if (state.query) {
+      return state.query;
+    }
+    if (state.fetch) {
+      state.query = state.fetch();
+    }
+    return (state.query || {}) as Record<string, string>;
+  },
+});
+
+export { useQuery, setQuery };

packages/http/src/middlewares/server.ts

@@ -1,26 +1,30 @@
 import { runHookContext } from "@backhooks/core";
 import { configureHeadersHook } from "../hooks/headers";
 import { configureBodyHook } from "../hooks/body";
+import { setQuery } from "../hooks/query";
 
 export const hooksMiddleware = () => {
   return (req, res, next) => {
     runHookContext(async () => {
-      configureHeadersHook((currentState) => {
+      configureHeadersHook(() => {
         return {
-          ...currentState,
           fetch() {
             return req.headers;
           },
         };
-      }),
-        configureBodyHook((currentState) => {
-          return {
-            ...currentState,
-            fetch() {
-              return req.body;
-            },
-          };
-        });
+      });
+      configureBodyHook(() => {
+        return {
+          fetch() {
+            return req.body;
+          },
+        };
+      });
+      setQuery(() => {
+        return {
+          query: req.query,
+        };
+      });
       next();
     }).catch((error) => {
       next(error);

packages/http/tests/server-middleware.spec.ts

@@ -5,6 +5,7 @@ import { json } from "body-parser";
 import { useBody } from "../src/hooks/body";
 import { useHeaders } from "../src/hooks/headers";
 import { hooksMiddleware } from "../src/middlewares/server";
+import { useQuery } from "../src/hooks/query";
 
 test("it should work with express", async () => {
   const app = express();
@@ -18,6 +19,12 @@ test("it should work with express", async () => {
       body,
     });
   });
+  app.get("/bar", (req, res) => {
+    const query = useQuery();
+    res.send({
+      query,
+    });
+  });
   const res = await request(app)
     .post("/")
     .send({
@@ -28,6 +35,9 @@ test("it should work with express", async () => {
     });
   expect(res.body.headers.foo).toBe("bar");
   expect(res.body.body.hello).toBe("world");
+
+  const res2 = await request(app).get("/bar?some=thing");
+  expect(res2.body.query.some).toBe("thing");
 });
 
 test("it should work with fastify", async () => {