GetStream / stream-js

JS / Browser Client - Build Activity Feeds & Streams with GetStream.io
https://getstream.io
BSD 3-Clause "New" or "Revised" License
329 stars 110 forks source link

[Question] - Reaction counts and own reactions not working #575

Closed SKLn-Rad closed 1 year ago

SKLn-Rad commented 1 year ago

Hey!

In short, we have an application which calls to a backend to handle all of the posting of the activities; and getting of the activity list for the client as we shim some extra data on top of the response.

I cannot seem to get own_reactions or reaction_counts to work to save my life and we're currently dependent on it for a milestone we're facing and was wondering if you could help!.

I expect it is something we're doing wrong with handling of the user token.

Here is our process:

Preamble: Background context

The posts are posted to the user feed; with the timeline feed of the == user subscribing to that feed.
All reactions are posted to the user feed with expectations for them to filter down; but we're unable to see reaction counts on the user feed either.

Step 1: Getting the user token

We use our API secret to get a server token, which we then exchange with the users UID; in order to get the client "client", and then the token.

export function getFeedsClient(): StreamClient<DefaultGenerics> {
    functions.logger.info("Connecting to feeds", { structuredData: true });
    const apiKey = process.env.STREAM_API_KEY;
    const apiSecret = process.env.STREAM_API_SECRET;

    if (!apiKey || !apiSecret) {
      throw new Error("Missing Stream Feeds API key or secret");
    }

    return connect(apiKey, apiSecret, undefined, {
      browser: false,
    });
  }

  export function getFeedsUserClient(userId: string): StreamClient<DefaultGenerics> {
    const feedsServerClient = getFeedsClient();
    functions.logger.info("Connecting to feeds as user", { structuredData: true });

    const apiKey = process.env.STREAM_API_KEY;
    const apiSecret = process.env.STREAM_API_SECRET;
    const appId = process.env.STREAM_FEEDS_APP_ID;

    if (!apiKey || !apiSecret || !appId) {
      throw new Error("Missing Stream Feeds API key or secret");
    }

    const userToken = feedsServerClient.createUserToken(userId);

    return connect(apiKey, userToken, appId);
  }

  /**
   * Creates a user token for GetStream.
   * @param {string} userId the user's ID.
   * @return {string} a promise that resolves to the user's token.
   * @see https://getstream.io/chat/docs/node/tokens_and_authentication/?language=javascript
   */
  export function getUserToken(userId: string): string {
    functions.logger.info(`Creating user token ${userId}`);
    return getFeedsClient().createUserToken(userId);
  }

Step 2: Posting an activity

All activities in our API live in the same schema, so we simply pass the users UID as a string; and set the origin to the poster feed; the foreign key and the object to the ID in our database.

const feedClient = FeedService.getFeedsUserClient(userID);
    const feed = feedClient.feed(feedName, userID);

    const getStreamActivity: NewActivity<DefaultGenerics> = {
      actor: feedClient.currentUser!,
      verb: ActivityActionVerb.Post,
      object: activityObjectForeignId,
      foreign_id: activityObjectForeignId,
      to: targets,
    };

    await feed.addActivity(getStreamActivity);

Step 3: Posting the reaction

I should mention that we get all the comments down from the API when we call client.reactions.filter. And all properties you can assume are strings

const reactionEntry = {
            kind: reaction.kind,
            activity_id: reaction.activity_id,
            user_id: reaction.user_id,
        } as ReactionEntryJSON;

        const response = await client.reactions.add(reaction.kind!, reaction.activity_id!, reactionEntry, {
            userId: reaction.user_id,
        });

Step 4: Getting my reactions with counts

const response = await feed.get({
      limit: windowSize,
      id_lt: next,
      user_id: uid,
      enrich: true,
      withReactionCounts: true,
      withOwnChildren: true,
      withOwnReactions: true,
      reactionKindsFilter: ["like", "share", "comment", "bookmark"],
      ownReactions: true,
    });

    functions.logger.info("Got feed window", { feed, windowSize, next, response });

    const results = (response.results as FlatActivityEnriched<DefaultGenerics>[]).map((activity) => {
      functions.logger.info("Origin map", { activity, origin: activity.origin });

      return {
        id: activity?.id ?? "",
        foreign_id: activity?.foreign_id ?? "",
        object: activity?.object ?? "",
        actor: activity?.actor ?? "",
        reaction_counts: activity.reaction_counts,
        verb: activity?.verb ?? "",
      };
    }) as FeedEntry[];

Apologies for the long tangent but your API docs on your website don't line up so I assumed it might be some configuration somewhere!

You guys are awesome! Keep up the good work. Ryan

JimmyPettersson85 commented 1 year ago

Hey Ryan!

Would you mind contacting the support (https://getstream.io/contact/support/) with your appID and API key? It could be an integration error or configuration problem, or it could be a bug and then it will come back to me :)

xernobyl commented 1 year ago

We're adding a "withUserId" param, which should be available on the next release, which should help your problem.