<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        GraphiQL
    </h1>
    <hr>
    <div style="padding: var(--size-4);">
        <pre id="example" class="graphiql celestial-blue" data-name="Get Category Tree" data-endpoint="http://localhost:31415/graphql">query GetCategoryTree {
  instances {
    entities(id: "ff0ac91d-3534-4987-8d5f-7488972cbbc8") {
      ...Category
      ...CategoryTree
    }
  }
}

fragment Category on EntityInstance {
  type {
    name
  }
  id
  properties(names: [ "name", "description" ]) {
    name
    value
  }
}

fragment CategoryTree on EntityInstance {
  outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
    inbound {
      ...Category
      outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
        inbound {
          ...Category
          outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
            inbound {
              ...Category
              outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
                inbound {
                  ...Category
                  outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
                    inbound {
                      ...Category
                      outbound(type: { namespace: "taxonomy" name: "has_subcategory" }) {
                        inbound {
                          ...Category
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</pre>
    </div>
</div>