fix(deps)!: update tanstack-query monorepo (#126)

* fix(deps): update tanstack-query monorepo to ^5.21.2

* fix(deps): update tanstack-query monorepo

* fix: type issue with transformer

* fix: issues with next-auth, updated to next canary

* chore: fix type issue in trpc route

* chore: fix formatting

---------

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/api/src/client.ts

@@ -1,5 +1,5 @@
 import { createTRPCReact } from "@trpc/react-query";
 
-import type { AppRouter } from "..";
+import type { AppRouter } from ".";
 
 export const clientApi = createTRPCReact<AppRouter>();

packages/api/src/index.ts

@@ -0,0 +1,33 @@
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+
+import type { AppRouter } from "./root";
+import { appRouter } from "./root";
+import { createCallerFactory, createTRPCContext } from "./trpc";
+
+/**
+ * Create a server-side caller for the tRPC API
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+const createCaller = createCallerFactory(appRouter);
+
+/**
+ * Inference helpers for input types
+ * @example
+ * type PostByIdInput = RouterInputs['post']['byId']
+ *      ^? { id: number }
+ **/
+type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helpers for output types
+ * @example
+ * type AllPostsOutput = RouterOutputs['post']['all']
+ *      ^? Post[]
+ **/
+type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export { createTRPCContext, appRouter, createCaller };
+export type { AppRouter, RouterInputs, RouterOutputs };

packages/api/src/router/test/board.spec.ts

@@ -13,7 +13,7 @@ import {
 } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
 
-import type { RouterOutputs } from "../../..";
+import type { RouterOutputs } from "../..";
 import { boardRouter } from "../board";
 
 // Mock the auth module to return an empty session

packages/api/src/router/test/integration.spec.ts

@@ -5,7 +5,7 @@ import { createId } from "@homarr/db";
 import { integrations, integrationSecrets } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
 
-import type { RouterInputs } from "../../..";
+import type { RouterInputs } from "../..";
 import { encryptSecret, integrationRouter } from "../integration";
 import { expectToBeDefined } from "./board.spec";
 

packages/api/src/trpc.ts

@@ -17,49 +17,28 @@ import { ZodError } from "@homarr/validation";
 /**
  * 1. CONTEXT
  *
- * This section defines the "contexts" that are available in the backend API
+ * This section defines the "contexts" that are available in the backend API.
  *
- * These allow you to access things like the database, the session, etc, when
- * processing a request
+ * These allow you to access things when processing a request, like the database, the session, etc.
  *
- */
-interface CreateContextOptions {
-  session: Session | null;
-}
-
-/**
- * This helper generates the "internals" for a tRPC context. If you need to use
- * it, you can export it from here
+ * This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
+ * wrap this and provides the required context.
  *
- * Examples of things you may need it for:
- * - testing, so we dont have to mock Next.js' req/res
- * - trpc's `createSSGHelpers` where we don't have req/res
- * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
- */
-const createInnerTRPCContext = (opts: CreateContextOptions) => {
-  return {
-    session: opts.session,
-    db,
-  };
-};
-
-/**
- * This is the actual context you'll use in your router. It will be used to
- * process every request that goes through your tRPC endpoint
- * @link https://trpc.io/docs/context
+ * @see https://trpc.io/docs/server/context
  */
 export const createTRPCContext = async (opts: {
-  headers?: Headers;
-  auth: Session | null;
+  headers: Headers;
+  session: Session | null;
 }) => {
-  const session = opts.auth ?? (await auth());
-  const source = opts.headers?.get("x-trpc-source") ?? "unknown";
+  const session = opts.session ?? (await auth());
+  const source = opts.headers.get("x-trpc-source") ?? "unknown";
 
   console.log(">>> tRPC Request from", source, "by", session?.user);
 
-  return createInnerTRPCContext({
+  return {
     session,
-  });
+    db,
+  };
 };
 
 /**
@@ -70,18 +49,21 @@ export const createTRPCContext = async (opts: {
  */
 const t = initTRPC.context<typeof createTRPCContext>().create({
   transformer: superjson,
-  errorFormatter({ shape, error }) {
-    return {
-      ...shape,
-      data: {
-        ...shape.data,
-        zodError:
-          error.cause instanceof ZodError ? error.cause.flatten() : null,
-      },
-    };
-  },
+  errorFormatter: ({ shape, error }) => ({
+    ...shape,
+    data: {
+      ...shape.data,
+      zodError: error.cause instanceof ZodError ? error.cause.flatten() : null,
+    },
+  }),
 });
 
+/**
+ * Create a server-side caller
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
 /**
  * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
  *