useSuspenseQuery()
Call Signature
function useSuspenseQuery<RowType>(
query,
parameters?,
options?): SuspenseQueryResult<RowType>
A hook to access the results of a watched query that suspends until the initial result has loaded.
Type Parameters
Type Parameter | Default type |
---|---|
RowType | any |
Parameters
Parameter | Type |
---|---|
query | string | CompilableQuery <RowType > |
parameters ? | any [] |
options ? | AdditionalOptions |
Returns
SuspenseQueryResult
<RowType
>
Example
export const ContentComponent = () => {
// The lists array here will be a new Array reference whenever a change to the
// lists table is made.
const { data: lists } = useSuspenseQuery('SELECT * from lists');
return <View>
{lists.map((l) => (
<Text key={l.id}>{JSON.stringify(l)}</Text>
))}
</View>;
}
export const DisplayComponent = () => {
return (
<Suspense fallback={<div>Loading content...</div>}>
<ContentComponent />
</Suspense>
);
}
export const DiffContentComponent = () => {
// A differential query will emit results when a change to the result set occurs.
// The internal array object references are maintained for unchanged rows.
// The returned lists array is read only when a `rowComparator` is provided.
const { data: lists } = useSuspenseQuery('SELECT * from lists', [], {
rowComparator: {
keyBy: (item) => item.id,
compareBy: (item) => JSON.stringify(item)
}
});
return <View>
{lists.map((l) => (
<Text key={l.id}>{JSON.stringify(l)}</Text>
))}
</View>;
}
export const DisplayComponent = () => {
return (
<Suspense fallback={<div>Loading content...</div>}>
<ContentComponent />
</Suspense>
);
}
Call Signature
function useSuspenseQuery<RowType>(
query,
paramerers?,
options?): ReadonlySuspenseQueryResult<RowType>
A hook to access the results of a watched query that suspends until the initial result has loaded.
Type Parameters
Type Parameter | Default type |
---|---|
RowType | any |
Parameters
Parameter | Type |
---|---|
query | string | CompilableQuery <RowType > |
paramerers ? | any [] |
options ? | DifferentialHookOptions <RowType > |
Returns
ReadonlySuspenseQueryResult
<RowType
>
Example
export const ContentComponent = () => {
// The lists array here will be a new Array reference whenever a change to the
// lists table is made.
const { data: lists } = useSuspenseQuery('SELECT * from lists');
return <View>
{lists.map((l) => (
<Text key={l.id}>{JSON.stringify(l)}</Text>
))}
</View>;
}
export const DisplayComponent = () => {
return (
<Suspense fallback={<div>Loading content...</div>}>
<ContentComponent />
</Suspense>
);
}
export const DiffContentComponent = () => {
// A differential query will emit results when a change to the result set occurs.
// The internal array object references are maintained for unchanged rows.
// The returned lists array is read only when a `rowComparator` is provided.
const { data: lists } = useSuspenseQuery('SELECT * from lists', [], {
rowComparator: {
keyBy: (item) => item.id,
compareBy: (item) => JSON.stringify(item)
}
});
return <View>
{lists.map((l) => (
<Text key={l.id}>{JSON.stringify(l)}</Text>
))}
</View>;
}
export const DisplayComponent = () => {
return (
<Suspense fallback={<div>Loading content...</div>}>
<ContentComponent />
</Suspense>
);
}