Observe detailed thread data
Build rich integrations with detailed data about all messages in a thread
Overview
This method allows you to observe detailed data about a thread, including live updates.
import { thread } from '@cord-sdk/react';
const summary = thread.useThreadData(threadId, options);Usage
import { thread } from '@cord-sdk/react';
const { messages, loading, hasMore, fetchMore } = thread.useThreadData('my-awesome-thread-id');
return (
<div>
{messages.map((messageSummary) => (
<div key={summary.id}>
Message ID {messageSummary.id} was created at {messageSummary.createdTimestamp}!
</div>
))}
{loading ? (
<div>Loading...</div>
) : hasMore ? (
<div onClick={() => fetchMore(10)}>Fetch 10 more</div>
) : null}
</div>
);Available Data
The API provides an object which has the following fields:
messages
An array of objects, one for each message in the specified thread.
This array is paginated. At first, it will contain summaries of only the first (newest) few messages. Calling fetchMore will cause further message summaries to be appended to the array.
Each object in the array contains the following fields:
id
createdTimestamp
deletedTimestamp
null if the message is not deleted.seen
firstMessage
Contains information about the first (i.e., oldest) message in the thread. null if the thread is empty. Otherwise, contains the following fields:
id
createdTimestamp
deletedTimestamp
null if the message is not deleted.seen
loading
When this is true, Cord is in the process of fetching additional data from its backend. Once the fetch is complete, the additional items will be appended to the above list, and loading will become false.
Both the initial data load and a call to fetchMore will start a fetch and cause loading to become true.
fetchMore
Call this function to fetch additional data from Cord's backend. It takes a single argument, the number of additional items to fetch.
Once called, loading will become true while the data is fetched. Once the fetch is complete, the additional items will be appended to the above list, and loading will return to false.
This function returns a promise that is resolved once the fetch is complete.
hasMore
If this is true, then the list of results is incomplete, and you need to call fetchMore to continue paginating through them. Once this becomes false, all results are available, and calls to fetchMore won't do anything.
What this function returns
The hook will initially return undefined while the data loads from our API. Once it has loaded, your component will re-render and the hook will return an object containing the fields described under "Available Data" above. The component will automatically re-render if any of the data changes, i.e., this data is always "live".
Arguments this function takes
threadId
The thread ID to fetch data for. If a thread with this ID does not exist, it will be created.
options
Miscellaneous options. See below.
The "options" argument
threadName
Loading information for a thread ID which does not exist will create that thread. If that happens, this will be the name of the new thread.
If unset, this will default to the current page's title.
location
Loading information for a thread ID which does not exist will create that thread. If that happens, this will be the location of the new thread.
If unset, this will default to the location provided to theuseCordLocation hook if that was used. Otherwise, will default to the current page's URL.`
