demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Alpine Query Demo</title>
    <script defer src="./dist/index.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
  </head>
  <body
    x-data="{
      wretch: $wretch()
    }"
    x-query-client="{}"
  >
    <div x-data="{url: 'https://api.github.com/repos/tannerlinsley/react-query'}" x-query:query="$get(url)">
      <div x-show="query.isLoading">Loading...</div>
      <div x-show="query.error">An error has occurred: <span x-text="query.error?.message"></span></div>
        <div x-show="query.data" x-data="{
          get data() {
            return this.query.data == null ? {} : this.query.data;
          }
        }">
          <h1 x-text="data.name"></h1>
          <p x-text="data.description"></p>
          <strong>👀 <span x-text="data.subscribers_count"></span></strong>
          <strong>✨ <span x-text="data.stargazers_count"></span></strong>
          <strong>🍴 <span x-text="data.forks_count"></span></strong>
          <div x-show="query.isFetching">Updating...</div>
          <ReactQueryDevtools initialIsOpen />
        </div>
    </div>
  </body>
</html> 