createRouteData
createRouteData
allows you to manage async data fetching.
tsx
const dataconst data: Resource<never[] | undefined>
= createRouteData(alias) createRouteData<never[], true>(fetcher: RouteDataFetcher<true, never[]>, options?: RouteDataOptions<undefined, true> | undefined): Resource<never[] | undefined> (+1 overload)
import createRouteData
(getStudentsfunction getStudents(): never[]
);
tsx
const dataconst data: Resource<never[] | undefined>
= createRouteData(alias) createRouteData<never[], true>(fetcher: RouteDataFetcher<true, never[]>, options?: RouteDataOptions<undefined, true> | undefined): Resource<never[] | undefined> (+1 overload)
import createRouteData
(getStudentsfunction getStudents(): never[]
);
Usage
Fetching data from an API
createRouteData
is a primitive for managing async data fetching. It is a light wrapper over createResource
that is a router away so it can handle data refetching. The simplest way to use it is to fetch data from an API.
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): Resource<any>
() { return createRouteData(alias) createRouteData<any, true>(fetcher: RouteDataFetcher<true, any>, options?: RouteDataOptions<undefined, true> | undefined): Resource<any> (+1 overload)
import createRouteData
(async () => { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
("https://hogwarts.deno.dev/students"); return (await response.json(method) Body.json(): Promise<any>
()); });
}
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): Resource<any>
() { return createRouteData(alias) createRouteData<any, true>(fetcher: RouteDataFetcher<true, any>, options?: RouteDataOptions<undefined, true> | undefined): Resource<any> (+1 overload)
import createRouteData
(async () => { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
("https://hogwarts.deno.dev/students"); return (await response.json(method) Body.json(): Promise<any>
()); });
}
Fetching data with a key
Often though we want to be able to set a key
for our routeData both to act as a parameter and to allow easy invalidation. The fetcher function does not reactively track, so you must use this option if you wish the route data to update. A "falsy" value turns off data fetching.
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<any>
({ params(parameter) params: Params
} : RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { return createRouteData(alias) createRouteData<any, string[]>(fetcher: RouteDataFetcher<string[], any>, options?: RouteDataOptions<undefined, string[]> | undefined): Resource<any> (+1 overload)
import createRouteData
( async key(parameter) key: string[]
=> { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
(`https://hogwarts.deno.dev/${key(parameter) key: string[]
[0]}/${key(parameter) key: string[]
[1]}`); return (await response.json(method) Body.json(): Promise<any>
()); },
{ key(property) key?: RouteDataSource<string[]>
: () => ["students", params(parameter) params: Params
.id] } );
}
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<any>
({ params(parameter) params: Params
} : RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { return createRouteData(alias) createRouteData<any, string[]>(fetcher: RouteDataFetcher<string[], any>, options?: RouteDataOptions<undefined, string[]> | undefined): Resource<any> (+1 overload)
import createRouteData
( async key(parameter) key: string[]
=> { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
(`https://hogwarts.deno.dev/${key(parameter) key: string[]
[0]}/${key(parameter) key: string[]
[1]}`); return (await response.json(method) Body.json(): Promise<any>
()); },
{ key(property) key?: RouteDataSource<string[]>
: () => ["students", params(parameter) params: Params
.id] } );
}
Reactive Keys
The array returned by the key
function can track signals and automatically refetch data when the key changes. One use case for this is refetching data based on when a query param changes (since query param changes don't actually register as a changed route). Consider the following example which implements basic pagination using an after
query param:
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params, location }: RouteDataArgs): Resource<any>
({ params(parameter) params: Params
, location(parameter) location: Location<unknown>
} : RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { return createRouteData(alias) createRouteData<any, string[]>(fetcher: RouteDataFetcher<string[], any>, options?: RouteDataOptions<undefined, string[]> | undefined): Resource<any> (+1 overload)
import createRouteData
( async ([, after(parameter) after: string
]) => { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
(`https://hogwarts.deno.dev/students?after${after(parameter) after: string
}`); return (await response.json(method) Body.json(): Promise<any>
()); },
{ key(property) key?: RouteDataSource<string[]>
: () => ["students", location(parameter) location: Location<unknown>
.query(property) Location<unknown>.query: Params
['after']] } );
}
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
} from "solid-start";
export function routeDatafunction routeData({ params, location }: RouteDataArgs): Resource<any>
({ params(parameter) params: Params
, location(parameter) location: Location<unknown>
} : RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs
) { return createRouteData(alias) createRouteData<any, string[]>(fetcher: RouteDataFetcher<string[], any>, options?: RouteDataOptions<undefined, string[]> | undefined): Resource<any> (+1 overload)
import createRouteData
( async ([, after(parameter) after: string
]) => { const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
(`https://hogwarts.deno.dev/students?after${after(parameter) after: string
}`); return (await response.json(method) Body.json(): Promise<any>
()); },
{ key(property) key?: RouteDataSource<string[]>
: () => ["students", location(parameter) location: Location<unknown>
.query(property) Location<unknown>.query: Params
['after']] } );
}
Setting the reconcile key
createRouteData
uses a Solid Store under the hood to store its data. This means that when data is refetched it attempts to diff the data to trigger only the finest-grained updates. By default, it is configured to key data to id
. If your backend uses a different field you can set it:
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): Resource<any>
() { return createRouteData(alias) createRouteData<any, true>(fetcher: RouteDataFetcher<true, any>, options?: RouteDataOptions<undefined, true> | undefined): Resource<any> (+1 overload)
import createRouteData
( async () => {
const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
("https://hogwarts.deno.dev/students"); return (await response.json(method) Body.json(): Promise<any>
()); },
{
reconcileOptions(property) reconcileOptions?: ReconcileOptions | undefined
: { key(property) key?: string | null | undefined
: "_id" }
}
);
}
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): Resource<any>
() { return createRouteData(alias) createRouteData<any, true>(fetcher: RouteDataFetcher<true, any>, options?: RouteDataOptions<undefined, true> | undefined): Resource<any> (+1 overload)
import createRouteData
( async () => {
const response = await fetchfunction fetch(input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>
("https://hogwarts.deno.dev/students"); return (await response.json(method) Body.json(): Promise<any>
()); },
{
reconcileOptions(property) reconcileOptions?: ReconcileOptions | undefined
: { key(property) key?: string | null | undefined
: "_id" }
}
);
}
Reference
createRouteData(fetcher, options)
Call createRouteData()
.
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): void
() { const dataconst data: Resource<never[] | undefined>
= createRouteData(alias) createRouteData<never[], true>(fetcher: RouteDataFetcher<true, never[]>, options?: RouteDataOptions<undefined, true> | undefined): Resource<never[] | undefined> (+1 overload)
import createRouteData
(getStudentsfunction getStudents(): never[]
);
dataconst data: () => never[] | undefined
() // null, data is not yet loaded, triggers Suspense dataconst data: Resource<never[] | undefined>
.loading(property) loading: boolean
// true, data is loading dataconst data: Resource<never[] | undefined>
.latest(property) latest: never[] | undefined
// null, data is not yet loaded }
tsx
import { createRouteData(alias) function createRouteData<T, S = true>(fetcher: RouteDataFetcher<S, T>, options?: RouteDataOptions<undefined, S>): Resource<T | undefined> (+1 overload)
import createRouteData
} from "solid-start";
export function routeDatafunction routeData(): void
() { const dataconst data: Resource<never[] | undefined>
= createRouteData(alias) createRouteData<never[], true>(fetcher: RouteDataFetcher<true, never[]>, options?: RouteDataOptions<undefined, true> | undefined): Resource<never[] | undefined> (+1 overload)
import createRouteData
(getStudentsfunction getStudents(): never[]
);
dataconst data: () => never[] | undefined
() // null, data is not yet loaded, triggers Suspense dataconst data: Resource<never[] | undefined>
.loading(property) loading: boolean
// true, data is loading dataconst data: Resource<never[] | undefined>
.latest(property) latest: never[] | undefined
// null, data is not yet loaded }
Options
key
(string | Array, default: true): Parameters for the route data to key by. A falsy value prevents fetching.initialValue
(unknown, default undefined
): Initial value of the routeData.deferStream
(boolean, default false
): Prevent streaming render from flushing until complete.reconcileOptions
:
key
(string, default "id"
): The property to use as a key for data diffing.merge
(boolean, default false
): When true diff deep merges unrecognized values instead of replacing them.
Returns
A Solid Resource. An accessor that returns the data loaded by the fetcher. The accessor additionally has these reactive properties:
state
("unresolved" | "pending" | "ready" | "refreshing" | "errored"): Current state of the route data.loading
(boolean): Indicates if it is loading.error
(unknown): Contains the error if it is currently errored.latest
(unknown): A way of reading the current value without triggering Suspense
.