How to create persist url graphql with variable array of object

[VinceLu]

Hello i have query variable like this

 {
"tagFilter": [
{
"value": "ctf:ring"
}
]
}

and i want to copy url /graphql/execute.json/testingtemplate/collections;tagFilter=[{value: ctf:ring}]

and this encode
graphql/execute.json/testingtemplate/collections%3BtagFilter=[%7Bvalue:%20ctf:ring%7D]

and i get error this. how to create url if variable array of object?

[Ravi_Pampana]

Hi,

You need to encode entire query parameters ensuring special characters are encoded correctly, like below

const query = {
  tagFilter: [
    {
      value: "ctf:ring"
    }
  ]
};

const encodedQuery = encodeURIComponent(JSON.stringify(query));
const url = `/graphql/execute.json/testingtemplate/collections;tagFilter=${encodedQuery}`;

console.log(url);
// Output: /graphql/execute.json/testingtemplate/collections;tagFilter=%5B%7B%22value%22%3A%22ctf%3Aring%22%7D%5D

[VinceLu]

yes but it's still error.

i have try url like this but cannot /graphql/execute.json/testingtemplate/collections;tagFilter=%5B%7B%22value%22%3A%22ctf%3Aring%22%7D%5D

[h_kataria]

Please check this https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/graphql... 
Something like this might work.

/graphql/execute.json/testingtemplate/collections%3BtagFilter%3D[%7B"value":"ctf:ring"%7D]

[VinceLu]

This is not work too. i'm confused

const query = {

tagname: [

{

"value": "collection:ring/bracelet"

},

{

"value": "collection:ring/earing"

}

]

};

const encodedQuery = encodeURIComponent(JSON.stringify(query));

const url = `https://author-p127357-e1416697.adobeaemcloud.com/graphql/execute.json/CTF-MOBILE/ProductList;tagnam...${encodedQuery}`;

console.log(url);
https://author-p127357-e1416697.adobeaemcloud.com/graphql/execute.json/CTF-MOBILE/ProductList;tagnam...

this new my link url and not work 

[h_kataria]

Hi @VinceLu 
I checked the implementation of StringArrayFilterExpression and tried some samples.

Could you please try this :

/graphql/execute.json/testingtemplate/collections%3BtagFilter=%7B"values":["collection:ring/bracelet","collection:ring/earing"]%7D

For passing a single value, it will have to be passed as value instead of values

/graphql/execute.json/testingtemplate/collections%3BtagFilter=%7B"value":"collection:ring/earing"%7D

I believe this should work and hope this helps. 

[VinceLu]

Hii thanks for help me.

/graphql/execute.json/CTF-MOBILE/ProductList%tagname=%7B"values":["collection:ring/ring"]%7D

this is work for single value , but for multiple i'm still confused. i have no item if have 2 value

/graphql/execute.json/CTF-MOBILE/ProductList%tagname=%7B"values":["collection:ring/ring", "collection:ring/earing"]%7D

i don't know why if i put 2 items i can't get the item. just return empty

in the playground i can get item

can you help me for multiple value?

[h_kataria]

Solution was provided over DM, posting the same here for others 

There seems to be some issue when trying to query for either one of the tags using StringArrayFilterExpression. I suggested making a small change in original query. So, Instead of using StringArrayFilterExpression, you can use StringArrayFilter

query ProductList($tagname:StringArrayFilter){
  mainProductList(filter: {_tags: $tagname}) {
    items {
      .....
    }
  }
}

Then essentially you can pass multiple values like this 

/graphql/execute.json/CTF-MOBILE/ProductList%3Btagname=%7B"_logOp":"OR","_expressions":[%7B"value":"collection:ring/ring"%7D,%7B"value":"collection:ring/earing"%7D]%7D

 Hope this helps people who land on this thread.

[12nalk123]

Thank you for this solution. It works but the only issue with it is, that you can't really use multiple parameter because it will bloat the URL length. A URL with only one parameter is in our case already 300 characters long, now if we want to add this functionality to 6 more we have reached already the limit of 2000 characters for a URL.

A solution like this

query getArrayTest(
  $param1Values: [String],
) {
    testList(
        filter: {
            param1: {_expressions: [{values: $param1Values, _operator: CONTAINS}]},
          }
    ) {
...

would be way more lightweight and also more in the sense of persisted queries where the outside doesn't need to know much about the GraphQL schema.

[VinceLu]

not work.

and i have encode too but not working for array

const query = {

tagname: [

{

"value": "collection:ring/bracelet"

},

{

"value": "collection:ring/earing"

}

]

};

const encodedQuery = encodeURIComponent(JSON.stringify(query));

const url = `https://author-p127357-e1416697.adobeaemcloud.com/graphql/execute.json/CTF-MOBILE/ProductList;tagnam...${encodedQuery}`;

console.log(url);

[VinceLu]

i found thread sama issue with me. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/graphql-variable-type-mism.... and still not found the solutions. anyone please helpme

[kautuk_sahni]

@VinceLu 

Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[VinceLu]

Still not found solution

[12nalk123]

Anyone found a solution here? We would also need this feature to work with persisted queries.

Our example:

query getArrayTest(
  $param1Values: [String],
) {
    testList(
        filter: {
            param1: {_expressions: [{values: $param1Values, _operator: CONTAINS}]},
          }
    ) {
...

Works in GraphiQL with parameters like this and returns the correct result:

{
  "param1Values": ["foo","bar"]
}

This would be then the query string: /graphql/execute.json/test/array-test;param1Values=["foo","bar"];

Tried the encoding like it's described in the documentation here https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/graphql... and also how it's done in the javascript headless client https://github.com/adobe/aem-headless-client-js/blob/main/src/index.js#L104

After encoding it looks like this:

• /graphql/execute.json/test/array-test%3Bparam1Values%3D%5B%22foo%22%2C%22bar%22%5D%3B

-> But that does not work! (tested on author, no dispatcher in between) Empty result every time but with the same parameters in GraphiQL it works.