Get a single thread

Build rich integrations with detailed data about one thread and all of its messages

Overview #

This method allows you to observe all messages and data for a thread, including live updates.

import { thread } from '@cord-sdk/react';
const { messages, thread, loading, hasMore, fetchMore } = thread.useThread('my-awesome-thread-id');

return (
  <div>
    {thread ?
      <p> {thread.unread} / {thread.total} unread messages </p>
      : null}
    {messages.map((messageSummary) => (
      <div key={messageSummary.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>
);

Copy

Available Data #

The API provides an object which has the following fields:

messages #

ClientMessageData[]

An array of objects, one for each message in the specified thread.

This array is paginated. At first, it will contain only the latest (newest) messages. Calling fetchMore will cause further messages to be appended to the array.

This is an array of objects, each of which has the following fields:

Show property details

thread #

Information about the thread. This will be undefined if the thread is still loading and null if the thread does not exist.

This property can be one of the following:

undefined
null
ThreadSummary
This is an object with the following fields:
Show property details

loading #

boolean

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 result 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 #

FetchMoreCallback

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 result list, and loading will return to false.

This function returns a promise that is resolved once the fetch is complete.

hasMore #

boolean

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 #

Returns an object containing the fields described under "Available Data" above. Initially, loading will be true, thread will be undefined, and messages an empty array 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 full data. The component will automatically re-render if any of the data changes, i.e., this data is always "live".

Arguments this function takes #

threadID #

optional

string

The thread ID to fetch data for.

options #

optional

ReactThreadObserverOptions

Options for creating new threads.

This is an object with the following fields: