Custom Forms - Using GraphQL Query to Populate field

Integrator.io
1

Hi all,

Can anyone provide some guidance in regards to using graph_ql with fields on custom forms.

I’ve tried lots of different variations to this, and still cannot get the list to populate with any values.

This is my current iteration…

Any pointers would be great.

"shopifyMarket": {
      "id": "shopifyMarket",
      "name": "shopifyMarket",
      "type": "select",
      "label": "Shopify Market",
      "required": true,
      "options": [
        {
          "items": []
        }
      ],
      "resource": {
        "virtual": {
          "_connectionId": "68fe21adb2c1c834222f53a9",
          "asynchronous": true,
          "oneToMany": false,
          "http": {
            "method": "POST",
            "formType": "graph_ql",
            "isRest": false,
            "requestMediaType": "json",
            "successMediaType": "json",
            "errorMediaType": "json",
            "body": "{\"query\":\"query Markets { markets(first: 100, query: \\\"status:'ACTIVE'\\\") { edges { node { id name status } } } }\"}",
            "refreshOptionsOnChangesTo": []
          },
          "http_response": {
            "resourcePath": "data.markets.edges"
          },
          "transform": {
            "type": "expression",
            "expression": {
              "version": "2",
              "rulesTwoDotZero": {
                "mode": "create",
                "mappings": [
                  {
                    "generate": "value",
                    "dataType": "string",
                    "extract": "$.node.id"
                  },
                  {
                    "generate": "label",
                    "dataType": "string",
                    "extract": "$.node.name"
                  }
                ]
              }
            }
          }
        }
      }
    }
2

Hi @danielhalawi ,

In your code update the type from “type”:”select” to "type": "exportSelect" and remove
"options": [ { "items": [] } ], .

3

Hi Sree,

Thanks for this…

I have now updated the form build with:

{
  "fieldMap": {
    "shopifyMarket": {
      "id": "shopifyMarket",
      "name": "shopifyMarket",
      "type": "exportSelect",
      "label": "Shopify Market",
      "required": true,
      "resource": {
        "virtual": {
          "_connectionId": "68fe21adb2c1c834222f53a9",
          "asynchronous": true,
          "oneToMany": false,
          "http": {
            "method": "POST",
            "formType": "graph_ql",
            "isRest": false,
            "requestMediaType": "json",
            "successMediaType": "json",
            "errorMediaType": "json",
            "body": "{\"query\":\"query Markets { markets(first: 100, query: \\\"status:'ACTIVE'\\\") { edges { node { id name status} } } }\"}",
            "refreshOptionsOnChangesTo": []
          },
          "http_response": {
            "resourcePath": "data.markets.edges.node"
          },
          "transform": {
            "type": "expression",
            "expression": {
              "version": "2",
              "rulesTwoDotZero": {
                "mode": "create",
                "mappings": [
                  {
                    "generate": "value",
                    "dataType": "string",
                    "extract": "$.id",
                    "status": "Active"
                  },
                  {
                    "generate": "label",
                    "dataType": "string",
                    "extract": "$.name",
                    "status": "Active"
                  }
                ]
              }
            }
          }
        }
      }
    }
  }
}

The output from the GraphQL is

