React Router

export default {
	ssr?: boolean | undefined
Enable server-side rendering for your application. Disable to use "SPA
Mode", which will request the / path at build-time and save it as an
index.html file with your assets so your application can be deployed as a
SPA without server-rendering. Default's to true.ssr: false,
} satisfies 
type Config = {
    appDirectory?: string;
    serverModuleFormat?: ServerModuleFormat;
    future?: [keyof FutureConfig] extends [never] ? {
        [key: string]: never;
    } : Partial<FutureConfig>;
    splitRouteModules?: SplitRouteModulesOption;
    basename?: string;
    buildDirectory?: string;
    buildEnd?: BuildEndHook;
    prerender?: PrerenderPaths | {
        paths: PrerenderPaths;
        concurrency?: number;
    };
    ... 6 more ...;
    allowedActionOrigins?: string[];
}
Config to be exported via the default export from react-router.config.ts.Config;

// Only in a client-only app: with server rendering, a module's client would
// be shared by every request.
export const 
const queryClient: QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>queryClient = 
createQueryClient<readonly [Link<{
    readonly meta: RetryMeta;
}>], readonly [Feature<{
    readonly meta: FocusRefetchMeta;
}>, Feature<{
    readonly meta: ReconnectRefetchMeta;
}>, Feature<{
    readonly meta: PollingMeta;
}>]>(config?: QueryClientConfig & {
    readonly features?: readonly [Feature<{
        readonly meta: FocusRefetchMeta;
    }>, Feature<{
        readonly meta: ReconnectRefetchMeta;
    }>, Feature<...>] | undefined;
    readonly links?: readonly [...] | undefined;
}): QueryClient<...>
Create a query client. Behaviors are opt-in: pass links and features,
or spread recommended(). The client's meta type is what they declare.createQueryClient({
	...function recommended(): Recommended
The behaviors most apps want: retries, refetching on focus and reconnect,
and polling. Spread it into the config:recommended(),
	QueryClientConfig.staleTime?: number | undefined
Default staleTime: 0.staleTime: 5000,
});

export default function function App(): React.JSX.ElementApp() {
	return (
		<
function QueryClientProvider(props: {
    readonly children?: ReactNode;
    readonly client: QueryClient;
}): React.JSX.Element
Provides a client to the tree, and runs its features (focus and
reconnect refetching, polling, …) while mounted.QueryClientProvider client: QueryClient<any>client={
const queryClient: QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>queryClient}>
			<function Outlet(props: OutletProps): React.ReactElement | null
Renders the matching child route of a parent route or nothing if no child
route matches.
@paramprops — Props@paramprops.context — n/a@returnsReact element for the rendered outlet or null if no child route matches.Outlet />
			{import.meta.ImportMeta.env: ImportMetaEnvenv.ImportMetaEnv.DEV: booleanDEV ? <function QueryDevtools(props: QueryDevtoolsProps): React.JSX.Element
A toggle button that opens the devtools panel over the page.QueryDevtools /> : null}
		</
function QueryClientProvider(props: {
    readonly children?: ReactNode;
    readonly client: QueryClient;
}): React.JSX.Element
Provides a client to the tree, and runs its features (focus and
reconnect refetching, polling, …) while mounted.QueryClientProvider>
	);
}

// Rendered into index.html at build time, until the first clientLoader is done.
export function function HydrateFallback(): React.JSX.ElementHydrateFallback() {
	return <React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>Loading…</React.JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>p>;
}

