;; GraphQL: hyperscript integration — fetch gql command
(defcomp
  ()
  (~docs/page
    :title "GraphQL · fetch gql"
    (p
      (~tw :tokens "text-lg text-gray-600 mb-2")
      "The "
      (code "fetch gql")
      " hyperscript command embeds GraphQL queries directly in attribute syntax. "
      "The hyperscript parser collects the GraphQL body between "
      (code "{")
      " and "
      (code "}")
      " and the compiler emits a "
      (code "hs-fetch-gql")
      " call.")
    (p
      (~tw :tokens "text-gray-500 mb-6")
      "Compilation happens server-side at page boot; the runtime dispatch "
      "hits the same "
      (code "/api.execute-demo")
      " endpoint these pages use.")
    (~docs/section
      :title "Shorthand query"
      :id "shorthand"
      (~docs/code
        :src "<button _=\"on click\n  fetch gql { users { name role } }\n  put result.data.users into #fetch-out\">\n  Fetch users\n</button>"))
    (~docs/section
      :title "Named operation"
      :id "named"
      (~docs/code
        :src "<input _=\"on input\n  fetch gql query Search($q: String!) { posts(authorId: 1) { title } } with vars\n  put result.data.posts into #search-out\">"))
    (~docs/section
      :title "Mutation"
      :id "mutation"
      (~docs/code
        :src "<form _=\"on submit\n  fetch gql mutation { createPost(title: 'Hi', body: 'body', authorId: 1) { id } }\n  put it into #create-out\">"))
    (~docs/section
      :title "Custom endpoint"
      :id "from"
      (p
        (~tw :tokens "text-gray-600 mb-3")
        "Override the default "
        (code "/graphql")
        " path per-call with "
        (code "from"))
      (~docs/code
        :src "<button _=\"on click\n  fetch gql { users { name } } from '/sx/(applications.(graphql.(api.execute-demo)))'\n  put result into #users-out\">"))
    (~docs/section
      :title "Compilation pipeline"
      :id "pipeline"
      (~docs/note
        (p
          (strong "Same bytecode path. ")
          "The hyperscript tokenizer, parser, compiler, and bytecode runtime "
          "all live in "
          (code "lib/hyperscript/")
          ". The GraphQL parser and executor "
          "live in "
          (code "lib/graphql.sx")
          " and "
          (code "lib/graphql-exec.sx")
          ". Every piece compiles to the same kernel.")))))
