DocumentationAEMAEM TutorialsAEM Headless Tutorial

Install GraphiQL IDE on AEM 6.5

Last update: Thu Jan 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Intermediate
  • Developer

In AEM 6.5 the GraphiQL IDE tool must be manually installed.

  1. Navigate to the Software Distribution Portal > AEM as a Cloud Service.

  2. Search for “GraphiQL” (be sure to include the i in GraphiQL).

  3. Download the latest GraphiQL Content Package v.x.x.x.

    Download GraphiQL Package

    The zip file is an AEM package that can be installed directly.

  4. From the AEM Start menu, navigate to Tools > Deployment > Packages.

  5. Click Upload Package and choose the package downloaded in the prior step. Click Install to install the package.

    Install GraphiQL Package

  6. Navigate to CRXDE Lite > Repository Panel > select /content/graphiql node (for example, http://localhost:4502/crx/de/index.jsp#/content/graphiql).

  7. In the Properties tab change value of endpoint property to /content/_cq_graphql/wknd-shared/endpoint.json.
    Endpoint Property Value Change

  8. Navigate to the Web Console Configuration UI > Search for CSRF Filter configuration (for example,http://localhost:4502/system/console/configMgr/com.adobe.granite.csrf.impl.CSRFFilter)

  9. In the Excluded Paths property name field update, the WKND GraphQL endpoint path to /content/cq:graphql/wknd-shared/endpoint.

Exclude Paths Property Value Change

  1. Access the GraphiQL editor using //HOST:PORT/content/graphiql.html, and verify you can construct a new query or execute an existing query. (e.g http://localhost:4502/content/graphiql.html)

GraphiQL Editor

TIP
To support your project-specific GraphQL schema and query execution, you have to make corresponding changes for the endpoint and Excluded Paths values in above steps.
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4