sunmao-ui/examples/fetch-list/lazy.json

{
  "app": {
    "version": "example/v1",
    "metadata": {
      "name": "fetch-list",
      "description": "fetch trait example"
    },
    "spec": {
      "components": [
        {
          "id": "fetch_btn",
          "type": "chakra_ui/v1/button",
          "properties": {
            "text": {
              "raw": "Click to Fetch!",
              "format": "md"
            }
          },
          "traits": [
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "fetch_list",
                    "method": {
                      "name": "triggerFetch",
                      "parameters": "query"
                    },
                    "wait": {},
                    "disabled": false
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "fetch_list",
          "type": "core/v1/text",
          "properties": {
            "value": {
              "raw": "{{fetch_list.fetch.loading? \"Fetching\": fetch_list.fetch.data? JSON.stringify(fetch_list.fetch.data): fetch_list.fetch.error? fetch_list.fetch.error.message: \"No data\"}}",
              "format": "md"
            }
          },
          "traits": [
            {
              "type": "core/v1/state",
              "properties": {
                "key": "token",
                "initialValue": "01f0f6265bmsh0efd88b5c7dfa93p136d2ajsn8be6074b61b2"
              }
            },
            {
              "type": "core/v1/fetch",
              "properties": {
                "name": "query",
                "url": "https://61373521eac1410017c18209.mockapi.io/Volume",
                "method": "get",
                "lazy": true
              }
            }
          ]
        },
        {
          "id": "debug_text",
          "type": "core/v1/text",
          "properties": {
            "value": {
              "raw": "{{ fetch.data }}",
              "format": "md"
            }
          },
          "traits": []
        }
      ]
    }
  }
}