Cord LogoDocs
Sign inStart now

Observe group members

User API /
Ask the Community

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:

Show property details

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:

Show property details

Not finding the answer you need? Ask our Developer Community

Ask Cordy