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>

apps/nextjs/src/app/[locale]/(main)/integrations/edit/[id]/page.tsx

@@ -14,7 +14,7 @@ export default async function EditIntegrationPage({
   params,
 }: EditIntegrationPageProps) {
   const t = await getScopedI18n("integration.page.edit");
-  const integration = await api.integration.byId.query({ id: params.id });
+  const integration = await api.integration.byId({ id: params.id });
 
   return (
     <Container>

apps/nextjs/src/app/[locale]/(main)/integrations/page.tsx

@@ -47,7 +47,7 @@ interface IntegrationsPageProps {
 export default async function IntegrationsPage({
   searchParams,
 }: IntegrationsPageProps) {
-  const integrations = await api.integration.all.query();
+  const integrations = await api.integration.all();
   const t = await getScopedI18n("integration");
 
   return (

apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { PropsWithChildren } from "react";
 import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
@@ -9,19 +10,7 @@ import superjson from "superjson";
 
 import { clientApi } from "@homarr/api/client";
 
-import { env } from "~/env.mjs";
-
-const getBaseUrl = () => {
-  if (typeof window !== "undefined") return ""; // browser should use relative url
-  if (env.VERCEL_URL) return env.VERCEL_URL; // SSR should use vercel url
-
-  return `http://localhost:${env.PORT}`; // dev SSR should use localhost
-};
-
-export function TRPCReactProvider(props: {
-  children: React.ReactNode;
-  headers?: Headers;
-}) {
+export function TRPCReactProvider(props: PropsWithChildren) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -35,7 +24,6 @@ export function TRPCReactProvider(props: {
 
   const [trpcClient] = useState(() =>
     clientApi.createClient({
-      transformer: superjson,
       links: [
         loggerLink({
           enabled: (opts) =>
@@ -43,11 +31,12 @@ export function TRPCReactProvider(props: {
             (opts.direction === "down" && opts.result instanceof Error),
         }),
         unstable_httpBatchStreamLink({
-          url: `${getBaseUrl()}/api/trpc`,
+          transformer: superjson,
+          url: getBaseUrl() + "/api/trpc",
           headers() {
-            const headers = new Map(props.headers);
+            const headers = new Headers();
             headers.set("x-trpc-source", "nextjs-react");
-            return Object.fromEntries(headers);
+            return headers;
           },
         }),
       ],
@@ -65,3 +54,9 @@ export function TRPCReactProvider(props: {
     </clientApi.Provider>
   );
 }
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return window.location.origin;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}

apps/nextjs/src/app/[locale]/boards/(default)/_definition.ts

@@ -3,6 +3,6 @@ import { createBoardPage } from "../_creator";
 
 export default createBoardPage<{ locale: string }>({
   async getInitialBoard() {
-    return await api.board.default.query();
+    return await api.board.default();
   },
 });

apps/nextjs/src/app/[locale]/boards/[name]/_definition.tsx

@@ -3,6 +3,6 @@ import { createBoardPage } from "../_creator";
 
 export default createBoardPage<{ locale: string; name: string }>({
   async getInitialBoard({ name }) {
-    return await api.board.byName.query({ name });
+    return await api.board.byName({ name });
   },
 });

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -28,7 +28,7 @@ interface Props {
 }
 
 export default async function BoardSettingsPage({ params }: Props) {
-  const board = await api.board.byName.query({ name: params.name });
+  const board = await api.board.byName({ name: params.name });
   const t = await getScopedI18n("board.setting");
 
   return (

apps/nextjs/src/app/[locale]/layout.tsx

@@ -1,11 +1,9 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 
-import "@homarr/ui/styles.css";
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
-
-import { headers } from "next/headers";
+import "@homarr/ui/styles.css";
 
 import { Notifications } from "@homarr/notifications";
 import {
@@ -23,16 +21,28 @@ const fontSans = Inter({
   variable: "--font-sans",
 });
 
-/**
- * Since we're passing `headers()` to the `TRPCReactProvider` we need to
- * make the entire app dynamic. You can move the `TRPCReactProvider` further
- * down the tree (e.g. /dashboard and onwards) to make part of the app statically rendered.
- */
-export const dynamic = "force-dynamic";
-
 export const metadata: Metadata = {
+  metadataBase: new URL("http://localhost:3000"),
   title: "Create T3 Turbo",
   description: "Simple monorepo with shared backend for web & mobile apps",
+  openGraph: {
+    title: "Create T3 Turbo",
+    description: "Simple monorepo with shared backend for web & mobile apps",
+    url: "https://create-t3-turbo.vercel.app",
+    siteName: "Create T3 Turbo",
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: "@jullerino",
+    creator: "@jullerino",
+  },
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
 };
 
 export default function Layout(props: {
@@ -42,12 +52,12 @@ export default function Layout(props: {
   const colorScheme = "dark";
 
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <ColorSchemeScript defaultColorScheme={colorScheme} />
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
-        <TRPCReactProvider headers={headers()}>
+        <TRPCReactProvider>
           <NextInternationalProvider locale={props.params.locale}>
             <MantineProvider
               defaultColorScheme={colorScheme}

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -10,7 +10,7 @@ import { DeleteBoardButton } from "./_components/delete-board-button";
 export default async function ManageBoardsPage() {
   const t = await getScopedI18n("management.page.board");
 
-  const boards = await api.board.getAll.query();
+  const boards = await api.board.getAll();
 
   return (
     <>

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -28,7 +28,7 @@ const handler = auth(async (req) => {
     router: appRouter,
     req,
     createContext: () =>
-      createTRPCContext({ auth: req.auth, headers: req.headers }),
+      createTRPCContext({ session: req.auth, headers: req.headers }),
     onError({ error, path }) {
       console.error(`>>> tRPC Error on '${path}'`, error);
     },

apps/nextjs/src/trpc/server.ts

@@ -1,12 +1,7 @@
 import { cache } from "react";
 import { headers } from "next/headers";
-import { createTRPCClient, loggerLink, TRPCClientError } from "@trpc/client";
-import { callProcedure } from "@trpc/server";
-import { observable } from "@trpc/server/observable";
-import type { TRPCErrorResponse } from "@trpc/server/rpc";
-import SuperJSON from "superjson";
 
-import { appRouter, createTRPCContext } from "@homarr/api";
+import { createCaller, createTRPCContext } from "@homarr/api";
 import { auth } from "@homarr/auth";
 
 /**
@@ -18,44 +13,9 @@ const createContext = cache(async () => {
   heads.set("x-trpc-source", "rsc");
 
   return createTRPCContext({
-    auth: await auth(),
+    session: await auth(),
     headers: heads,
   });
 });
 
-export const api = createTRPCClient<typeof appRouter>({
-  transformer: SuperJSON,
-  links: [
-    loggerLink({
-      enabled: (op) =>
-        process.env.NODE_ENV === "development" ||
-        (op.direction === "down" && op.result instanceof Error),
-    }),
-    /**
-     * Custom RSC link that invokes procedures directly in the server component Don't be too afraid
-     * about the complexity here, it's just wrapping `callProcedure` with an observable to make it a
-     * valid ending link for tRPC.
-     */
-    () =>
-      ({ op }) =>
-        observable((observer) => {
-          createContext()
-            .then((ctx) => {
-              return callProcedure({
-                procedures: appRouter._def.procedures,
-                path: op.path,
-                getRawInput: () => Promise.resolve(op.input),
-                ctx,
-                type: op.type,
-              });
-            })
-            .then((data) => {
-              observer.next({ result: { data } });
-              observer.complete();
-            })
-            .catch((cause: TRPCErrorResponse) => {
-              observer.error(TRPCClientError.from(cause));
-            });
-        }),
-  ],
-});
+export const api = createCaller(createContext);