// @check
import { defineComponent } from '@pyreon/core'
import { mount } from '@pyreon/runtime-dom'
import { QueryClient, QueryClientProvider } from '@pyreon/query'

declare function MyApp(): JSX.Element

const queryClient = new QueryClient()

const App = defineComponent(() => {
  return () => (
    <QueryClientProvider client={queryClient}>
      <MyApp />
    </QueryClientProvider>
  )
})

mount(<App />, document.getElementById('app')!)

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      gcTime: 10 * 60 * 1000, // 10 minutes (garbage collection)
      retry: 3, // retry failed queries 3 times
      retryDelay: (
        attempt, // exponential backoff
      ) => Math.min(1000 * 2 ** attempt, 30000),
      refetchOnWindowFocus: true, // refetch when tab regains focus
      refetchOnReconnect: true, // refetch when network reconnects
      refetchOnMount: true, // refetch when component mounts
    },
    mutations: {
      retry: 0, // don't retry mutations by default
    },
  },
})

import { useQueryClient } from '@pyreon/query'

function MyComponent() {
  const client = useQueryClient()

  // Use client for imperative operations:
  client.invalidateQueries({ queryKey: ['posts'] })
  client.prefetchQuery({ queryKey: ['user', 1], queryFn: fetchUser })
  client.setQueryData(['user', 1], updatedUser)
  client.getQueryData(['user', 1])
  client.removeQueries({ queryKey: ['stale-data'] })

  // ...
}

import { useQuery } from '@pyreon/query'
import { signal } from '@pyreon/reactivity'

const userId = signal(1)

const query = useQuery(() => ({
  queryKey: ['user', userId()],
  queryFn: () => fetch(`/api/users/${userId()}`).then((r) => r.json()),
}))

const query = useQuery(() => ({
  // Required
  queryKey: ['user', userId()], // Unique cache key (array)
  queryFn: (
    { signal }, // Fetcher function
  ) => fetch(`/api/users/${userId()}`, { signal }).then((r) => r.json()),

  // Timing
  staleTime: 5 * 60 * 1000, // Data considered fresh for 5 minutes
  gcTime: 10 * 60 * 1000, // Keep unused data in cache for 10 minutes
  refetchInterval: 30_000, // Poll every 30 seconds
  refetchIntervalInBackground: false, // Stop polling when tab is hidden

  // Behavior
  enabled: true, // Set to false to disable auto-fetching
  retry: 3, // Number of retries on failure
  retryDelay: (
    attempt, // Custom retry delay
  ) => Math.min(1000 * 2 ** attempt, 30000),
  refetchOnWindowFocus: true, // Refetch when tab regains focus
  refetchOnReconnect: true, // Refetch when network reconnects
  refetchOnMount: true, // Refetch when component mounts

  // Data transformation
  select: (data) => data.user, // Transform/select from cached data

  // Placeholder
  placeholderData: previousData, // Show while fetching
  initialData: cachedUser, // Seed the cache immediately
  initialDataUpdatedAt: Date.now(), // When initialData was last fetched
}))

const UserProfile = defineComponent(() => {
  const query = useQuery(() => ({
    queryKey: ['user', 1],
    queryFn: () => fetch('/api/users/1').then((r) => r.json()),
  }))

  return () => {
    if (query.isPending()) return <p>Loading...</p>
    if (query.isError()) return <p>Error: {String(query.error())}</p>
    return <h1>{query.data()?.name}</h1>
  }
})

