Retrieving Clarity's Product Data with REST and GraphQL

Liferay’s headless API endpoints enable flexible, comprehensive data retrieval across components. During their site implementation, Clarity’s team created a variety of products within commerce catalogs. Now, Clarity’s developers want to practice retrieving product information through headless APIs with GET requests and GraphQL queries.

Exercise: Retrieving Clarity’s Product Information with GET

Here, you’ll leverage REST endpoints to retrieve product details. You’ll also refine results with a keyword search and pagination.

Sign in as the Clarity Admin user.
- Username: admin@clarityvisionsolutions.com
- Password: learn
Navigate to the API Explorer at http://localhost:8080/o/api.
In the upper right, click on the REST Applications drop-down and select headless-commerce-admin-catalog/v1.0.
Under the Product section, expand the getProductsPage endpoint.
Click Execute and examine the response body.
It includes 11 entries and at the very bottom you should have something like:
```
"lastPage": 1,
"page": 1,
"pageSize": 20,
"totalCount": 11    
```
Now, add “sunglasses lenses” to the search parameter, and click Execute.

The response body should now include only six items:
```
"lastPage": 1,
"page": 1,
"pageSize": 20,
"totalCount": 6
```
Next, execute the call with the following additional parameters:

Parameter Value

page 2

pageSize 5

search sunglasses lenses

Parameter	Value
page	2
pageSize	5
search	sunglasses lenses

Validate the returned response body:

"lastPage": 2,
"page": 2,
"pageSize": 5,
"totalCount": 6

Because the search yields six products and pagination is active, the second page of results shows only one item, as seen in the response body.

Exercise: Retrieving Clarity’s Product Information with GraphQL

Here, you’ll leverage a GraphQL query to retrieve the same product information from the previous exercise.

Scroll up to the top of the API explorer page for the Liferay Commerce Admin Catalog API, and click on GraphQL.

Enter the following query within the editor:

query {
    headlessCommerceAdminCatalog_v1_0 {
        products(search:"sunglasses lenses", pageSize: 5, page:2){
        items {
            externalReferenceCode
            name
            description
            active
        }
        lastPage
        page
        pageSize
        totalCount
        }
    }
}

NOTE
To see autocomplete in action, start typing and press tab or press CTRL + SPACE.

Click the play button to execute the query. You should get the following:

query {
    headlessCommerceAdminCatalog_v1_0 {
        products(search:"sunglasses lenses", pageSize: 5, page:2){
        items {
            externalReferenceCode
            name
            description
            active
        }
        lastPage
        page
        pageSize
        totalCount
        }
    }
}

Conclusion

Great! You’ve learned how to retrieve product information using the Commerce Admin Catalog API with both REST and GraphQL. While the data retrieved is the same, you've explored two different methods of accessing and interacting with Liferay’s headless API, providing flexibility when retrieving data.

Next, you’ll learn to query data through relationship endpoints and nestedFields, optimizing API calls to enhance performance and user experience.