SPFx - Increment Like in sharepoint list item rating

Question

I have a SharePoint list with reviews enabled, I am trying to patch an increment to the like count within SPFx.

What's the best way to achieve this? Can't find much info online, can anyone point me in the right direction?

UPDATE:

You can use SP PnP JS library to like/unlike list items/site pages < Seems to be broken.

---

When trying to do a post request using the old rest api, I get this error:

this.props.context.spHttpClient.post("https://mysite.sharepoint.com/sites/mysite/_api/Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID=%27%7B1E5C322E%2D00EB%2D4A58%2D8545%2D942D2AD5FB11%7D%27,itemID=%2713%27,like=true"  

"The expression "Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID='{1E5C322E-00EB-4A58-8545-942D2AD5FB11}',itemID='13',like=true" is not valid."

I think this only works for SharePoint server not online.

---

Update

Using this method worked!!!

Another Approach: Using JSOM in SPFx:

Answer 1

You can use SP PnP JS library to like/unlike list items/site pages.

Example:

import { sp, IItem } from "@pnp/sp/presets/all";
import "@pnp/sp/comments/item";
import { ILikeData, ILikedByInformation } from "@pnp/sp/comments";

// get a specific item by id.
let item: IItem = await sp.web.lists.getByTitle("My List").items.getById(1).get();

// like an item
await item.like();

// unlike an item
await item.unlike();

Documentation: @pnp/sp/comments and likes

---

Update:

Seems like you can also use old endpoints like:

/_api/Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID=@a1,itemID=@a2,like=@a3)

Source: Likes are not supported in this item

---

Also, you can try this approach of getting like count & liked by information from list item and then update list item with new like/unlike:

How to like/unlike resource via SharePoint REST API

---

Another Approach: Using JSOM in SPFx:

First of all, load JSOM modules in your web part as given here: Connect to SharePoint using the JavaScript Object Model (JSOM)

Then use below function to set like/unlike on list item:

export function likeUnlikeListItem(listName: string, itemId: number, isLike: boolean) {
  Promise.resolve().then(
    () => {
      sp.web.lists
        .getByTitle(listName)
        .get()
        .then(
          (data) => {
            Promise.resolve().then(
              () => {
                // eslint-disable-next-line
                SP.SOD.registerSod(
                  "reputation.js",
                  "/_layouts/15/reputation.js",
                );
                // eslint-disable-next-line
                SP.SOD.executeFunc(
                  "reputation.js",
                  "Microsoft.Office.Server.ReputationModel.Reputation",
                  () => {
                    // eslint-disable-next-line
                    const spContext = SP.ClientContext.get_current();

                    const listId = data.Id;
                    // eslint-disable-next-line
                    Microsoft.Office.Server.ReputationModel.Reputation.setLike(
                      spContext,
                      listId,
                      itemId,
                      isLike,
                    );
                    spContext.executeQueryAsync(
                      (data) => {
                        return true;
                      },
                      (error) => {
                        return false;
                      },
                    );
                  },
                );
              },
              (error) => {
                // error
                console.log(error);
                return false;
              },
            );
          },
          (error) => {
            console.log(error);
            return false;
          },
        );
    },
    (error) => {
      console.log(error);
      return false;
    },
  );
}

Usage:

To Like list item:

likeUnlikeListItem("My List", 1, true);

To Unlike list item:

likeUnlikeListItem("My List", 1, false);

Answer 2

Thanks @Ganesh Sanap. I couldn't use .like() method for sharepoint online. But this method works in your link How to like/unlike resource via SharePoint REST API

 var likesCount=item["LikesCount"]??0;
 var likedUsers=item["LikedByStringId"];
 var userKeys = likedUsers.results==null?[]:likedUsers.results;
 const userId = window["_spPageContextInfo"]?.userId?? (await 
 pnp.sp.web.currentUser.get()).Id;
 userKeys.push(userId.toString());
 await pnp.sp.web.lists.getById(this.listId).items.getById(itemId).update({
        LikedByStringId:{results:userKeys},/*userId value aray*/
        LikesCount:likesCount
      });