AEM graphql enpoint call by UI app with query payload

[AEM_LEADI6]

Hi Team,

My UI app team wants to pass complete grapql query with endpoint shared by AEM team as headless cf models.so that Ui app team can reduce or modify content based on query passed in POST

can passing query as payload or url param is recommended?

[SantoshSai]

Hi @AEM_LEADI6,

It is recommended and supported to call the GraphQL endpoint using a POST request with the query passed in the request body (payload). This is the best practice, especially when working with dynamic or complex queries in client applications like your UI app.

POST request with query in payload

This approach allows flexibility and aligns with how AEM's GraphQL APIs are designed.

Example:

Endpoint (AEM Publish):

https://your-aem-domain/graphql/endpoint-name

HTTP POST body:

{
  "query": "query { articleList { items { title description } } }"
}

Headers:

Content-Type: application/json

Not Recommended: Query in URL parameters (GET)

• GraphQL GET requests with query strings are supported, but not recommended for:

  • Long or dynamic queries (may hit URL length limits).

  • Sensitive or authenticated requests.

  • Better caching strategies that POST enables with edge/CDN.

Hope that helps!

[AEM_LEADI6]

Thanks @SantoshSai  for your response with example .

I tried this but not it is showing internal servler error 500 .

I passed the query in postman body with json and form data both in the below format - 

{

  "query": "query { test41List{ items { id } } }"

}

[AmitVishwakarma]

Hi @AEM_LEADI6 ,

Try below steps:

1. Endpoint URL

Make sure you’re calling the Publish endpoint, not Author (unless you are authenticated for Author):

https://<your-aem-domain>/graphql/<endpoint-name>

For example:

https://publish.yoursite.com/graphql/test41

2. Headers in Postman
Key  : Value
Content-Type : application/json
Accept : application/json

3. Body => Raw => JSON

Make sure you set it to raw and JSON (not form-data or x-www-form-urlencoded).

Paste this:

{
  "query": "query { test41List { items { id } } }"
}

Common Reasons for 500 Internal Server Error
  - Wrong endpoint path (/graphql/test41 is different from /content/graphql/test41)
  - Model not published or CF not available on Publish.
  - Permissions missing for anonymous or calling user.
  - Content Fragment model not enabled for GraphQL.
  - Incorrect Accept header or malformed JSON.
  - Trying to call Author instance without login/session token.

You can test your query at:

http://localhost:4502/graphql/playground

or

https://author.yourdomain.com/graphql/playground

Paste the query there:

query {
  test41List {
    items {
      id
    }
  }
}

If it works there, but not in Postman, the issue is likely:

  - Environment mismatch (Author vs Publish)

  - Authentication

  - Permissions

[AEM_LEADI6]

Dear @AmitVishwakarma 

Thanks for the response

actually this endpoint works in browser even in postman also when not passing any payload or query in data from postman or JS

but when we are passing query in request as payload then it is having an issue with poatman error server erroe 500  - 

sending accept header and content type

I am using RDE rapid to test this

Cannot invoke \"javax.json.JsonObject.entrySet()\" because \"variables\" is null"

[AmitVishwakarma]

HI @AEM_LEADI6 ,

It seems like the AEM GraphQL servlet is expecting a "variables" key in your JSON payload, even if you're not passing any variables.

Include an empty variables object in your request payload like this:

{
  "query": "query { test41List { items { id } } }",
  "variables": {}
}

[AEM_LEADI6]

Hi @AmitVishwakarma 

Thanks connection issue is resolved in postman it is showing response.

Really appreciate for this help.

one more issue i have  - after passing the above query the response,it  should not return all the fields in response as in payload query,  we passed only id fields but i am getting all fields data in response. I am using persistent query with endpoint format - aemcloud.com/graphql/execute.json/

any thing needs to be changed so that response can come based on query payload passed in request? 

[AmitVishwakarma · Accepted solution]

Hi @AEM_LEADI6 ,

You're using Persistent Queries (via /graphql/execute.json/...), which are precompiled on AEM, and do not consider the request payload’s query.

Instead, AEM only executes the query as stored in the persisted query file. So even if you pass a different query in the POST body, it won’t be used.

To make the response match your dynamic query payload, you must use the standard GraphQL endpoint, not the persistent one.

Option 1: Use Standard GraphQL Endpoint (Supports Custom Queries)

Use:

https://<your-domain>.aemcloud.com/graphql/<endpoint-name>

With POST body:

{
  "query": "query { test41List { items { id } } }",
  "variables": {}
}

This way, only id field will be returned — exactly what you define in the query.

Option 2: Persistent Queries Don’t Support Custom Fields

If you're using:

https://<your-domain>.aemcloud.com/graphql/execute.json/<query-name>

Then AEM ignores any payload it runs only the query as defined and saved in /conf/.../graphql/queries/<query-name>.gql.

To limit fields there, you need to edit that .gql file and save only the fields you want, like:

query {
  test41List {
    items {
      id
    }
  }
}

Then re-deploy or sync this to your AEM environment.

Regards,
Amit

[AEM_LEADI6]

Thanks amit

[PRATHYUSHA_VP]

Hi @AEM_LEADI6 

IMO, instead of calling graphQL endpoint directly from UI side there is an another option which UI team can try -- 

AEM Headless Client Implementation in Front-end application :

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

(Supported in React, Next,js, Node.js based projects)

Thanks

[AEM_LEADI6]

Is this same as passing params in url but queries are saved in aem only?