/How-to-use-the-new-Headless-APIs-and-REST-Builder

Primary LanguageJavaScript

How to use the new Headless APIs and REST Builder

Code for Devcon 2021 talk by Javier Gamarra. Slides are here

The idea is to a simple TikTok clone like this:

-> Tested in 7.4/7.3 but Headless code is backported to 7.2 and 7.1.

How to install

  1. Launch your Liferay instance
  2. Clone this repo, cd to web directory and launch npm i
  3. Run npm start and Play! :)

Steps

  1. Learn the existing APIs with /o/api && /o/openapi and the documentation
  2. Show and create GIFs with the REST APIs
  3. Use GraphQL
    1. Installing Apollo: npm install @apollo/client graphql
    2. Create an Apollo client
    3. Use useQuery
  4. Conditionally render elements of the UI based on backend permissions with actions
  5. Store and retrieve documents and web contents in the new Asset libraries
  6. Return any asset with ContentElements API
  7. Add new fields using WebContent or RelatedContents or CustomFields -> API extensibility
  8. Let's define our API, REST Builder
  9. Improve performance -> fields && restrictFields
  10. Transform your results with filter, search, sort and flatten
  11. Embed image with NestedFields & 'data:video/mp4;base64,'
  12. Return or create all translations & window.navigator.language from chrome://settings/languages#lang
  13. Aggregate information with facets
  14. Disable endpoints in headless settings

Links

Thanks