Merged in feat/sw-3125-move-client-trpc-setup (pull request #2493)
feat(SW-3125): Move client trpc setup * Move client trpc to package * Client setup in partner-sas * Add todo Approved-by: Linus Flood
This commit is contained in:
20
apps/partner-sas/app/ClientComponent.tsx
Normal file
20
apps/partner-sas/app/ClientComponent.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
||||
"use client"
|
||||
import { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import { trpc } from "@scandic-hotels/trpc/client"
|
||||
|
||||
export function ClientComponent() {
|
||||
const { data, isLoading } = trpc.autocomplete.destinations.useQuery({
|
||||
lang: Lang.en,
|
||||
includeTypes: ["hotels"],
|
||||
query: "Malmö",
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>client component</p>
|
||||
<p>Data: {JSON.stringify(data?.hits?.hotels[0]?.name)}</p>
|
||||
<p>Is loading: {isLoading ? "Yes" : "No"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
apps/partner-sas/app/api/web/trpc/[trpc]/route.ts
Normal file
16
apps/partner-sas/app/api/web/trpc/[trpc]/route.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
|
||||
|
||||
import { appRouter } from "@scandic-hotels/trpc/routers/appRouter"
|
||||
|
||||
import { createAppContext } from "@/lib/trpc"
|
||||
|
||||
async function handler(req: Request) {
|
||||
return fetchRequestHandler({
|
||||
createContext: createAppContext,
|
||||
endpoint: "/api/web/trpc",
|
||||
req,
|
||||
router: appRouter,
|
||||
})
|
||||
}
|
||||
|
||||
export { handler as GET, handler as POST }
|
||||
@@ -1,3 +1,2 @@
|
||||
body {
|
||||
background: rebeccapurple;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ import "@scandic-hotels/design-system/fonts.css"
|
||||
import "@/public/_static/css/design-system-new-deprecated.css"
|
||||
import "./globals.css"
|
||||
|
||||
import { TrpcProvider } from "@scandic-hotels/trpc/Provider"
|
||||
|
||||
import type { Metadata } from "next"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -23,7 +25,10 @@ export default function RootLayout({
|
||||
{/* eslint-disable-next-line @next/next/no-css-tags */}
|
||||
<link rel="stylesheet" href="/_static/css/scandic.css" />
|
||||
</head>
|
||||
<body className="scandic">{children}</body>
|
||||
<body className="scandic">
|
||||
{/* TODO handle onError */}
|
||||
<TrpcProvider>{children}</TrpcProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
.page {
|
||||
color: white;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
padding-left: 200px;
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { serverClient } from "@/lib/trpc"
|
||||
|
||||
import { ClientComponent } from "./ClientComponent"
|
||||
|
||||
import styles from "./page.module.css"
|
||||
|
||||
export default async function Home() {
|
||||
@@ -22,6 +24,9 @@ export default async function Home() {
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<p>hello world with data: {hotel}</p>
|
||||
</Typography>
|
||||
<hr />
|
||||
<ClientComponent />
|
||||
<hr />
|
||||
<Typography>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<p>from booking-flow package:</p>
|
||||
|
||||
Reference in New Issue
Block a user