Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

GraphQL Sample Configuration cannot be installed.

Avatar

Level 2

Hello everyone!

 

Any idea why GraphQL Sample Configuration cannot be installed on the author instance for PWA extensions? it says that the "jcr_root" file is missing. I was following the official docs and downloaded it from the site it suggested and was trying to install it on the author instance packages page that was referred from the docs.

 

Screenshot 2023-02-17 at 17.15.36.png

9 Replies

Avatar

Community Advisor

Hi @olegarg ,

 

this is because it is not a JCR content package.
you are supposed to install this through maven commands.

Read this for more info.

# GraphQL Sample 
This repository enables an AEM instance to be GraphQL ready.

## Project Structure
The project has following sub-projects.

### all
A resulting content package which includes all built artifacts.

### config
The config sub-project contains OSGi configurations for:
- [SlingSchemaServlet](config/src/main/content/jcr_root/apps/graphql-sample/config/com.adobe.aem.graphql.sites.adapters.SlingSchemaServlet-graphql.xml)
- [GraphQLServlet](config/src/main/content/jcr_root/apps/graphql-sample/config/org.apache.sling.graphql.core.GraphQLServlet-graphql.xml)
- [CSRF configuration](config/src/main/content/jcr_root/apps/graphql-sample/config/com.adobe.granite.csrf.impl.CSRFFilter.cfg.json) for the GraphQL endpoint
  - `/content/cq:graphql/global/endpoint`

### content
The content package which includes a global GraphQL endpoint `/content/cq:graphql/global/endpoint` 

### repository-structure
Helper package to serve immutable content (config)

### dispatcher
The dispatcher sub-project contains some additional configurations, in particular:
- [aem-headless.vhost](dispatcher/src/conf.d/available_vhosts/aem-headless.vhost)
- [rewrite.rules](dispatcher/src/conf.d/rewrites/rewrite.rules)
- [aem-headless.farm](dispatcher/src/conf.dispatcher.d/available_farms/aem-headless.farm)
- [filters.any](dispatcher/src/conf.dispatcher.d/filters/filters.any)
- [rules.any](dispatcher/src/conf.dispatcher.d/cache/rules.any)
- [clientheaders.any](dispatcher/src/conf.dispatcher.d/clientheaders/clientheaders.any)

## How to build/deploy for local AEM instance

#### Before you start

