MVP Sitecore site and GraphQL query change

I am learning from the Sitecore MVP site, so I downloaded and configured it in my local development environment. This blog will show you how to add the new LinkedIn URL field on the MVP person card as shown below.

MVP site uses the Sitecore GraphQL API to query the MVP people created in the CMS. The project Mvp.Foundation.People.Platform in Visual Studio contains the configurations for GraphQL. Keep in mind the jss GraphQL endpoint URL because will be used in the Sitecore GQL UI application.

The Sitecore GQL UI application is used to test and validate the query changes to include the new LinkedIn URL field. First login into Sitecore CMS and go to this URL to access the Sitecore GQL UI.

https://<Site CM Url>/api/content/people/ui

Example: https://cm.sc-mvp.localhost/api/content/people/ui

The endpoint inner URL for the query is this one:

https://<Site CM Url>/api/content/people?sc_apikey={E2F3D43E-B1FD-495E-B4B1-84579892422A}

Example: https://cm.sc-mvp.localhost/api/content/people?sc_apikey={E2F3D43E-B1FD-495E-B4B1-84579892422A}

The following screen shows the query execution. The left top area is the query, the right area the results, and the left button area the query variables.

The query that contains the new field linkedinUrl is the following one, and must be changed on the PeopleSearchAdvanced.graphql and GraphQLRequestBuilder.cs files in Visual Studio.

query MVPSearch(
   $language: String!
  $rootItem: String!
  $pageSize: Int
  $cursorValueToGetItemsAfter: String!
  $facetOn: [String!]
  $fieldsEqual: [ItemSearchFieldQuery]
  $query: String

) {
  search(
    rootItem: $rootItem
    language: $language
    latestVersion:true
    first: $pageSize
    after: $cursorValueToGetItemsAfter
     fieldsEqual: $fieldsEqual
    facetOn: $facetOn
     keyword: $query
    
  ) {
    facets {
      name
      values {
        value
        count
      }
    }
 
    results {
      items {
        item {
          ... on Person {
            firstName {
              value
            }
            lastName {
              value
            }
            email {
              value
            }
            introduction {
              value
            }
            introduction {
              value
            }
            linkedinUrl {
              value
            }
            url
            country{targetItem{name}}
            
          }
        }
      }
      totalCount
      pageInfo {
        startCursor
        endCursor
        hasNextPage
        hasPreviousPage
      }
    }
  }
}

To complete the changes in VIsual Studio, add the following lines to the MVPGrapghQlModels.cs class:

public class LinkedinUrl
{
	public string value { get; set; }
}

Change the file Shared\Components\GraphQLPeopleList\Default.cshtml:

<p class="card-social">
    @person.linkedinUrl.value                                        
</p>

<a class="content" target="_blank" href="@person.linkedinUrl.value">

Finally, add this new style in the CSS file:

.card-social {
                padding: 0 0 0 20px;
                font-size: 10px;
                font-family: 'AvenirNextW05-Regular';
                line-height: 16px;
                margin-top: 20px;
                background-image: url(../images/icon-linkedin4.svg);
                border-radius: unset;
                background-position: left 50%;
                background-repeat: no-repeat;
                color: #fff;
                -webkit-filter: brightness(0) saturate(100%) invert(8%) sepia(0) saturate(1211%) hue-rotate(166deg) brightness(101%) contrast(87%);
                filter: brightness(0) saturate(100%) invert(8%) sepia(0) saturate(1211%) hue-rotate(166deg) brightness(101%) contrast(87%)
            }

This blog has detailed the steps required for the new LinkedIn field. I will show you on the coming blog posts some additional changes based on this for this interesting project.