const SearchResults = defineComponent(() => {
  const searchTerm = signal('')
  const category = signal('all')
  const page = signal(1)

  const query = useQuery(() => ({
    queryKey: ['search', searchTerm(), category(), page()],
    queryFn: () =>
      fetch(`/api/search?q=${searchTerm()}&cat=${category()}&page=${page()}`).then((r) => r.json()),
    // Don't search until user types something
    enabled: searchTerm().length > 0,
    // Keep showing old results while new ones load
    placeholderData: (prev: SearchResult | undefined) => prev,
    staleTime: 60_000, // Results are fresh for 1 minute
  }))

  return () => (
    <div>
      <input
        type="text"
        placeholder="Search..."
        onInput={(e) => {
          searchTerm.set(e.currentTarget.value)
          page.set(1) // Reset to page 1 on new search
        }}
      />
      <select onChange={(e) => category.set(e.currentTarget.value)}>
        <option value="all">All</option>
        <option value="posts">Posts</option>
        <option value="users">Users</option>
      </select>
      {() => {
        if (query.isPending()) return <Spinner />
        if (query.isError()) return <ErrorMessage error={query.error()} />
        return (
          <div>
            <ResultsList results={query.data()?.items} />
            <Pagination
              page={() => page()}
              total={query.data()?.totalPages}
              onPageChange={(p: number) => page.set(p)}
            />
          </div>
        )
      }}
    </div>
  )
})

const UserPosts = defineComponent((props: { userId: () => number | null }) => {
  const query = useQuery(() => ({
    queryKey: ['posts', props.userId()],
    queryFn: () => fetch(`/api/users/${props.userId()}/posts`).then((r) => r.json()),
    // Only fetch when userId is available
    enabled: props.userId() !== null,
  }))

  return () => {
    if (!props.userId()) return <p>Select a user to see their posts</p>
    if (query.isPending()) return <Spinner />
    return <PostList posts={query.data()} />
  }
})

const query = useQuery(() => ({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then((r) => r.json()),
  // Only subscribe to the names -- other data changes won't trigger updates
  select: (data: User[]) => data.map((u) => u.name),
}))

// query.data() is Signal<string[] | undefined>

const query = useQuery(() => ({
  queryKey: ['search', term()],
  queryFn: ({ signal }) => fetch(`/api/search?q=${term()}`, { signal }).then((r) => r.json()),
}))

import { useMutation, useQueryClient } from '@pyreon/query'

const client = useQueryClient()

const mutation = useMutation({
  mutationFn: (data: { title: string }) =>
    fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify(data),
    }).then((r) => r.json()),
  onSuccess: () => {
    client.invalidateQueries({ queryKey: ['posts'] })
  },
})

// Fire and forget (errors captured in signal)
mutation.mutate({ title: 'New Post' })

// Or await the result
try {
  const result = await mutation.mutateAsync({ title: 'New Post' })
} catch (err) {
  // handle error
}

const mutation = useMutation({
  mutationFn: updateUser,
  onMutate: (variables) => {
    // Called before the mutation function fires
    console.log('Updating user:', variables)
    // Return context for onError
    return { previousUser: client.getQueryData(['user', variables.id]) }
  },
  onSuccess: (data, variables, context) => {
    // Called on success
    console.log('User updated:', data)
    client.invalidateQueries({ queryKey: ['user', variables.id] })
  },
  onError: (error, variables, context) => {
    // Called on error
    console.error('Update failed:', error)
    // Roll back optimistic update using context from onMutate
    if (context?.previousUser) {
      client.setQueryData(['user', variables.id], context.previousUser)
    }
  },
  onSettled: (data, error, variables, context) => {
    // Called on both success and error
    console.log('Mutation settled')
  },
})

mutation.mutate(
  { id: 1, name: 'Updated Name' },
  {
    onSuccess: (data) => {
      // Runs after the mutation-level onSuccess
      showToast('User updated successfully!')
    },
    onError: (error) => {
      showToast(`Update failed: ${error.message}`)
    },
  },
)