1. When using SDK Quickstart from [AEM as a Cloud Service downloads](https://experience.adobe.com/#/downloads/content/software-distribution/en/aemcloud.html) use
    `AEM SDK v2021.1.4830.20210128T075814Z-210128` 
or more recent version.
   
2. Please reboot your SDK Quickstart instance once you installed it before installing this package.


To build all the modules run in the project root directory the following command with Maven 3:

    mvn clean install

If you have a running AEM instance you can build and package the whole project and deploy into AEM with:

    mvn clean install -PautoInstallPackage

Depending on your maven configuration, you may find it helpful to force the resolution of the Adobe public repo with:

    mvn clean install -PautoInstallPackage -Padobe-public

Or to deploy it to a publish instance, run:

    mvn clean install -PautoInstallPackagePublish

Or alternatively:

    mvn clean install -PautoInstallPackage -Daem.port=4503

## How to deploy on a AEM Skyline instance
Use or integrate the sub-projects in git repository of your AEM Skyline program, and deploy through the program pipeline execution.

## Endpoint
The AEM Headless endpoints exposed by this project :
- Physical endpoint: `http(s):/host:port/content/_cq_graphql/global/endpoint.json`
- Vanity URL: `http(s):/host:port/content/graphql/global/endpoint.json`
    - Note that the vanity URL does not include the JCR namespace.

 only "GraphiQL" content packages can be installed through package manager.

Thank you.

-Sravan 

Avatar

Level 2

Hello @B_Sravan. Thank you very much for the content provided. I explored it and tried to implement it for the GQL installation in the PWA Venia studio (react) for extensions (blog, etc). Unfortunately, I was not able to achieve any positive results. 

 

So if we follow the official docs below:

 

https://github.com/adobe/aem-pwa-studio-extensions/tree/master/aem-cif-product-page-extension/aem

Setting up the project

  1. Start an author and publish instance of AEMaaCS SDK. Make sure the local replication configuration works properly (via http://localhost:4502/etc/replication/agents.author.html). The author part is only required, if you want to change any of the CFM data or models.

  2. Download the GraphQL Sample Configuration package from Software Distribution, build it and install the all package on both instances.

  3. In the config project, update the following configurations to include the hostname of the PWA Studio app. This hostname is generated during step 2 of the PWA Studio setup.

    • src/main/content/jcr_root/apps/cif-extension/config/com.adobe.granite.cors.impl.CORSPolicyImpl~pwa.cfg.json

      Update the allowedorigin property to the full hostname of your local PWA installation.

      Example: https://pwa-studio-test-vflyn.local.pwadev:9366

    • src/main/content/jcr_root/apps/cif-extension/config/org.apache.sling.security.impl.ReferrerFilter.cfg.json

      Update the allow.hosts property to the hostname of your local PWA installation.

      Example: pwa-studio-test-vflyn.local.pwadev.

  4. Build and install  the packages using mvn clean install -PautoInstallSinglePackage for the author instance and mvn clean install -PautoInstallSinglePackagePublish for the publish instance

From the list, I did stage 1. Stage 2 was completed partially as I only was able to download  GraphQl Sample Configuration. As you mentioned the last one is supposed to be installed through the MVN. Stage 3 was completed ok in the extensions folder.  Stage 4 I did not complete as it is not clear where the install supposed to happen. I tried to install the last in the root of the PWA studio but got an error that points to the missing file POM.xml and other missing info related to maven as I understand. I got an extension installed in VS code Maven for Java but it seems like it does not help in this case as PWA studio is not a maven project. From the official docs, we can see how to generate react app as a maven project. I got maven installed globally, latest v.  So, I am lost at the moment on how I can implement stage 2 and stage 4 from the list above. Thanks.

 

 

 

 

 

 

Avatar

Community Advisor

Hi, you can try using postman to upload the package. Import the JSON to your postman collection and then go to 'body' tab, attach the package and hit send.
Postman Collection 

Avatar

Level 2

Hi, @bilal_ahmad Thank you for your reply. I did not get what kind of JSON  I should import. I got a GraphQL package that needs to be installed for author and publish instances. It should be done through MVN as docs say and through the project root. I cannot find yet how I can do it for  PWA studio as it is not an MVN-type project. Somehow it is possible as on the official video they show how they do changes to PWA studio content through AEM but they DO NOT show how they connect PWA studio to AEM and do deploy changes.

 

Screenshot 2023-02-20 at 12.12.48.png

Avatar

Level 2

I found out the right step for stage 2. After we download the "GraphQL Sample Configuration" file, we need to unpack it and inside of it run :

mvn clean install

It will create a "target" folder inside the "all" folder. Inside the "target" folder we need to use "graphql-sample.all-0.0.1-SNAPSHOT.zip" to upload it, build and install it on the author and publish instances. 

 

Screenshot 2023-02-21 at 18.20.39.png

Avatar

Community Advisor

Hi! I had attached my postman collection for you. Anyway, now that you have figured out how to build and deploy the project(getting into the target folder and manually uploading the .zip into your AEM server), let me know if that worked out.

 

- Bilal

Avatar

Level 2

Hi @bilal_ahmad Thanks for the attachment but when I try to open It, I  see an error in JSON. Do not worry, I have already installed GQL package on instances and did the same for PWA  AEM extensions for product and category pages. The last ones require a similar installation in the extensions /aem folder with 

mvn clean install

and after,  using zip file from config/target folder and content/target folder, build and install them(zip files) on both instances. 

Avatar

Community Advisor

Great to hear that! did it work for you?

-Bilal