{
  "data": {
    "markets": {
      "edges": [
        {
          "node": {
            "id": "gid://shopify/Market/104332427646",
            "name": "Austria",
            "status": "ACTIVE"
          }
        },
        {
          "node": {
            "id": "gid://shopify/Market/105740960126",
            "name": "Spain",
            "status": "ACTIVE"
          }
        },
        {
          "node": {
            "id": "gid://shopify/Market/3697213601",
            "name": "United Kingdom",
            "status": "ACTIVE"
          }
        },
        {
          "node": {
            "id": "gid://shopify/Market/37837766817",
            "name": "USA",
            "status": "ACTIVE"
          }
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 11,
      "actualQueryCost": 3,
      "throttleStatus": {
        "maximumAvailable": 20000,
        "currentlyAvailable": 19997,
        "restoreRate": 1000
      }
    },
    "search": [
      {
        "path": [
          "markets"
        ],
        "query": "status:'ACTIVE'",
        "parsed": {
          "field": "status",
          "match_phrase": "ACTIVE"
        }
      }
    ]
  }
}

However, all I am getting on the form is “undefined” on the dropdown.

image
image669×190 6.28 KB

4

Update the transform extracts to be $.node.id and $.node.name.

5

Hi @tylerlamparter,

Thanks for sharing… this didn’t work either…

However I have been playing around with resource path, I’ve tried a whole ton of different combinations.

If I sent the resource

          "http_response": {
            "resourcePath": "data.markets.edges"
          },

and set the fields to just $.

I get the whole response:

{\"data\":{\"markets\":{\"edges\":[{\"node\":{\"id\":\"gid://shopify/Market/104332427646\",\"name\":\"Austria\",\"status\":\"ACTIVE\"}},{\"node\":{\"id\":\"gid://shopify/Market/105740960126\",\"name\":\"Spain\",\"status\":\"ACTIVE\"}},{\"node\":{\"id\":\"gid://shopify/Market/3697213601\",\"name\":\"United Kingdom\",\"status\":\"ACTIVE\"}},{\"node\":{\"id\":\"gid://shopify/Market/37837766817\",\"name\":\"USA\",\"status\":\"ACTIVE\"}}]}},\"extensions\":{\"cost\":{\"requestedQueryCost\":11,\"actualQueryCost\":3,\"throttleStatus\":{\"maximumAvailable\":20000,\"currentlyAvailable\":19997,\"restoreRate\":1000}}}}

image
image1726×391 78.6 KB

Any ideas?

6

@danielhalawi- Remove "http_response": { "resourcePath": "data.markets.edges"}, and add "response": { "resourcePath": "data.markets.edges" }within the http object
and extracts to be $.node.id and $.node.name

7

@sreevaniamara, thanks again for coming back to me.

With the configuration you suggested, still getting “undefined” in the dropdown.

image
image1823×469 67.8 KB

Here is the full fieldmap….

"shopifyMarket": {
      "id": "shopifyMarket",
      "name": "shopifyMarket",
      "type": "exportSelect",
      "label": "Shopify Market",
      "required": true,
      "resource": {
        "virtual": {
          "_connectionId": "68fe21adb2c1c834222f53a9",
          "asynchronous": true,
          "oneToMany": false,
          "http": {
            "method": "POST",
            "formType": "graph_ql",
            "isRest": false,
            "requestMediaType": "json",
            "successMediaType": "json",
            "errorMediaType": "json",
            "body": "{\"query\":\"query Markets { markets(first: 100, query: \\\"status:'ACTIVE'\\\") { edges { node { id name status} } } }\"}",
            "refreshOptionsOnChangesTo": []
          },
          "response": {
            "resourcePath": "data.markets.edges"
          },
          "transform": {
            "type": "expression",
            "expression": {
              "version": "2",
              "rulesTwoDotZero": {
                "mode": "create",
                "mappings": [
                  {
                    "generate": "value",
                    "dataType": "string",
                    "extract": "$.node.id",
                    "status": "Active"
                  },
                  {
                    "generate": "label",
                    "dataType": "string",
                    "extract": "$.node.name",
                    "status": "Active"
                  }
                ]
              }
            }
          }
        }
      }
    }

If I remove the $.node.id and the $,node.name and leave as $. The dropdown is showing the response as previously advised.

image
image1814×333 79.3 KB

Your help is very much appreciated.

8

Hi @danielhalawi ,
I made some edits to your field map. Can you please try this?

"shopifyMarket": {
      "id": "shopifyMarket",
      "name": "shopifyMarket",
      "type": "exportSelect",
      "label": "Shopify Market",
      "required": true,
      "resource": {
        "virtual": {
          "_connectionId": "68fe21adb2c1c834222f53a9",
           "adaptorType": "HTTPExport",
          "asynchronous": true,
          "oneToMany": false,
          "http": {
            "method": "POST",
            "formType": "graph_ql",
            "isRest": false,
            "requestMediaType": "json",
            "successMediaType": "json",
            "errorMediaType": "json",
            "body": "{\"query\":\"query Markets { markets(first: 100, query: \\\"status:'ACTIVE'\\\") { edges { node { id name status} } } }\"}",
            "response": {
                  "resourcePath": "data.markets.edges"
                }
          },
          "transform": {
            "type": "expression",
            "expression": {
              "version": "2",
              "rulesTwoDotZero": {
                "mode": "create",
                "mappings": [
                  {
                    "generate": "value",
                    "dataType": "string",
                    "extract": "$.node.id",
                    "status": "Active"
                  },
                  {
                    "generate": "label",
                    "dataType": "string",
                    "extract": "$.node.name",
                    "status": "Active"
                  }
                ]
              }
            }
          }
        }
      }
    }
9

What @sreevaniamara gave works and this works:

{
  "fieldMap": {
    "shopifyMarket": {
      "id": "shopifyMarket",
      "name": "shopifyMarket",
      "type": "exportSelect",
      "label": "Shopify Market",
      "required": true,
      "resource": {
        "virtual": {
          "_connectionId": "6900ece9266ea68c9a41f968",
          "http": {
            "method": "POST",
            "body": "{\"query\":\"query Markets { markets(first: 100, query: \\\"status:'ACTIVE'\\\") { edges { node { id name status} } } }\"}",
            "response": {
              "resourcePath": "data.markets.edges"
            }
          },
          "transform": {
            "type": "expression",
            "expression": {
              "rules": [
                []
              ],
              "version": "2",
              "rulesTwoDotZero": {
                "mappings": [
                  {
                    "generate": "value",
                    "dataType": "string",
                    "extract": "$.node.id",
                    "status": "Active",
                    "sourceDataType": "string"
                  },
                  {
                    "generate": "label",
                    "dataType": "string",
                    "extract": "$.node.name",
                    "status": "Active",
                    "sourceDataType": "string"
                  }
                ],
                "mode": "create"
              }
            },
            "rules": [
              []
            ],
            "version": "2"
          },
          "adaptorType": "HTTPExport"
        }
      }
    }
  }
}

image
image2560×1277 230 KB

10

@sreevaniamara, @tylerlamparter,

Thank you both, Tyler’s version is working now.

Thanks, for all the help.