Skip to main content

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 ParameterDefault type
RowTypeany

Parameters

ParameterType
querystring | 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 ParameterDefault type
RowTypeany

Parameters

ParameterType
querystring | 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>
);
}