const UpdateTodo = defineComponent((props: { todo: Todo }) => {
  const client = useQueryClient()

  const mutation = useMutation({
    mutationFn: (update: Partial<Todo>) =>
      fetch(`/api/todos/${props.todo.id}`, {
        method: 'PATCH',
        body: JSON.stringify(update),
      }).then((r) => r.json()),

    onMutate: async (update) => {
      // Cancel outgoing refetches so they don't overwrite our optimistic update
      await client.cancelQueries({ queryKey: ['todos'] })

      // Snapshot the previous value
      const previousTodos = client.getQueryData<Todo[]>(['todos'])

      // Optimistically update the cache
      client.setQueryData<Todo[]>(['todos'], (old) =>
        old?.map((t) => (t.id === props.todo.id ? { ...t, ...update } : t)),
      )

      return { previousTodos }
    },

    onError: (_err, _update, context) => {
      // Roll back to the previous value on error
      if (context?.previousTodos) {
        client.setQueryData(['todos'], context.previousTodos)
      }
    },

    onSettled: () => {
      // Refetch to make sure we're in sync with the server
      client.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return () => (
    <div class="todo-item">
      <input
        type="checkbox"
        checked={props.todo.completed}
        onChange={(e) => {
          mutation.mutate({
            completed: e.currentTarget.checked,
          })
        }}
      />
      <span>{props.todo.title}</span>
      {() => mutation.isPending() && <Spinner size="sm" />}
    </div>
  )
})

function useTodos() {
  const client = useQueryClient()

  const todosQuery = useQuery(() => ({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then((r) => r.json()),
  }))

  const createTodo = useMutation({
    mutationFn: (title: string) =>
      fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title, completed: false }),
      }).then((r) => r.json()),
    onSuccess: () => {
      client.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  const updateTodo = useMutation({
    mutationFn: (update: { id: number; completed: boolean }) =>
      fetch(`/api/todos/${update.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ completed: update.completed }),
      }).then((r) => r.json()),
    onSuccess: () => {
      client.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  const deleteTodo = useMutation({
    mutationFn: (id: number) => fetch(`/api/todos/${id}`, { method: 'DELETE' }),
    onSuccess: () => {
      client.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return { todosQuery, createTodo, updateTodo, deleteTodo }
}

import { useInfiniteQuery } from '@pyreon/query'

const query = useInfiniteQuery(() => ({
  queryKey: ['posts'],
  queryFn: ({ pageParam }) => fetch(`/api/posts?cursor=${pageParam}`).then((r) => r.json()),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
}))

// Access pages
query.data()?.pages // array of page results
query.data()?.pageParams // array of page params

// Pagination controls
query.hasNextPage()
query.hasPreviousPage()
query.fetchNextPage()
query.fetchPreviousPage()
query.isFetchingNextPage()
query.isFetchingPreviousPage()

interface PostsResponse {
  posts: Post[]
  nextCursor: string | null
  previousCursor: string | null
}

const InfinitePostList = defineComponent(() => {
  const query = useInfiniteQuery(() => ({
    queryKey: ['posts'],
    queryFn: ({ pageParam }): Promise<PostsResponse> =>
      fetch(`/api/posts?cursor=${pageParam}&limit=20`).then((r) => r.json()),
    initialPageParam: '',
    getNextPageParam: (lastPage) => lastPage.nextCursor,
    getPreviousPageParam: (firstPage) => firstPage.previousCursor,
  }))

  return () => (
    <div class="post-feed">
      {() => {
        if (query.isPending()) return <Spinner />
        if (query.isError()) return <p>Error: {String(query.error())}</p>

        const pages = query.data()?.pages ?? []
        return (
          <div>
            {pages.flatMap((page) =>
              page.posts.map((post) => <PostCard key={post.id} post={post} />),
            )}
            {query.hasNextPage() && (
              <button
                onClick={() => query.fetchNextPage()}
                disabled={() => query.isFetchingNextPage()}
              >
                {() => (query.isFetchingNextPage() ? 'Loading...' : 'Load More')}
              </button>
            )}
          </div>
        )
      }}
    </div>
  )
})

const InfiniteScroll = defineComponent(() => {
  const query = useInfiniteQuery(() => ({
    queryKey: ['feed'],
    queryFn: ({ pageParam }) => fetch(`/api/feed?page=${pageParam}`).then((r) => r.json()),
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages) => (lastPage.hasMore ? allPages.length + 1 : undefined),
  }))

  return () => (
    <div class="feed">
      {() =>
        query
          .data()
          ?.pages.flatMap((page) =>
            page.items.map((item: FeedItem) => <FeedCard key={item.id} item={item} />),
          )
      }

      {/* Sentinel element -- triggers fetchNextPage when scrolled into view */}
      {() =>
        query.hasNextPage() && (
          <div
            ref={(el: HTMLDivElement) => {
              const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting && !query.isFetchingNextPage()) {
                  query.fetchNextPage()
                }
              })
              observer.observe(el)
              onCleanup(() => observer.disconnect())
            }}
            class="loading-sentinel"
          >
            {() => query.isFetchingNextPage() && <Spinner />}
          </div>
        )
      }
    </div>
  )
})

const PaginatedTable = defineComponent(() => {
  const page = signal(1)
  const pageSize = 25

  const query = useInfiniteQuery(() => ({
    queryKey: ['users', page()],
    queryFn: ({ pageParam }) =>
      fetch(`/api/users?offset=${(pageParam - 1) * pageSize}&limit=${pageSize}`).then((r) =>
        r.json(),
      ),
    initialPageParam: 1,
    getNextPageParam: (lastPage, _allPages, lastPageParam) =>
      lastPage.total > lastPageParam * pageSize ? lastPageParam + 1 : undefined,
  }))

  return () => (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {() =>
            query.data()?.pages.flatMap((page) =>
              page.users.map((user: User) => (
                <tr key={user.id}>
                  <td>{user.name}</td>
                  <td>{user.email}</td>
                </tr>
              )),
            )
          }
        </tbody>
      </table>
      <div class="pagination">
        <button disabled={!query.hasPreviousPage()} onClick={() => query.fetchPreviousPage()}>
          Previous
        </button>
        <button disabled={!query.hasNextPage()} onClick={() => query.fetchNextPage()}>
          Next
        </button>
      </div>
    </div>
  )
})

import { useQueries } from '@pyreon/query'
import { signal } from '@pyreon/reactivity'

const userIds = signal([1, 2, 3])

const results = useQueries(() =>
  userIds().map((id) => ({
    queryKey: ['user', id],
    queryFn: () => fetch(`/api/users/${id}`).then((r) => r.json()),
  })),
)

// results() is QueryObserverResult[]
results()[0]?.data // first user
results()[1]?.data // second user

const UserCards = defineComponent(() => {
  const selectedIds = signal<number[]>([1, 2])

  const results = useQueries(() =>
    selectedIds().map((id) => ({
      queryKey: ['user', id],
      queryFn: () => fetch(`/api/users/${id}`).then((r) => r.json()),
      staleTime: 5 * 60 * 1000,
    })),
  )

  return () => (
    <div class="user-cards">
      {() =>
        results().map((result, i) => {
          if (result.isPending) return <CardSkeleton key={selectedIds()[i]} />
          if (result.isError) return <CardError key={selectedIds()[i]} error={result.error} />
          return <UserCard key={selectedIds()[i]} user={result.data} />
        })
      }
    </div>
  )
})

const Dashboard = defineComponent(() => {
  const results = useQueries(() => [
    { queryKey: ['stats', 'revenue'], queryFn: fetchRevenue },
    { queryKey: ['stats', 'users'], queryFn: fetchUserCount },
    { queryKey: ['stats', 'orders'], queryFn: fetchOrderCount },
  ])

  return () => {
    const allResults = results()
    const isAnyLoading = allResults.some((r) => r.isPending)
    const isAnyError = allResults.some((r) => r.isError)

    if (isAnyLoading) return <DashboardSkeleton />
    if (isAnyError) return <DashboardError />

    return (
      <div class="dashboard-grid">
        <StatCard title="Revenue" value={allResults[0]?.data} />
        <StatCard title="Users" value={allResults[1]?.data} />
        <StatCard title="Orders" value={allResults[2]?.data} />
      </div>
    )
  }
})

import { useSuspenseQuery, QuerySuspense } from '@pyreon/query'

const userQuery = useSuspenseQuery(() => ({
  queryKey: ['user', 1],
  queryFn: () => fetch('/api/users/1').then((r) => r.json()),
}))

// userQuery.data() is Signal<User>, not Signal<User | undefined>

const postsQuery = useSuspenseInfiniteQuery(() => ({
  queryKey: ['posts'],
  queryFn: ({ pageParam }) => fetchPosts(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor,
}))

// postsQuery.data() is Signal<InfiniteData<PostsPage>>, never undefined

import { QuerySuspense, useSuspenseQuery } from '@pyreon/query'

const UserCard = defineComponent(() => {
  const user = useSuspenseQuery(() => ({
    queryKey: ['user', 1],
    queryFn: fetchUser,
  }))

  return () => (
    <QuerySuspense
      query={user}
      fallback={<Spinner />}
      error={(err) => <p>Failed: {String(err)}</p>}
    >
      {() => <h1>{user.data().name}</h1>}
    </QuerySuspense>
  )
})

const Dashboard = defineComponent(() => {
  const userQuery = useSuspenseQuery(() => ({
    queryKey: ['user'],
    queryFn: fetchUser,
  }))
  const postsQuery = useSuspenseQuery(() => ({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  }))

  return () => (
    <QuerySuspense
      query={[userQuery, postsQuery]}
      fallback={<DashboardSkeleton />}
      error={(err) => <DashboardError error={err} />}
    >
      {() => (
        <div class="dashboard">
          <UserHeader user={userQuery.data()} />
          <PostList posts={postsQuery.data()} />
        </div>
      )}
    </QuerySuspense>
  )
})

function App() {
  return () => (
    <div class="layout">
      {/* Header loads independently */}
      <QuerySuspense query={headerQuery} fallback={<HeaderSkeleton />}>
        {() => <Header data={headerQuery.data()} />}
      </QuerySuspense>

      <div class="content">
        {/* Sidebar loads independently */}
        <QuerySuspense query={sidebarQuery} fallback={<SidebarSkeleton />}>
          {() => <Sidebar items={sidebarQuery.data()} />}
        </QuerySuspense>

        {/* Main content loads independently */}
        <QuerySuspense query={contentQuery} fallback={<ContentSkeleton />}>
          {() => <MainContent data={contentQuery.data()} />}
        </QuerySuspense>
      </div>
    </div>
  )
}

const UserProfile = defineComponent((props: { userId: number }) => {
  // First query: fetch the user
  const userQuery = useQuery(() => ({
    queryKey: ['user', props.userId],
    queryFn: () => fetch(`/api/users/${props.userId}`).then((r) => r.json()),
  }))

  // Second query: fetch the user's team -- depends on user data
  const teamQuery = useQuery(() => ({
    queryKey: ['team', userQuery.data()?.teamId],
    queryFn: () => fetch(`/api/teams/${userQuery.data()!.teamId}`).then((r) => r.json()),
    // Only run when we have the teamId from the first query
    enabled: userQuery.data()?.teamId != null,
  }))

  // Third query: fetch team members -- depends on team data
  const membersQuery = useQuery(() => ({
    queryKey: ['members', teamQuery.data()?.id],
    queryFn: () => fetch(`/api/teams/${teamQuery.data()!.id}/members`).then((r) => r.json()),
    enabled: teamQuery.data()?.id != null,
  }))

  return () => (
    <div>
      {() => {
        if (userQuery.isPending()) return <p>Loading user...</p>
        if (userQuery.isError()) return <p>Error loading user</p>

        return (
          <div>
            <h1>{userQuery.data()?.name}</h1>
            {() => {
              if (teamQuery.isPending()) return <p>Loading team...</p>
              return <p>Team: {teamQuery.data()?.name}</p>
            }}
            {() => {
              if (membersQuery.isPending()) return <p>Loading members...</p>
              return (
                <ul>
                  {membersQuery.data()?.map((m: User) => (
                    <li key={m.id}>{m.name}</li>
                  ))}
                </ul>
              )
            }}
          </div>
        )
      }}
    </div>
  )
})

// @check
import { useQuery } from '@pyreon/query'
import { signal } from '@pyreon/reactivity'

type Me = { name: string; email: string }

// Wherever your session lives — a store, a context, `useOidc`'s accessToken() / subject().
const session = signal<{ userId: string; token: string } | null>(null)

export function useMe() {
  return useQuery<Me>(() => ({
    queryKey: ['me', session()?.userId ?? 'anonymous'],
    queryFn: () =>
      fetch('https://api.example.com/me', {
        headers: { authorization: `Bearer ${session()?.token ?? ''}` },
      }).then((r) => r.json()),
    enabled: session() !== null,
  }))
}

const client = useQueryClient()

// Invalidate a specific query
client.invalidateQueries({ queryKey: ['todos'] })

// Invalidate all queries that start with 'user'
client.invalidateQueries({ queryKey: ['user'] })

// Invalidate everything
client.invalidateQueries()

// Invalidate with a predicate
client.invalidateQueries({
  predicate: (query) => query.queryKey[0] === 'todos' && query.state.data?.length > 10,
})

// Refetch (force immediate refetch, not just mark stale)
client.refetchQueries({ queryKey: ['todos'] })

// Remove queries from cache entirely
client.removeQueries({ queryKey: ['old-data'] })

// Manually set query data (e.g., after a mutation)
client.setQueryData(['todo', 1], {
  id: 1,
  title: 'Updated title',
  completed: true,
})

// Prefetch (fetch into cache without subscribing)
client.prefetchQuery({
  queryKey: ['user', 5],
  queryFn: () => fetchUser(5),
})

const UserLink = defineComponent((props: { userId: number; name: string }) => {
  const client = useQueryClient()

  const prefetch = () => {
    client.prefetchQuery({
      queryKey: ['user', props.userId],
      queryFn: () => fetchUser(props.userId),
      staleTime: 5 * 60 * 1000,
    })
  }

  return () => (
    <a href={`/users/${props.userId}`} onMouseEnter={prefetch} onFocus={prefetch}>
      {props.name}
    </a>
  )
})

import { useIsFetching } from '@pyreon/query'

const fetching = useIsFetching()
// In template: () => fetching() > 0 ? 'Loading...' : ''

// Only track queries that match the filter
const fetchingTodos = useIsFetching({ queryKey: ['todos'] })

import { useIsMutating } from '@pyreon/query'

const mutating = useIsMutating()
// In template: () => mutating() > 0 ? 'Saving...' : ''

const GlobalLoadingBar = defineComponent(() => {
  const fetching = useIsFetching()
  const mutating = useIsMutating()

  return () => (
    <Show when={() => fetching() > 0 || mutating() > 0}>
      <div class="global-loading-bar">
        <div class="progress-bar" />
      </div>
    </Show>
  )
})

import { QueryErrorResetBoundary, useQueryErrorResetBoundary } from '@pyreon/query'

const App = defineComponent(() => {
  return () => (
    <QueryErrorResetBoundary>
      <ErrorBoundary
        fallback={(err, boundaryReset) => {
          const { reset } = useQueryErrorResetBoundary()
          return (
            <div>
              <p>Something went wrong: {String(err)}</p>
              <button
                onClick={() => {
                  reset()
                  boundaryReset()
                }}
              >
                Retry
              </button>
            </div>
          )
        }}
      >
        <MyComponent />
      </ErrorBoundary>
    </QueryErrorResetBoundary>
  )
})

const { reset } = useQueryErrorResetBoundary()
// reset() refetches all queries where state.status === "error"

const query = useQuery(() => ({
  queryKey: ['critical-data'],
  queryFn: fetchCriticalData,
  retry: 5, // Retry 5 times
  retryDelay: (
    attempt, // Exponential backoff with jitter
  ) => Math.min(1000 * 2 ** attempt, 30000) + Math.random() * 1000,
}))

const query = useQuery(() => ({
  queryKey: ['api-data'],
  queryFn: fetchData,
  retry: (failureCount, error) => {
    // Don't retry on 401/403 (auth errors)
    if ((error as Response)?.status === 401) return false
    if ((error as Response)?.status === 403) return false
    // Don't retry on 404
    if ((error as Response)?.status === 404) return false
    // Retry up to 3 times for other errors
    return failureCount < 3
  },
}))

const DataComponent = defineComponent(() => {
  const query = useQuery(() => ({
    queryKey: ['data'],
    queryFn: fetchData,
  }))

  return () => {
    // Pattern 1: Inline error handling
    if (query.isError()) {
      const error = query.error()
      if (error instanceof NotFoundError) {
        return <NotFoundPage />
      }
      return (
        <div class="error">
          <p>Failed to load data: {String(error)}</p>
          <button onClick={() => query.refetch()}>Retry</button>
        </div>
      )
    }

    if (query.isPending()) return <Spinner />
    return <DataView data={query.data()} />
  }
})

// --- server.ts ---
import { QueryClient, dehydrate } from '@pyreon/query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // Data is fresh for 1 minute
    },
  },
})

// Prefetch all the data your page needs
await Promise.all([
  queryClient.prefetchQuery({
    queryKey: ['user', 1],
    queryFn: fetchUser,
  }),
  queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  }),
])

const dehydratedState = dehydrate(queryClient)

// Embed in HTML
const html = `
  <script>
    window.__PYREON_QUERY_STATE__ = ${JSON.stringify(dehydratedState)}
  </script>
`

// --- client.ts ---
import { QueryClient, hydrate } from '@pyreon/query'

const queryClient = new QueryClient()

// Hydrate the cache with server-prefetched data
const dehydratedState = (window as any).__PYREON_QUERY_STATE__
if (dehydratedState) {
  hydrate(queryClient, dehydratedState)
}

// Now mount the app -- queries will use cached data immediately
mount(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('app')!
)

const dehydratedState = dehydrate(queryClient, {
  shouldDehydrateQuery: (query) => {
    // Only dehydrate successful queries
    return query.state.status === 'success'
  },
  shouldDehydrateMutation: defaultShouldDehydrateMutation,
})

import { useSubscription } from '@pyreon/query'

function OrdersDashboard() {
  const sub = useSubscription({
    url: 'wss://api.example.com/ws',
    onMessage: (event, queryClient) => {
      const data = JSON.parse(event.data)
      if (data.type === 'order-updated') {
        queryClient.invalidateQueries({ queryKey: ['orders'] })
      }
      if (data.type === 'order-created') {
        queryClient.setQueryData(['orders', data.order.id], data.order)
      }
    },
  })

  return (
    <div>
      <p>Status: {() => sub.status()}</p>
      {/* sub.status(): 'connecting' | 'connected' | 'disconnected' | 'error' */}
    </div>
  )
}

const channel = signal('orders')

useSubscription({
  url: () => `wss://api.example.com/ws/${channel()}`,
  onMessage: (event, qc) => {
    /* ... */
  },
})

// Changing channel automatically reconnects to the new URL
channel.set('inventory')

const isAuthenticated = computed(() => !!token())

useSubscription({
  url: 'wss://api.example.com/ws',
  enabled: () => isAuthenticated(),
  onMessage: (event, qc) => {
    /* ... */
  },
})

import { openEventStream } from '@pyreon/http/stream'
import { useStream } from '@pyreon/query'

function Feed(props: { room: () => string }) {
  const feed = useStream(
    (ctx) =>
      openEventStream((c) => roomEvents({ params: { room: props.room() }, signal: c.signal, headers: c.headers }), {
        signal: ctx.signal,
        onStatus: ctx.onStatus,
      }),
    { maxEvents: 200 },
  )
  return (
    <p>
      {() => feed.status()}: {() => feed.latest()?.data.text ?? '…'} ({() => feed.events().length} so far)
    </p>
  )
}