adobe / aem-guides-wknd-graphql

AEM Guides WKND - GraphQL

This project includes example applications that highlight Adobe Experience Manager's GraphQL APIs.

Examples applications

Framework	Location	Description
Basic tutorial	/basic-tutorial	A React application used with the AEM Headless basic tutorial
Advanced tutorial	/advanced-tutorial	The WKND React application used with the Advanced Concepts of AEM Headless
Preview tutorial	/preview-tutorial	Basis of React SPA used in the Preview how-to
Remote SPA tutorial	/remote-spa-tutorial	Basis of Remote SPA used in the AEM Remote SPA tutorial
React example	/react-app	A React application using the AEM Headless Client for JavaScript
Next.js example	/next-js	A Next.js application using the AEM Headless Client for JavaScript
Android example	/android-app	An Android application using the AEM Headless Client for Java
iOS example	/ios-app	A iOS application built with SwiftUI
Web Component/pure JS example	/web-component	A Web Component built using pure JavaScript
Node.js (server-side) example	/server-to-server	Node.js server-side app using AEM Headless Client for Node.js

System Requirements

The sample applications in this repository are designed to connect to AEM environments with the GraphQL feature enabled.

AEM as a Cloud Service	AEM 6.5	Sample Content
Continual	Not supported	WKND Site 3.0.0+

Tutorial

Looking for a hands on guide? Checkout Getting Started with AEM Headless - GraphQL. An end-to-end tutorial illustrating how to build-out and expose content using AEM's GraphQL APIs and consumed by an external app, in a headless CMS scenario. The React App in this repository is used as part of the tutorial. Additional resources can be found on the AEM Headless Developer Portal.

Documentation

• AEM Headless Developer Portal

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the MIT License. See LICENSE for more information.

aem-guides-wknd-graphql's Issues

React App in /feature/spa-editor branch is not compatible anymore

As per Adobe tutorial to use remote SPA here [https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/remote-spa/quick-setup.html?lang=en]

I tried to use "/feature/spa-editor" branch of this repo, which seems obsolete now.
I am using below packages on AEM (latest sdk):
aem-guides-wknd.all-2.0.0.zip
wknd-app.all-1.0.0-SNAPSHOT.zip
wknd-app.ui.content.sample-1.0.0.zip

Is there any app in this repo which is compatible with remote SPA feature?

NPM Install Issue

Expected Behavior

npm install should setup node project

Actual Behavior

npm exits with errors

Reproduction Scenario

clone repository
checkout tutorial/react branch
cd into react-app directory
npm install

Platform and Version

macOS Big Sur 11.6
npm 8.1.1
node 17.0.1

Logs taken while reproducing problem

2021-10-26T18_38_26_457Z-debug.log

Comments

While it is quite the lengthy log, from what I could tell, the issue appears to stem from building the sass library. Not sure if this is an issue on my end or from the version specified. Thanks in advance.

Persistent Query no longer working - SDK aem-sdk-quickstart-2021.5.5309.20210515T190734Z-210429

Expected Behavior

Application should load a list of Adventures based on a persistent query.

Actual Behavior

Error: ServletError: Internal Servlet Failure

The issue seems that persistent queries are tied to a project specific endpoint...

Reproduce Scenario (including but not limited to)

1. Use latest AEM SDK
2. Install WKND 0.3.0 - https://github.com/adobe/aem-guides-wknd/releases/tag/aem-guides-wknd-0.3.0
3. Run the GraphQL app

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Issue while proxying the localhost:3000 to https://publish

I am using the React App and using the graphQl as suggested in https://github.com/adobe/aem-guides-wknd-graphql.git

Here is my .env file -

# For usage with Create React App, env variables needs to be prefixed with `REACT_APP_`

# Server namespace
REACT_APP_HOST_URI=https://publish.com
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/uni/endpoint.json
#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
REACT_APP_AUTH_METHOD=basic
# For Bearer auth, use DEV token (dev-token) from Cloud console
REACT_APP_DEV_TOKEN=abc123
# For Service toke auth, provide path to service token file (download file from Cloud console)
REACT_APP_SERVICE_TOKEN=auth/service-token.json
# For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance)
REACT_APP_AUTHORIZATION=svc_uni:svc_uni

while starting the app, I am getting the below proxy error. I have configured the Cross-Origin and Sling Referred configuration as suggested in the tutorial.

