A GraphQL Query

GraphQL lets a page ask a server for exactly the data it needs in a single request. @marko/urql wraps the URQL GraphQL client as Marko tags — <gql-client> to point at an endpoint, and <gql-query> to run a query and render the result.

One thing up front: @marko/urql is a Marko 5 library, written in the Class API, so this lesson runs on a Marko 5 server (@marko/express) and the syntax looks a little different from the rest of the tutorial — static const, gql tagged templates, <@then> attribute tags. The GraphQL ideas carry straight over.

Everything around your page is already wired: an Express server with a /graphql endpoint whose resolvers read from a real SQLite database of books. The client is pointed at it for you:

<gql-client url=input.graphqlUrl/>

Query the books (your job)

In src/index.marko, first define the query — a static const so it’s built once, not on every render:

import { gql } from "@marko/urql";

static const BOOKS = gql`
  query {
    books {
      title
      author
    }
  }
`;

Then, below <gql-client>, run it with <gql-query>. The <@then> block receives the result ({ data, fetching }); <@placeholder> shows while the request is in flight:

<gql-query query=BOOKS>
  <@then|{ data }|>
    <ul>
      <for|book| of=data.books>
        <li>${book.title} — ${book.author}</li>
      </for>
    </ul>
  </@then>
  <@placeholder>
    <p>Loading books…</p>
  </@placeholder>
</gql-query>

Save, and the list fills with books — asked for over GraphQL, resolved from SQLite, rendered on the server.

That’s a GraphQL-backed page: one <gql-client>, one <gql-query>, and your data — from a SQLite-backed GraphQL API — rendered server-side.