;; GraphQL: query — three live queries against /api.execute-demo
(defcomp
  ()
  (~docs/page
    :title "GraphQL · Queries"
    (p
      (~tw :tokens "text-lg text-gray-600 mb-6")
      "Three live queries. Each button posts a canned query to "
      (code "/api.execute-demo")
      " and drops the raw SX result into the output below.")
    (~docs/section
      :title "Single record"
      :id "single"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Fetch one user by id. The executor projects the seed row to just the selected fields.")
      (~docs/code :src "{\n  user(id: 1) {\n    name\n    role\n  }\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#q-single-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "{ user(id: 1) { name role } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "q-single-out"
        (~tw :tokens "mt-4")
        (span (~tw :tokens "text-gray-400 text-sm") "Click Run to execute.")))
    (~docs/section
      :title "List"
      :id "list"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Fetch all posts. The resolver returns a list of dicts; "
        "the executor maps projection over each element.")
      (~docs/code :src "{\n  posts {\n    id\n    title\n    authorId\n  }\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#q-list-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "{ posts { id title authorId } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "q-list-out"
        (~tw :tokens "mt-4")
        (span (~tw :tokens "text-gray-400 text-sm") "Click Run to execute.")))
    (~docs/section
      :title "Filtered list"
      :id "filter"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Arguments reach the resolver via the "
        (code "args")
        " dict. "
        "Here, "
        (code "authorId: 1")
        " narrows to posts by Alice.")
      (~docs/code :src "{\n  posts(authorId: 1) {\n    title\n    body\n  }\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#q-filter-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "{ posts(authorId: 1) { title body } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "q-filter-out"
        (~tw :tokens "mt-4")
        (span (~tw :tokens "text-gray-400 text-sm") "Click Run to execute.")))
    (~docs/section
      :title "Multiple root fields"
      :id "multi"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "A single query can dispatch many root fields. "
        "The executor resolves each independently and merges the results.")
      (~docs/code :src "{\n  users { name }\n  posts { title }\n}")
      (form
        :hx-post "/sx/(applications.(graphql.(api.execute-demo)))"
        :hx-target "#q-multi-out"
        :hx-swap "innerHTML"
        (input
          :type "hidden"
          :name "query"
          :value "{ users { name } posts { title } }")
        (button
          :type "submit"
          (~tw
            :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700")
          "Run"))
      (div
        :id "q-multi-out"
        (~tw :tokens "mt-4")
        (span (~tw :tokens "text-gray-400 text-sm") "Click Run to execute.")))))
