syncStatus
Triplit's client storage is split into two areas - an outbox for unsynced updates and a cache for synced updates. Sometimes you may want to indicate that to a user that data has not yet been saved to the server. To do this, you can use the syncStatus option in a subscription. This method accepts a single sync state (pending, confirmed, all) as an argument.
For example, a messaging app could use two queries to build message sent indicators. In React:
const messagesQuery = client.query('messages').Order(['createdAt', 'ASC']);
function Messages() {
const { results: allMessages } = useQuery(client, messagesQuery);
const { results: pendingMessages } = useQuery(client, messagesQuery, {
syncStatus: 'pending',
});
return (
<div>
{allMessages?.map((message) => (
<div>
<p>{message.text}</p>
<p>
{pendingMessages?.find(
(pendingMessage) => pendingMessage.id === message.id
)
? 'Sending...'
: 'Sent'}
</p>
</div>
))}
</div>
);
}