export async function 
function clientLoader(args: Route.ClientLoaderArgs): Promise<{
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}>clientLoader(
args: CreateClientLoaderArgs<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}>args: Route.
type Route.ClientLoaderArgs = ClientDataFunctionArgs<{
    slug: string;
}> & {
    serverLoader: () => Promise<undefined>;
}ClientLoaderArgs) {
	const { const slug: stringslug } = 
args: CreateClientLoaderArgs<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}>args.
params: {
    slug: string;
}
Dynamic route params
for the current route.params;
	const [
const handles: {
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}handles] = await 
load<{
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "swr">;
}>(client: QueryClient, entries: {
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "swr">;
}): Promise<...>
Start a loader's queries and return a serializable handle for each. It
starts every entry before it waits for any, so the order of the entries
can't create a waterfall. Resolves with [handles, data] once every
swr and revalidate entry has data, and rejects with the error as soon
as one fails.
prefetch entries never make it reject. A skipToken in place of an
entry starts nothing and gets no handle.load(
const queryClient: QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>queryClient, {
		// Doesn't wait: the comments stream in after the page renders.
		
comments: LoadEntry<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">comments: 
prefetch<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>(factory: (input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, ...args: LoadEntryArgs<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>): LoadEntry<...>
Start the query if the cache has no fresh data, and don't wait for it.
It never makes the load reject: errors show up where a component reads
the handle.prefetch(
function commentsQuery(input: {
    slug: string;
}): InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>commentsQuery, { slug: stringslug }),
		// Waits on the first visit only. Coming back shows the cached post at
		// once, and refetches it behind the page once it's stale.
		
post: LoadEntry<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "swr">post: 
swr<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>(factory: (input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, ...args: LoadEntryArgs<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>): LoadEntry<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "swr">
Use cached data even when it's stale, and wait only when the cache has
none. Stale data resolves at once and refetches in the background, as
HTTP's
stale-while-revalidate
does. The load rejects if the fetch it waits for fails.swr(
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery, { slug: stringslug }),
	});
	return 
const handles: {
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}handles;
}

export default function function PostPage(props: Route.ComponentProps): React.JSX.ElementPostPage(
props: CreateComponentProps<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}, false>props: Route.
type Route.ComponentProps = {
    params: {
        slug: string;
    };
    matches: [{
        id: "root";
        params: Record<string, string | undefined>;
        pathname: string;
        loaderData: undefined;
        handle: unknown;
    }, {
        id: "routes/posts.$slug";
        params: Record<string, string | undefined>;
        pathname: string;
        loaderData: {
            readonly comments: QueryHandle<(input: {
                slug: string;
            }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
            readonly post: QueryHandle<(input: {
                slug: string;
            }) => QueryOptions<...>>;
        };
        handle: unknown;
    }, ...({
        ...;
    } | undefined)[]];
} & {
    ...;
}ComponentProps) {
	const { 
const comments: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>comments, 
const post: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>post } = 
props: CreateComponentProps<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}, false>props.
loaderData: {
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<...>>;
}
The data returned from the loader or clientLoaderloaderData;
	return (
		<React.JSX.IntrinsicElements.article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>article>
			<
function Post(props: {
    handle: QueryHandle<typeof postQuery>;
}): React.JSX.ElementPost 
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle={
const post: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>post} />
			<const Suspense: React.ExoticComponent<React.SuspenseProps>
Lets you display a fallback until its children have finished loading.
@seeReact DocsSuspense React.SuspenseProps.fallback?: React.ReactNode
A fallback react tree to show when a Suspense child (like React.lazy) suspendsfallback={<function CommentsSkeleton(): React.JSX.ElementCommentsSkeleton />}>
				<
function Comments(props: {
    handle: QueryHandle<typeof commentsQuery>;
}): React.JSX.Element[]Comments 
handle: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>handle={
const comments: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>comments} />
			</const Suspense: React.ExoticComponent<React.SuspenseProps>
Lets you display a fallback until its children have finished loading.
@seeReact DocsSuspense>
		</React.JSX.IntrinsicElements.article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>article>
	);
}

