diff --git a/packages/create/templates/app-basic/App.tsx b/packages/create/templates/app-basic/App.tsx index 683482f59..9580b75b6 100644 --- a/packages/create/templates/app-basic/App.tsx +++ b/packages/create/templates/app-basic/App.tsx @@ -1,6 +1,5 @@ import {type PropsWithChildren} from 'react'; -import {HTML} from '@quilted/quilt/html'; import {Routing, useRoutes} from '@quilted/quilt/navigate'; import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize'; @@ -15,25 +14,21 @@ import { type AppContext as AppContextType, } from './shared/context.ts'; -export interface AppProps extends AppContextType {} +export interface AppProps { + context?: AppContextType; +} // The root component for your application. You will typically render any // app-wide context in this component. -export function App(props: AppProps) { - const locale = useLocaleFromEnvironment() ?? 'en'; - +export function App({context}: AppProps) { return ( - - - - - - - - - - - + + + + + + + ); } @@ -48,10 +43,14 @@ function Routes() { } // This component renders any app-wide context. -function AppContext({children, ...context}: PropsWithChildren) { +function AppContext({children, context}: PropsWithChildren) { + const locale = useLocaleFromEnvironment() ?? 'en'; + return ( - {children} + + {children} + ); } diff --git a/packages/create/templates/app-basic/browser.tsx b/packages/create/templates/app-basic/browser.tsx index e57250460..36f4b6eb7 100644 --- a/packages/create/templates/app-basic/browser.tsx +++ b/packages/create/templates/app-basic/browser.tsx @@ -1,8 +1,15 @@ import '@quilted/quilt/globals'; import {hydrateRoot} from 'react-dom/client'; +import {Browser, BrowserContext} from '@quilted/quilt/browser'; import {App} from './App.tsx'; const element = document.querySelector('#app')!; +const browser = new Browser(); -hydrateRoot(element, ); +hydrateRoot( + element, + + + , +); diff --git a/packages/create/templates/app-graphql/App.tsx b/packages/create/templates/app-graphql/App.tsx index bcbe7dd6f..912d23709 100644 --- a/packages/create/templates/app-graphql/App.tsx +++ b/packages/create/templates/app-graphql/App.tsx @@ -1,12 +1,10 @@ -import {useMemo, type PropsWithChildren} from 'react'; +import {type PropsWithChildren} from 'react'; -import {HTML} from '@quilted/quilt/html'; import {Routing, useRoutes} from '@quilted/quilt/navigate'; import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize'; -import {GraphQLContext, type GraphQLRun} from '@quilted/quilt/graphql'; +import {GraphQLContext} from '@quilted/quilt/graphql'; import {ReactQueryContext} from '@quilted/react-query'; -import {QueryClient} from '@tanstack/react-query'; import {Head} from './foundation/html.ts'; import {Headers} from './foundation/http.ts'; @@ -19,29 +17,21 @@ import { type AppContext as AppContextType, } from './shared/context.ts'; -export interface AppProps extends AppContextType { - fetchGraphQL: GraphQLRun; +export interface AppProps { + context: AppContextType; } // The root component for your application. You will typically render any // app-wide context in this component. -export function App(props: AppProps) { - const locale = useLocaleFromEnvironment() ?? 'en'; - +export function App({context}: AppProps) { return ( - - - - - - - - - - - - - + + + + + + + ); } @@ -56,24 +46,18 @@ function Routes() { } // This component renders any app-wide context. -function AppContext({ - children, - fetchGraphQL, - ...context -}: PropsWithChildren) { - const {queryClient} = useMemo(() => { - return { - queryClient: new QueryClient(), - }; - }, []); +function AppContext({children, context}: PropsWithChildren) { + const locale = useLocaleFromEnvironment() ?? 'en'; return ( - - - - {children} - - - + + + + + {children} + + + + ); } diff --git a/packages/create/templates/app-graphql/browser.tsx b/packages/create/templates/app-graphql/browser.tsx index c60343e29..6640ab112 100644 --- a/packages/create/templates/app-graphql/browser.tsx +++ b/packages/create/templates/app-graphql/browser.tsx @@ -1,13 +1,21 @@ import '@quilted/quilt/globals'; import {hydrateRoot} from 'react-dom/client'; +import {QueryClient} from '@tanstack/react-query'; import {createGraphQLFetch} from '@quilted/quilt/graphql'; +import {Browser, BrowserContext} from '@quilted/quilt/browser'; import {App} from './App.tsx'; const element = document.querySelector('#app')!; +const browser = new Browser(); + +const queryClient = new QueryClient(); +const fetchGraphQL = createGraphQLFetch({url: '/api/graphql'}); hydrateRoot( element, - , + + + , ); diff --git a/packages/create/templates/app-graphql/server.tsx b/packages/create/templates/app-graphql/server.tsx index b2080cd4f..21d181c6b 100644 --- a/packages/create/templates/app-graphql/server.tsx +++ b/packages/create/templates/app-graphql/server.tsx @@ -21,15 +21,21 @@ router.post('/api/graphql', async (request) => { // For all GET requests, render our React application. router.get(async (request) => { - const [{App}, {performGraphQLOperation}, {renderToResponse}] = + const [{App}, {performGraphQLOperation}, {renderToResponse}, {QueryClient}] = await Promise.all([ import('./App.tsx'), import('./server/graphql.ts'), import('@quilted/quilt/server'), + import('@tanstack/react-query'), ]); const response = await renderToResponse( - , + , { request, assets, diff --git a/packages/create/templates/app-graphql/server/graphql.ts b/packages/create/templates/app-graphql/server/graphql.ts index 0ac9bf2ec..e7de9d0e0 100644 --- a/packages/create/templates/app-graphql/server/graphql.ts +++ b/packages/create/templates/app-graphql/server/graphql.ts @@ -30,7 +30,7 @@ const Query = createQueryResolver({ const schema = createGraphQLSchema(schemaSource, {Query, Person}); -export const performGraphQLOperation: GraphQLRun = +export const performGraphQLOperation: GraphQLRun<{}> = async function performGraphQLOperation(operation, options) { const result = await graphql({ schema, diff --git a/packages/create/templates/app-graphql/shared/graphql.ts b/packages/create/templates/app-graphql/shared/graphql.ts new file mode 100644 index 000000000..62225529a --- /dev/null +++ b/packages/create/templates/app-graphql/shared/graphql.ts @@ -0,0 +1,11 @@ +import type {GraphQLFetch} from '@quilted/quilt/graphql'; +import type {QueryClient} from '@tanstack/react-query'; + +declare module '~/shared/context.ts' { + interface AppContext { + queryClient: QueryClient; + fetchGraphQL: GraphQLFetch; + } +} + +export {}; diff --git a/packages/create/templates/app-trpc/App.tsx b/packages/create/templates/app-trpc/App.tsx index d0772c4ab..c0360b310 100644 --- a/packages/create/templates/app-trpc/App.tsx +++ b/packages/create/templates/app-trpc/App.tsx @@ -1,11 +1,8 @@ -import {useMemo, type PropsWithChildren} from 'react'; +import {type PropsWithChildren} from 'react'; -import {HTML} from '@quilted/quilt/html'; -import {Routing, useRoutes, useInitialUrl} from '@quilted/quilt/navigate'; +import {Routing, useRoutes} from '@quilted/quilt/navigate'; import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize'; -import {httpBatchLink} from '@trpc/client'; -import {QueryClient} from '@tanstack/react-query'; import {ReactQueryContext} from '@quilted/react-query'; import {Head} from './foundation/html.ts'; @@ -20,27 +17,21 @@ import { type AppContext as AppContextType, } from './shared/context.ts'; -export interface AppProps extends AppContextType {} +export interface AppProps { + context: AppContextType; +} // The root component for your application. You will typically render any // app-wide context in this component. -export function App(props: AppProps) { - const locale = useLocaleFromEnvironment() ?? 'en'; - +export function App({context}: AppProps) { return ( - - - - - - - - - - - - - + + + + + + + ); } @@ -55,29 +46,23 @@ function Routes() { } // This component renders any app-wide context. -function AppContext({children, ...context}: PropsWithChildren) { - const initialUrl = useInitialUrl(); - - const {queryClient, trpcClient} = useMemo(() => { - return { - queryClient: new QueryClient(), - trpcClient: trpc.createClient({ - links: [ - // We need to use an absolute URL so that queries will - // work during server-side rendering - httpBatchLink({url: new URL('/api', initialUrl).href}), - ], - }), - }; - }, [initialUrl]); +function AppContext({children, context}: PropsWithChildren) { + const locale = useLocaleFromEnvironment() ?? 'en'; return ( - - - - {children} - - - + + + + + + {children} + + + + + ); } diff --git a/packages/create/templates/app-trpc/browser.tsx b/packages/create/templates/app-trpc/browser.tsx index f7e5a8e3d..074c2ba62 100644 --- a/packages/create/templates/app-trpc/browser.tsx +++ b/packages/create/templates/app-trpc/browser.tsx @@ -1,15 +1,24 @@ import '@quilted/quilt/globals'; import {hydrateRoot} from 'react-dom/client'; import {httpBatchLink} from '@trpc/client'; +import {QueryClient} from '@tanstack/react-query'; +import {Browser, BrowserContext} from '@quilted/quilt/browser'; import {trpc} from '~/shared/trpc.ts'; import {App} from './App.tsx'; const element = document.querySelector('#app')!; +const browser = new Browser(); +const queryClient = new QueryClient(); const trpcClient = trpc.createClient({ links: [httpBatchLink({url: new URL('/api', window.location.href).href})], }); -hydrateRoot(element, ); +hydrateRoot( + element, + + + , +); diff --git a/packages/create/templates/app-trpc/foundation/html/Head.tsx b/packages/create/templates/app-trpc/foundation/html/Head.tsx index a52e54f21..ec5192fef 100644 --- a/packages/create/templates/app-trpc/foundation/html/Head.tsx +++ b/packages/create/templates/app-trpc/foundation/html/Head.tsx @@ -1,4 +1,4 @@ -import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html'; +import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/browser'; // This component sets details of the HTML page. If you need to customize // any of these details based on conditions like the active route, or some diff --git a/packages/create/templates/app-trpc/foundation/http/Headers.tsx b/packages/create/templates/app-trpc/foundation/http/Headers.tsx index 5c744f438..7aeee7e32 100644 --- a/packages/create/templates/app-trpc/foundation/http/Headers.tsx +++ b/packages/create/templates/app-trpc/foundation/http/Headers.tsx @@ -6,7 +6,8 @@ import { ContentSecurityPolicy, PermissionsPolicy, StrictTransportSecurity, -} from '@quilted/quilt/http'; + useBro, +} from '@quilted/quilt/server'; // This component sets details on the HTTP response for all HTML server-rendering // requests. If you need to customize any of these details based on conditions like diff --git a/packages/create/templates/app-trpc/server.tsx b/packages/create/templates/app-trpc/server.tsx index 57c78bf9b..79ef61b7f 100644 --- a/packages/create/templates/app-trpc/server.tsx +++ b/packages/create/templates/app-trpc/server.tsx @@ -25,13 +25,19 @@ router.any( // For all GET requests, render our React application. router.get(async (request) => { - const [{App}, {renderToResponse}] = await Promise.all([ + const [{App}, {renderToResponse}, {QueryClient}] = await Promise.all([ import('./App.tsx'), import('@quilted/quilt/server'), + import('@tanstack/react-query'), ]); const response = await renderToResponse( - , + , { request, assets, diff --git a/packages/create/templates/app-trpc/shared/trpc.ts b/packages/create/templates/app-trpc/shared/trpc.ts index 2810ab129..879b01dff 100644 --- a/packages/create/templates/app-trpc/shared/trpc.ts +++ b/packages/create/templates/app-trpc/shared/trpc.ts @@ -1,10 +1,11 @@ -import {type TRPCClient} from '@trpc/client'; +import type {TRPCClient} from '@trpc/client'; import {createTRPCReact, type CreateTRPCReact} from '@trpc/react-query'; +import type {QueryClient} from '@tanstack/react-query'; // Get access to our app’s router type signature, which will // provide strong typing on the queries and mutations we can // perform. -import {type AppRouter} from '../trpc.ts'; +import type {AppRouter} from '../trpc.ts'; export const trpc: CreateTRPCReact = createTRPCReact(); @@ -12,5 +13,6 @@ export const trpc: CreateTRPCReact = declare module '~/shared/context.ts' { interface AppContext { trpc: TRPCClient; + queryClient: QueryClient; } }