[HPM] Error occurred while proxying request localhost:3001/graphql/execute.json/uni/firstreq to https://publish.com/ [UNABLE_TO_VERIFY_LEAF_SIGNATURE] (https://nodejs.org/api/errors.html#errors_common_system_errors)

React graphQL app | Showing same call, infinite times

React graphQL app when connected to author, the network tab in developer tool, is showing same call, infinite times

Avoid use of global endpoint

Expected Behavior

The code samples should follow best practices and avoid use of the global endpoint for queries.

Instead of: /content/graphql/global/endpoint.json -> /content/cq:graphql/wknd/endpoint should be used.

Actual Behavior

Current samples were created prior to the creation of project specific endpoints and use the global endpoint.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

npm install errors with `@adobe/[email protected]' is not in the npm registry.`

Expected Behavior

Running npm install successfully installs necessary modules (node v14.x, npm v7.x)

This can be resolved by deleting the package-lock.json (which is committed to Git) and performing a clean npm install

It appears this was introduced via a transitive dependency on the aemcs-headless dependency.

@adobe/aemcs-api-client-lib is not release onto npmjs.org, and I believe Adobe's "module of choice" for exchanging credentials for access tokens is @adobe/jwt-auth. I was under the impression @adobe/aemcs-api-client-lib was more "sample code" if you want to see how the exchange happens under the covers.

Actual Behavior

When cloning and running on the latest commit from main, I receive:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@adobe%2faemcs-api-client-lib - Not found
npm ERR! 404
npm ERR! 404  '@adobe/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Steps to Reproduce

1. Clone repo
2. Switch the main branch
3. Perform hard reset if necessary
4. npm install

Platform and Version

Node v14.16.1
npm 7.10.0

Logs taken while reproducing problem

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@adobe%2faemcs-api-client-lib - Not found
npm ERR! 404
npm ERR! 404  '@adobe/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Getting Error: QueryValidationError: Persisted Query Validation Error

I am getting "Error: QueryValidationError: Persisted Query Validation Error" when accessing npm server.

Environment: AEM 6.5.10

Wknd site: aem-guides-wknd.all-1.1.0-classic.zip

Use latest version of AEM Headless Client SDK

https://github.com/adobe/aem-headless-client-js

AEM Headless Client for JavaScript published major version 2.0.0, with constructor param changes.
Use latest version in WKND example app

Remote SPA Error on NPM Start

Platform and Version

aem-sdk-2021.6.5382.20210602T190018Z-210527
aem-guides-wknd.all-1.0.0.zip
wknd-app.all-1.0.0-SNAPSHOT.zip
wknd-app.ui.content.sample-1.0.0.zip

NPM Start Error

[email protected] start
react-scripts start

Unexpected token '<<'

Additional Information

AEM instance works with React sample app.

Static Node Server Error

From
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/graphql/multi-step/production-deployment.html?lang=en#static-server

Expected Behavior

serve starts on port 5000, serves content from running localhost:4503

Actual Behavior

serve starts on port 3000, error loading page on localhost:3000
"Error: SyntaxError: Unexpected token < in JSON at position 0"

Steps to Reproduce

in VSCode aem-guides-wknd-graphql project, ./react-app:
npm install serve --save-dev
update package.json ("scripts") with
"serve": "npm run build && serve -s build"
In a browser, localhost:3000

tutorial/react not working with aem-guides-wknd 2.0.1-snapshot

Expected Behavior

To display the content based on the content fragments in aem-guides-wknd

Actual Behavior

No content is being displayed with an error
Error: SyntaxError: Unexpected end of JSON input

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Follow the instructions based on the GraphQL > Quick Setup > Local SDK with latest AEM SDK
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/graphql/quick-setup/local-sdk.html?lang=en

Platform and Version

MacOS 12.4
Oraclle Java version "11.0.15.1" 2022-04-22 LTS
Node.js v18.4.0
npm 8.13.1
Adobe Experience Manager 2022.6.7904.20220629T070041Z-220600 LocalSDK
aem-guides-wknd version 2.0.1-snapshot

Sample Code that illustrates the problem

 {
    adventureList {
      items {
        _path
        adventureTitle
        adventurePrice
        adventureTripLength
        adventurePrimaryImage {
          ... on ImageRef {
            _path
            mimeType
            width
            height
          }
        }
      }
    }
  }

http://localhost:3000/content/cq:graphql/wknd-shared/endpoint.json
The fieldlabels and endpoints have changed in 2.0.0 from 1.1.0 in aem-guides-wknd and has broken the headless app