function 
function Post(props: {
    handle: QueryHandle<typeof postQuery>;
}): React.JSX.ElementPost(
props: {
    handle: QueryHandle<typeof postQuery>;
}props: { 
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle: interface QueryHandle<TFactory extends QueryFactory = (input: unknown) => { readonly queryFn: (context: never) => unknown; readonly queryKey: QueryKey; }>
A small serializable reference to a query: its key and its factory's
input. It carries no data; readers get that from the cache. Handles of
different factories have different types.QueryHandle<typeof 
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery> }) {
	// The loader waited for the post, so this is the post, not a promise.
	const [
const postThenable: QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>postThenable] = 
useQuery<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>(factory: (input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>, options?: UseQueryOptions): readonly [QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>, QueryState<...>]
Read a query by its handle.useQuery(
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery, 
props: {
    handle: QueryHandle<typeof postQuery>;
}props.
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle);
	const post = use<Post>(usable: React.Usable<Post>): Postuse(
const postThenable: QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>postThenable);
       
const post: Post
	return <React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>{const post: Postpost.Post.title: stringtitle}</React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>;
}

export function 
function Comments(props: {
    handle: QueryHandle<typeof commentsQuery>;
}): React.JSX.Element[]Comments(
props: {
    handle: QueryHandle<typeof commentsQuery>;
}props: { 
handle: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>handle: interface QueryHandle<TFactory extends QueryFactory = (input: unknown) => { readonly queryFn: (context: never) => unknown; readonly queryKey: QueryKey; }>
A small serializable reference to a query: its key and its factory's
input. It carries no data; readers get that from the cache. Handles of
different factories have different types.QueryHandle<typeof 
function commentsQuery(input: {
    slug: string;
}): InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>commentsQuery> }) {
	// May still be loading. If so, use() suspends until it lands.
	const [
const pagesThenable: QueryValue<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>pagesThenable] = 
useInfiniteQuery<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>(factory: (input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, handle: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>, options?: UseQueryOptions): readonly [...]
Read a paged query (infiniteQueryOptions) by its handle. The data is
{ pages, pageParams }, and its state loads more pages.useInfiniteQuery(
function commentsQuery(input: {
    slug: string;
}): InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>commentsQuery, 
props: {
    handle: QueryHandle<typeof commentsQuery>;
}props.
handle: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>handle);
	const const pages: InfiniteData<CommentPage, number>pages = use<InfiniteData<CommentPage, number>>(usable: React.Usable<InfiniteData<CommentPage, number>>): InfiniteData<CommentPage, number>use(
const pagesThenable: QueryValue<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>pagesThenable);
	return const pages: InfiniteData<CommentPage, number>pages.InfiniteData<CommentPage, number>.pages: readonly CommentPage[]pages
		.ReadonlyArray<CommentPage>.flatMap<PostComment, undefined>(callback: (this: undefined, value: CommentPage, index: number, array: CommentPage[]) => PostComment | readonly PostComment[], thisArg?: undefined): PostComment[]
Calls a defined callback function on each element of an array. Then, flattens the result into
a new array.
This is identical to a map followed by flat with depth 1.
@paramcallback — A function that accepts up to three arguments. The flatMap method calls the
callback function one time for each element in the array.@paramthisArg — An object to which the this keyword can refer in the callback function. If
thisArg is omitted, undefined is used as the this value.flatMap((page: CommentPagepage) => page: CommentPagepage.CommentPage.items: readonly PostComment[]items)
		.Array<PostComment>.map<React.JSX.Element>(callbackfn: (value: PostComment, index: number, array: PostComment[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn — A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg — An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((comment: PostCommentcomment) => <
function Comment(props: {
    comment: PostComment;
}): React.ReactNodeComment React.Attributes.key?: React.Key | null | undefinedkey={comment: PostCommentcomment.PostComment.id: stringid} comment: PostCommentcomment={comment: PostCommentcomment} />);
}

import { 
function createQueryClient<const TLinks extends ReadonlyArray<AnyLink> = [], const TFeatures extends ReadonlyArray<AnyFeature> = []>(config?: QueryClientConfig & {
    readonly features?: TFeatures;
    readonly links?: TLinks;
}): QueryClient<{
    readonly meta: MetaOf<[...TLinks, ...TFeatures]>;
}>
Create a query client. Behaviors are opt-in: pass links and features,
or spread recommended(). The client's meta type is what they declare.createQueryClient, function recommended(): Recommended
The behaviors most apps want: retries, refetching on focus and reconnect,
and polling. Spread it into the config:recommended } from "@raf-query/react";

export function 
function makeQueryClient(): QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>makeQueryClient() {
	return 
createQueryClient<readonly [Link<{
    readonly meta: RetryMeta;
}>], readonly [Feature<{
    readonly meta: FocusRefetchMeta;
}>, Feature<{
    readonly meta: ReconnectRefetchMeta;
}>, Feature<{
    readonly meta: PollingMeta;
}>]>(config?: QueryClientConfig & {
    readonly features?: readonly [Feature<{
        readonly meta: FocusRefetchMeta;
    }>, Feature<{
        readonly meta: ReconnectRefetchMeta;
    }>, Feature<...>] | undefined;
    readonly links?: readonly [...] | undefined;
}): QueryClient<...>
Create a query client. Behaviors are opt-in: pass links and features,
or spread recommended(). The client's meta type is what they declare.createQueryClient({ ...function recommended(): Recommended
The behaviors most apps want: retries, refetching on focus and reconnect,
and polling. Spread it into the config:recommended(), QueryClientConfig.staleTime?: number | undefined
Default staleTime: 0.staleTime: 5000 });
}

"use client";

import { type interface QueryClient<TTypes extends RootTypes = any>
A query cache. TTypes is its root's types, which factories built with
bindQueryOptions<typeof makeQueryClient>() are checked against. The bare
QueryClient type takes a client of any root.QueryClient, 
function QueryClientProvider(props: {
    readonly children?: ReactNode;
    readonly client: QueryClient;
}): React.JSX.Element
Provides a client to the tree, and runs its features (focus and
reconnect refetching, polling, …) while mounted.QueryClientProvider } from "@raf-query/react";
import { type type ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal | Promise<AwaitedReactNode> | null | undefined
Represents all of the things React can render.
@seeReact TypeScript CheatsheetReactNode, function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@seehttps://react.dev/reference/react/useStateuseState } from "react";

import { 
function makeQueryClient(): QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>makeQueryClient } from "~/query-client.ts";

/**
 * The app's query client: the router's when it makes one, or one created
 * here, per server render and per browser tab.
 */
export function 
function Providers(props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}): React.JSX.Element
The app's query client: the router's when it makes one, or one created
here, per server render and per browser tab.Providers(
props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}props: {
	readonly children: ReactNodechildren: type ReactNode = string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | React.ReactPortal | Promise<AwaitedReactNode> | null | undefined
Represents all of the things React can render.
@seeReact TypeScript CheatsheetReactNode;
	readonly client?: QueryClient<any> | undefinedclient?: interface QueryClient<TTypes extends RootTypes = any>
A query cache. TTypes is its root's types, which factories built with
bindQueryOptions<typeof makeQueryClient>() are checked against. The bare
QueryClient type takes a client of any root.QueryClient;
}) {
	const [
const client: QueryClient<any> | QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>client] = 
useState<QueryClient<any> | QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>>(initialState: QueryClient<any> | QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}> | (() => QueryClient<...> | QueryClient<...>)): [...] (+1 overload)
Returns a stateful value, and a function to update it.
@seehttps://react.dev/reference/react/useStateuseState(() => 
props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}props.client?: QueryClient<any> | undefinedclient ?? 
function makeQueryClient(): QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>makeQueryClient());
	return (
		<
function QueryClientProvider(props: {
    readonly children?: ReactNode;
    readonly client: QueryClient;
}): React.JSX.Element
Provides a client to the tree, and runs its features (focus and
reconnect refetching, polling, …) while mounted.QueryClientProvider client: QueryClient<any>client={
const client: QueryClient<any> | QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>client}>{
props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}props.children: ReactNodechildren}</
function QueryClientProvider(props: {
    readonly children?: ReactNode;
    readonly client: QueryClient;
}): React.JSX.Element
Provides a client to the tree, and runs its features (focus and
reconnect refetching, polling, …) while mounted.QueryClientProvider>
	);
}

