useRouteData
useRouteData
gives you the data defined for the route.
ts
const data = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData
();
ts
const data = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData
();
Usage
Retrieving data from the routeData function
SolidStart's file system routing allows components defined under the /routes
to define a routeData
function that executes when navigation begins to that component. It does so in parallel to loading the code for it.
You can use whatever is returned from the routeData
function in your component by calling useRouteData
.
ts
import { createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) function createResource<T, R = unknown>(fetcher: ResourceFetcher<true, T, R>, options: InitializedResourceOptions<NoInfer<T>, true>): InitializedResourceReturn<T, R> (+3 overloads)
import createResource
} from "solid-js"; import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<{
name: string;
}>
({ params(parameter) params: Params
}: RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { // load some data
const [usersconst users: Resource<{
name: string;
}>
] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) createResource<{
name: string;
}, unknown>(fetcher: ResourceFetcher<true, {
name: string;
}, unknown>, options?: ResourceOptions<{
name: string;
}, true> | undefined): ResourceReturn<{
name: string;
}, unknown> (+3 overloads)
import createResource
(fetchUserslet fetchUsers: () => Promise<{
name: string;
}>
); return usersconst users: Resource<{
name: string;
}>
; }
export default function Componentfunction Component(): void
() { const usersconst users: Resource<{
name: string;
}>
= useRouteData(alias) useRouteData<({ params }: RouteDataArgs<unknown>) => Resource<{
name: string;
}>>(): Resource<{
name: string;
}>
import useRouteData
<typeof routeDatafunction routeData({ params }: RouteDataArgs<unknown>): Resource<{
name: string;
}>
>(); }
ts
import { createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) function createResource<T, R = unknown>(fetcher: ResourceFetcher<true, T, R>, options: InitializedResourceOptions<NoInfer<T>, true>): InitializedResourceReturn<T, R> (+3 overloads)
import createResource
} from "solid-js"; import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<{
name: string;
}>
({ params(parameter) params: Params
}: RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { // load some data
const [usersconst users: Resource<{
name: string;
}>
] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) createResource<{
name: string;
}, unknown>(fetcher: ResourceFetcher<true, {
name: string;
}, unknown>, options?: ResourceOptions<{
name: string;
}, true> | undefined): ResourceReturn<{
name: string;
}, unknown> (+3 overloads)
import createResource
(fetchUserslet fetchUsers: () => Promise<{
name: string;
}>
); return usersconst users: Resource<{
name: string;
}>
; }
export default function Componentfunction Component(): void
() { const usersconst users: Resource<{
name: string;
}>
= useRouteData(alias) useRouteData<({ params }: RouteDataArgs<unknown>) => Resource<{
name: string;
}>>(): Resource<{
name: string;
}>
import useRouteData
<typeof routeDatafunction routeData({ params }: RouteDataArgs<unknown>): Resource<{
name: string;
}>
>(); }
Reference
useRouteData()
Call useRouteData()
inside a component to get the data from the nearest ancestor route section.
tsx
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData
} from "solid-start";
function Componentfunction Component(): void
() { const data = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData
(); }
tsx
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData
} from "solid-start";
function Componentfunction Component(): void
() { const data = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData
(); }
Returns
Whatever is returned by the nearest ancestor routeData
function.