Logs taken while reproducing problem

Not able to enable dynamic Adventure Detail routes to support editable components.

I am using the React App and using the graphQl as suggested in https://github.com/adobe/aem-guides-wknd-graphql.git

OS : Windows
AEM Version : 6.5
Documentation Link : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/remote-spa/spa-dynamic-routes.html?lang=en

I followed the above documentation for enabling dynamic routes, It is not working as expected.

After hitting the http://localhost:3000/adventure/bali-surf-camp , the behavior is not as expected.

Expected Behavior :

Actual Behavior :

Even the text Itinerary (AdventureDetail.js) is not appearing on the browser ( http://localhost:3000/adventure/bali-surf-camp)

Sample Code that illustrates the Problem
please search for wknd-shared in

https://github.com/adobe/aem-guides-wknd-graphql/blob/main/remote-spa-tutorial/react-app/src/components/AdventureDetail.js

usePersistedQueries.js optimization

Expected Behavior

graphql endpoint namespace should be defined in .env like REACT_APP_HOST_URI

Actual Behavior

graphql endpoint namespace is hardcoded multiple times within usePersistedQueries.js

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

please search for wknd-shared in
https://github.com/adobe/aem-guides-wknd-graphql/blob/main/react-app/src/api/usePersistedQueries.js

Logs taken while reproducing problem

Update Adventure CF Model to use new Enum data type

/mnt/overlay/dam/cfm/models/editor/content/editor.html/conf/wknd/settings/dam/cfm/models/adventure

the fields for adventureType, adventureActivity, adventureDifficulty were created with the old enum data type (v1). would be great to update the models to use the new V2 enum

Provide an example wknd tutorial with Nuxt/Vue

Feature Request

• Please provide a headless Example with Nuxt https://nuxt.com/ and/or Vue.js https://vuejs.org/

Expected Behavior

• It should work the same way as the already existing Next.js/React.js examples, just to give an idea for people developing frontends with Vue/Nuxt-based applications that need to integrate with AEM Headless.

Actual Behavior

• Currently there are tutorials for Next.js, React, Android, Webcomponents etc. but none for Nuxt/Vue.

Open points

• It's unclear if an integration with the provided libraries and AEM headless is feasible and possible with those technologies (Vue/Nuxt).

Node-sass error

Expected Behavior

React app should install on more recent versions of Node and NPM (16, 8)

Actual Behavior

A node-sass error appears when attempting to install on Node

npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/dgordon/Desktop/aem-guides-wknd-graphql/react-app/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/Cellar/node/16.11.1/bin/node" "/Users/dgordon/Desktop/aem-guides-wknd-graphql/react-app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/dgordon/Desktop/aem-guides-wknd-graphql/react-app/node_modules/node-sass

This appears to be an issue with node-sass library v4. However since the Create React App has a dependency, the node-sass library cannot be updgraded to v6.

Solution

Should switch to use https://www.npmjs.com/package/sass instead of node-sass

Next.js app example with their new app directory approach

Expected Behavior

Next.js example with the new app directory.
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

Actual Behavior

Currently there is an example with the pages directory, which is not the primary focus of Next.js anymore since they gradually move towards doing everything from the /app dir.

Issue / Questions

It would be great if you guys could setup an example with the correct headless package and with an app dir project. I think for now people will still be interested in both approaches, until the /pages approach is removed/not accepted anymore.

• Should the headless nodejs or the headless client npm package be used with server components?
  I currently work on a project using headless-client which I migrated to the app dir.

There is a good example provided from the team behind Strapi: https://github.com/strapi/nextjs-corporate-starter/tree/main
It would be great if something similar could be provided by you guys with the WKND tutorial. There are probably a couple of changes in how it should be built and retrieved from AEM for example for Server-Side-Rendering (as mentioned in my question above).

Use latest version of AEM Headless Client SDK

https://github.com/adobe/aem-headless-client-js

AEM Headless Client for JavaScript published major version 2.0.0, with constructor param changes.
Use latest version in WKND example app

Use separated Server/Browser versions of AEM Headless Client SDK

AEM Headless Client SDK is split into Browser and NodeJS version.

• Use NodeJS version for Webpack Dev Server: Proxy auth
• Use Browser version for React app.

No code adaptation needed, since API stayed the same, just 2 different packages are used for Server and Browser use cases.