export default function function App(): React.JSX.ElementApp() {
	return (
		<
function Providers(props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}): React.JSX.Element
The app's query client: the router's when it makes one, or one created
here, per server render and per browser tab.Providers>
			<function Outlet(props: OutletProps): React.ReactElement | null
Renders the matching child route of a parent route or nothing if no child
route matches.
@paramprops — Props@paramprops.context — n/a@returnsReact element for the rendered outlet or null if no child route matches.Outlet />
			{import.meta.ImportMeta.env: ImportMetaEnvenv.ImportMetaEnv.DEV: booleanDEV ? <function QueryDevtools(props: QueryDevtoolsProps): React.JSX.Element
A toggle button that opens the devtools panel over the page.QueryDevtools /> : null}
		</
function Providers(props: {
    readonly children: ReactNode;
    readonly client?: QueryClient;
}): React.JSX.Element
The app's query client: the router's when it makes one, or one created
here, per server render and per browser tab.Providers>
	);
}

import type { interface QueryClient<TTypes extends RootTypes = any>
A query cache. TTypes is its root's types, which factories built with
bindQueryOptions<typeof makeQueryClient>() are checked against. The bare
QueryClient type takes a client of any root.QueryClient } from "@raf-query/react";
import { function createContext<T>(defaultValue?: T): RouterContext<T>
Creates a type-safe
RouterContext
object that can be used to
store and retrieve arbitrary values in actions,
loaders, and middleware.
Similar to React's createContext,
but specifically designed for React Router's request/response lifecycle.
@paramdefaultValue — An optional default value for the context. This value
will be returned if no value has been set for this context.@returnsA RouterContext object that can be used with
context.get() and context.set() in actions,
loaders, and middleware.createContext } from "react-router";

export const const queryClientContext: RouterContext<QueryClient<any>>queryClientContext = createContext<QueryClient<any>>(defaultValue?: QueryClient<any> | undefined): RouterContext<QueryClient<any>>
Creates a type-safe
RouterContext
object that can be used to
store and retrieve arbitrary values in actions,
loaders, and middleware.
Similar to React's createContext,
but specifically designed for React Router's request/response lifecycle.
@paramdefaultValue — An optional default value for the context. This value
will be returned if no value has been set for this context.@returnsA RouterContext object that can be used with
context.get() and context.set() in actions,
loaders, and middleware.createContext<interface QueryClient<TTypes extends RootTypes = any>
A query cache. TTypes is its root's types, which factories built with
bindQueryOptions<typeof makeQueryClient>() are checked against. The bare
QueryClient type takes a client of any root.QueryClient>();

export const 
const middleware: CreateServerMiddlewareFunction<Info & {
    module: typeof import("./root");
    matches: Matches;
}>[]middleware: interface Array<T>Array<Route.
type Route.MiddlewareFunction = (args: ServerDataFunctionArgs<{
    slug?: undefined;
} | {
    slug: string;
} | {
    slug: string;
}>, next: MiddlewareNextFunction<Response>) => MaybePromise<void | Response>MiddlewareFunction> = [
	({ context: Readonly<RouterContextProvider>
An instance of RouterContextProvider that can be used for type-safe
access to context values set in your route middlewares.  If you are using
a custom server adapter, you may provide an initial set of context values
from your getLoadContext function.context }) => {
		context: Readonly<RouterContextProvider>
An instance of RouterContextProvider that can be used for type-safe
access to context values set in your route middlewares.  If you are using
a custom server adapter, you may provide an initial set of context values
from your getLoadContext function.context.set<RouterContext<QueryClient<any>>>(context: RouterContext<QueryClient<any>>, value: QueryClient<any>): void
Set a value for the context. If the context already has a value set, this
will overwrite it.
@paramcontext — The context to set the value for@paramvalue — The value to set for the context@returnsset(const queryClientContext: RouterContext<QueryClient<any>>queryClientContext, 
function makeQueryClient(): QueryClient<{
    readonly meta: Flat<Present<FocusRefetchMeta> & Present<ReconnectRefetchMeta> & Present<PollingMeta> & Present<RetryMeta>>;
}>makeQueryClient());
	},
];

export async function 
function loader(args: Route.LoaderArgs): Promise<{
    dehydratedState: DehydratedState;
    comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}>loader(
args: CreateServerLoaderArgs<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}>args: Route.
type Route.LoaderArgs = {
    request: Request;
    url: URL;
    params: {
        slug: string;
    };
    pattern: string;
    context: Readonly<RouterContextProvider>;
}LoaderArgs) {
	const const qc: QueryClient<any>qc = 
args: CreateServerLoaderArgs<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}>args.context: Readonly<RouterContextProvider>
An instance of RouterContextProvider that can be used for type-safe
access to context values set in your route middlewares.  If you are using
a custom server adapter, you may provide an initial set of context values
from your getLoadContext function.context.get<QueryClient<any>>(context: RouterContext<QueryClient<any>>): QueryClient<any>
Access a value from the context. If no value has been set for the context,
it will return the context's defaultValue if provided, or throw an error
if no defaultValue was set.
@paramcontext — The context to get the value for@returnsThe value for the context, or the context's defaultValue if no
value was setget(const queryClientContext: RouterContext<QueryClient<any>>queryClientContext);
	const { const slug: stringslug } = 
args: CreateServerLoaderArgs<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}>args.
params: {
    slug: string;
}
Dynamic route params
for the current route.params;
	const [
const handles: {
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}handles, 
const data: LoadedData<{
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">;
}>data] = await 
load<{
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">;
}>(client: QueryClient, entries: {
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">;
}): Promise<...>
Start a loader's queries and return a serializable handle for each. It
starts every entry before it waits for any, so the order of the entries
can't create a waterfall. Resolves with [handles, data] once every
swr and revalidate entry has data, and rejects with the error as soon
as one fails.
prefetch entries never make it reject. A skipToken in place of an
entry starts nothing and gets no handle.load(const qc: QueryClient<any>qc, {
		// Doesn't wait: the comments stream in after the page renders.
		
comments: LoadEntry<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">comments: 
prefetch<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>(factory: (input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, ...args: LoadEntryArgs<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>): LoadEntry<...>
Start the query if the cache has no fresh data, and don't wait for it.
It never makes the load reject: errors show up where a component reads
the handle.prefetch(
function commentsQuery(input: {
    slug: string;
}): InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>commentsQuery, { slug: stringslug }),
		// Waits, so the post is in the page's first HTML.
		
post: LoadEntry<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">post: 
revalidate<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>(factory: (input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, ...args: LoadEntryArgs<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>): LoadEntry<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">
Wait for fresh data, as HTTP's
must-revalidate
does. Fresh cached data resolves at once without a refetch (staleTime
is the max-age); with stale data or none it waits for the fetch. On a
server client, data counts as fresh until a write invalidates it. The
load rejects if the fetch fails.revalidate(
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery, { slug: stringslug }),
	});
	// `data` holds what the loader waited for: here, the post.
	if (
const data: LoadedData<{
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">;
}>data.post: Postpost.Post.slug: stringslug !== const slug: stringslug) {
		throw function redirect(url: string, init?: number | ResponseInit): Response
A redirect Response.
Sets the status code and the Location
header. Defaults to 302 Found.
@paramurl — The URL to redirect to.@paraminit — The status code or a ResponseInit object to be included in the
response.@returnsA Response
object with the redirect status and Location
header.redirect(`/posts/${
const data: LoadedData<{
    readonly comments: LoadEntry<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>, "prefetch">;
    readonly post: LoadEntry<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, "revalidate">;
}>data.post: Postpost.Post.slug: stringslug}`);
	}
	return { ...
const handles: {
    readonly comments: QueryHandle<(input: {
        slug: string;
    }) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>;
    readonly post: QueryHandle<(input: {
        slug: string;
    }) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>;
}handles, dehydratedState: DehydratedStatedehydratedState: function dehydrate(client: QueryClient, options?: DehydrateOptions): DehydratedState
Snapshot the client's entries for transfer.dehydrate(const qc: QueryClient<any>qc) };
}

export default function function PostPage(props: Route.ComponentProps): React.JSX.ElementPostPage(
props: CreateComponentProps<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}, false>props: Route.
type Route.ComponentProps = {
    params: {
        slug: string;
    };
    matches: [{
        id: "root";
        params: Record<string, string | undefined>;
        pathname: string;
        loaderData: undefined;
        handle: unknown;
    }, {
        id: "routes/posts.$slug";
        params: Record<string, string | undefined>;
        pathname: string;
        loaderData: {
            dehydratedState: {
                readonly entries: readonly {
                    readonly data?: undefined;
                    readonly promise?: Promise<{
                        readonly data?: undefined;
                        readonly updatedAt: number;
                    }> | undefined;
                    readonly queryKey: readonly undefined[];
                    readonly updatedAt: number;
                }[];
            };
            comments: {
                readonly input: {
                    slug: string;
                };
                readonly queryKey: ["comments", string];
            };
            post: {
                ...;
            };
        };
        handle: unknown;
    }, ...({
        ...;
    } | undefined)[]];
} & {
    ...;
}ComponentProps) {
	const { 
const comments: {
    readonly input: {
        slug: string;
    };
    readonly queryKey: ["comments", string];
}comments, 
const dehydratedState: {
    readonly entries: readonly {
        readonly data?: undefined;
        readonly promise?: Promise<{
            readonly data?: undefined;
            readonly updatedAt: number;
        }> | undefined;
        readonly queryKey: readonly undefined[];
        readonly updatedAt: number;
    }[];
}dehydratedState, 
const post: {
    readonly input: {
        slug: string;
    };
    readonly queryKey: ["post", string];
}post } = 
props: CreateComponentProps<Info & {
    module: typeof import("./posts.$slug");
    matches: Matches;
}, false>props.
loaderData: {
    dehydratedState: {
        readonly entries: readonly {
            readonly data?: undefined;
            readonly promise?: Promise<{
                readonly data?: undefined;
                readonly updatedAt: number;
            }> | undefined;
            readonly queryKey: readonly undefined[];
            readonly updatedAt: number;
        }[];
    };
    comments: {
        readonly input: {
            slug: string;
        };
        readonly queryKey: ["comments", string];
    };
    post: {
        ...;
    };
}
The data returned from the loader or clientLoaderloaderData;
	return (
		<function HydrationBoundary(props: HydrationBoundaryProps): React.JSX.Element
Writes server data into the browser (or SSR) client.HydrationBoundary state: DehydratedState
A loader's dehydrate(client).state={
const dehydratedState: {
    readonly entries: readonly {
        readonly data?: undefined;
        readonly promise?: Promise<{
            readonly data?: undefined;
            readonly updatedAt: number;
        }> | undefined;
        readonly queryKey: readonly undefined[];
        readonly updatedAt: number;
    }[];
}dehydratedState}>
			<React.JSX.IntrinsicElements.article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>article>
				<
function Post(props: {
    handle: QueryHandle<typeof postQuery>;
}): React.JSX.ElementPost 
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle={
const post: {
    readonly input: {
        slug: string;
    };
    readonly queryKey: ["post", string];
}post} />
				<const Suspense: React.ExoticComponent<React.SuspenseProps>
Lets you display a fallback until its children have finished loading.
@seeReact DocsSuspense React.SuspenseProps.fallback?: React.ReactNode
A fallback react tree to show when a Suspense child (like React.lazy) suspendsfallback={<function CommentsSkeleton(): React.JSX.ElementCommentsSkeleton />}>
					<
function Comments(props: {
    handle: QueryHandle<typeof commentsQuery>;
}): React.JSX.Element[]Comments 
handle: QueryHandle<(input: {
    slug: string;
}) => InfiniteQueryOptions<readonly ["comments", string], CommentPage, number, InfiniteData<CommentPage, number>, DefaultTypes>>handle={
const comments: {
    readonly input: {
        slug: string;
    };
    readonly queryKey: ["comments", string];
}comments} />
				</const Suspense: React.ExoticComponent<React.SuspenseProps>
Lets you display a fallback until its children have finished loading.
@seeReact DocsSuspense>
			</React.JSX.IntrinsicElements.article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>article>
		</function HydrationBoundary(props: HydrationBoundaryProps): React.JSX.Element
Writes server data into the browser (or SSR) client.HydrationBoundary>
	);
}

