Cord LogoDocs
Sign inStart now

Observe group members

User API /

Observe data about the members of a specific or the viewer's current group

Overview #

This method allows you to observe the members of a group the current user is a member of - either the current group the viewer is logged into, or, if specified as an option, another group the viewer is a member of.
React:
import { user } from '@cord-sdk/react';
const { groupMembers, loading, hasMore, fetchMore } = user.useGroupMembers();
return (
  <div>
    {groupMembers.map((groupMembers) => (
      <div key={groupMembers.id}>
        Group member ${groupMembers.id} is called ${groupMembers.name}!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.user.observeGroupMembers(
  ({ groupMembers, loading, hasMore, fetchMore }) => {
    console.log('Got a group members update:');
    if (loading) {
      console.log('Loading...');
    }
    groupMembers.forEach((groupMember) =>
      console.log(`Group member ${groupMember.id} is called ${groupMember.name}!`),
    );
    if (!loading && hasMore && groupMembers.length < 25) {
      // Get the first 25 group members, 10 at a time.
      fetchMore(10);
    }
  },
  {groupID: 'group123'}
);
import { user } from '@cord-sdk/react';
const { groupMembers, loading, hasMore, fetchMore } = user.useGroupMembers();
return (
  <div>
    {groupMembers.map((groupMembers) => (
      <div key={groupMembers.id}>
        Group member ${groupMembers.id} is called ${groupMembers.name}!
      </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.

groupMembers #

ClientUserData[]

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

id #

string
The user's ID. This is unique within an application.

name #

string | null
The user's name.

shortName #

string | null
The user's short name. In most cases, Cord components will prefer using this name over name when set.

displayName #

string
The primary display name of the user. This is a readonly field that's provided as a convenience. Its value is the user's shortName or name, preferring shortName if both are set, or the string "unknown" if neither is set.

secondaryDisplayName #

string
The secondary display name of the user, in cases where you might want to display a secondary name (such as in a subtitle). This is a readonly field that's provided as a convenience. Its value is the user's name or shortName, preferring name if both are set, or the string "Unknown" if neither is set.

profilePictureURL #

string | null
A URL to the user's profile picture.

metadata #

EntityMetadata
Any metadata that has been set for the user.

What this function returns #

The hook will initially return 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 fields described under "Available Data" above.

Arguments this function takes #

options #

optional
ObserveGroupMembersOptions

This is an object with the following fields:

groupID #

optional
string
The group to search for. The viewer must be a member of the group in order to receive its data. If omitted, the API will fetch the members of the group the viewer is currently logged in with, i.e. the one that is specified in their access token.

Ask Cordy