Build thread previews with detailed data about all threads visible to the current user


Overview #

This API allows you to observe threads data within your project, that are visible to the current user, including live updates. You can use the available filter options to fine tune the threads returned.
React:
import { thread } from '@cord-sdk/react';
const { threads, loading, hasMore, fetchMore, counts } = thread.useThreads({
  sortBy: 'first_message_timestamp',
  filter: {
    location: {
      value: { page: 'document_details' },
      partialMatch: true
    },
    metadata: { category: 'sales' },
  },
});

return (
  <div>
     {counts &&
        <div>
          We have {counts.total} total threads and {counts.unread} unread threads.
        </div>
      }
    {threads.map((thread) => (
      <div key={thread.id}>
        Thread ID {thread.id} has {thread.total} messages!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.thread.observeThreads(
  ({ threads, loading, hasMore, fetchMore, counts }) => {
    console.log('Got a thread data update:');
    if (loading) {
      console.log('Loading...');
    }
     if (counts){
      console.log(`Total threads: ${counts.total} and unread threads: ${counts.unread}`)
     }
    threads.forEach((thread) =>
      console.log(`Thread ${thread.id} has ${thread.total} messages!`)
    );
    if (!loading && hasMore && threads.length < 25) {
      // Get the first 25 threads, 10 at a time.
      fetchMore(10);
    }
  },
  { filter: {
       location: {
             'value': { 'page': 'document_details'},
             'partialMatch': true
            },
       metadata: {'category': 'sales'}
   }}
);
// ... Later, when updates are no longer needed ...
window.CordSDK.thread.unobserveThreads(ref);
import { thread } from '@cord-sdk/react';
const { threads, loading, hasMore, fetchMore, counts } = thread.useThreads({
  sortBy: 'first_message_timestamp',
  filter: {
    location: {
      value: { page: 'document_details' },
      partialMatch: true
    },
    metadata: { category: 'sales' },
  },
});

return (
  <div>
     {counts &&
        <div>
          We have {counts.total} total threads and {counts.unread} unread threads.
        </div>
      }
    {threads.map((thread) => (
      <div key={thread.id}>
        Thread ID {thread.id} has {thread.total} messages!
      </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:


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.


threads #

ThreadSummary[]
An array of objects containing the threads that match the request.
This array is paginated. At first, it will contain only the first few threads. Calling fetchMore will cause further threads to be appended to the array.
The order in which you will receive the threads is determined by the sorting options.

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

Show property details



counts #

ThreadActivitySummary
An object providing counts of threads. Refer to observeThreadCount API for more information about the properties returned.

This is an object with the following fields:

Show property details


What this function returns #

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 #


options #

optional
ObserveThreadsOptions
Options that control which threads are returned.

This is an object with the following fields:

Show property details


Not finding the answer you need? Ask our Developer Community

Ask Cordy