function 
function Post(props: {
    handle: QueryHandle<typeof postQuery>;
}): React.JSX.ElementPost(
props: {
    handle: QueryHandle<typeof postQuery>;
}props: { 
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle: interface QueryHandle<TFactory extends QueryFactory = (input: unknown) => { readonly queryFn: (context: never) => unknown; readonly queryKey: QueryKey; }>
A small serializable reference to a query: its key and its factory's
input. It carries no data; readers get that from the cache. Handles of
different factories have different types.QueryHandle<typeof 
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery> }) {
	// The loader waited for the post, so this is the post, not a promise.
	const [
const postThenable: QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>postThenable] = 
useQuery<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>(factory: (input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>, handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>, options?: UseQueryOptions): readonly [QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>, QueryState<...>]
Read a query by its handle.useQuery(
function postQuery(input: {
    slug: string;
}): QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>postQuery, 
props: {
    handle: QueryHandle<typeof postQuery>;
}props.
handle: QueryHandle<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>handle);
	const post = use<Post>(usable: React.Usable<Post>): Postuse(
const postThenable: QueryValue<(input: {
    slug: string;
}) => QueryOptions<readonly ["post", string], Post, Post, DefaultTypes>>postThenable);
       
const post: Post
	return <React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>{const post: Postpost.Post.title: stringtitle}</React.JSX.IntrinsicElements.h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>h1>;
}