Activity Feeds V3 is in closed alpha — do not use it in production (just yet).

Stories

Stories are activities with an expiration date, usually used to share information that is available for a limited amount of time. Most often there is a dedicated feed for users to post expiring activities, and there is a separate timeline for reading stories.

Built-in story groups

There are two built-in story groups:

  • story for users to post their stories to
  • stories for users to follow others’ stories

It’s possible to update the built-in story groups or create custom ones.

Creating story groups

If you prefer to create your own story feed groups, you can do so with custom feed groups.

Creating or updating feed groups is only possible server-side.

The following example defines two feed groups:

  • my-story for users to post their stories to
  • my-stories for users to follow others’ stories

There are two settings specific to story feed groups:

  • You can enable tracking watched activities: this makes it possible to track which stories a user has seen or not (please note that this is different from notification configurations, typically you don’t need that for stories)
  • You can decide if watched stories should be removed from the feed. It’s false for the built-in story groups
await serverClient.feeds.createFeedGroup({
  id: `my-story`,
  stories: {
    skip_watched: false,
    track_watched: true,
  },
});

await serverClient.feeds.createFeedGroup({
  id: `my-stories`,
  stories: {
    skip_watched: false,
    track_watched: true,
  },
  aggregation: {
    // Typically stories are aggregated by user id
    format: "{{ user_id }}",
  },
  activity_selectors: [{ type: "following" }],
});

Posting stories

Usually stories are activities containing a single image or video. But you can implement them any way you want.

const johnStoryFeed = client.feed("story", "john");
await johnStoryFeed.getOrCreate();

let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

await johnStoryFeed.addActivity({
  type: "post",
  attachments: [
    {
      image_url: "https://example.com/image.jpg",
      custom: {},
    },
  ],
  expires_at: tomorrow.toISOString(),
});

Activities on story feeds are ordered cronologically.

Following story feeds

Following someone’s story feed is the same as following any other feed:

const saraStoryTimeline = client.feed("stories", "sara");
await saraStoryTimeline.getOrCreate({ watch: true });

await saraStoryTimeline.follow(johnStoryFeed);

Reading story timeline and marking avtivities as watched

const saraStoryTimeline = client.feed("stories", "sara");
await saraStoryTimeline.getOrCreate({ watch: true });

// Since story timeline is aggregated by user id, we read aggregated activities
const johnStories =
  saraStoryTimeline.state.getLatestValue().aggregated_activities[0];
// True if we watched all active stories of a user
console.log(johnStories.is_watched);

// Display all of John's active stories
johnStories.activities.forEach((activity) => {
  // True if we watched a given story
  console.log(activity.is_watched);
});

// Mark a story as read
await saraStoryTimeline.markActivity({
  mark_watched: [johnStories.activities[0].id],
});

Story groups in story timelines are sorted by unread count. Watched story groups are returned last (unless the feed group is configured not to return watched stories).

When marking an activity as watched, feeds.stories_feed.updated WebSocket event is dispatched to clients of the user who marked the activity (Sara in this example). There are no WebSocket events sent when a user adds to their story, you need to reread the feed to get updates.

While there is no limit of how many active stories a user can have, aggregated_activities return the latest 100 activities for each group.

Pagination for story groups work the same way as for any other feeds. This is how you can load the next page of story groups:

let feed = client.feed(
    for: .init(
        group: "user",
        id: "john",
        activityLimit: 10
    )
)
// Page 1
try await feed.getOrCreate()
let activities = feed.state.activities // First 10 activities

// Page 2
let page2Activities = try await feed.queryMoreActivities(limit: 10)

let page1And2Activities = feed.state.activities

Reading story feed

Following someone’s story feed is one way to read stories. However, it’s also possible to read someone’s story feed directly:

// Sara reads John's story feed
const johnStoryFeed = saraClient.feed("story", "john", {
  // By default new activities are added to the start of the list, but this is not what we want for stories
  addNewActivitiesTo: "end",
});

// Alternatively set after feed is created
johnStoryFeed.addNewActivitiesTo = "end";

await johnStoryFeed.getOrCreate({
  watch: true,
  limit: 100,
});

const johnStories = johnStoryFeed.state.getLatestValue().activities;

// Display all of John's active stories
johnStories.forEach((activity) => {
  // True if we watched a given story
  console.log(activity.is_watched);
});

// Mark a story as watched
await johnStoryFeed.markActivity({
  mark_watched: [johnStories[0].id],
});

When marking an activity as watched, feeds.stories_feed.updated WebSocket event is dispatched to clients of the user who marked the activity (Sara in this example). If a new story is added to the feed, a feeds.activity.added event is dispatched.

Reading expired stories

Users can list the expired stories that they created, but it’s not possible to read other users’ expired stories:

const now = new Date();
const result = await client.queryActivities({
  filter: {
    expires_at: { $lte: now.toISOString() },
    user_id: john.id,
  },
  sort: [{ field: "created_at", direction: -1 }],
});
© Getstream.io, Inc. All Rights Reserved.