feat: Preact Adapter

docs/framework/preact/graphql.md

@@ -0,0 +1,6 @@
+---
+id: graphql
+title: GraphQL
+ref: docs/framework/react/graphql.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/background-fetching-indicators.md

@@ -0,0 +1,6 @@
+---
+id: background-fetching-indicators
+title: Background Fetching Indicators
+ref: docs/framework/react/guides/background-fetching-indicators.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/caching.md

@@ -0,0 +1,6 @@
+---
+id: caching
+title: Caching Examples
+ref: docs/framework/react/guides/caching.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/default-query-function.md

@@ -0,0 +1,6 @@
+---
+id: default-query-function
+title: Default Query Function
+ref: docs/framework/react/guides/default-query-function.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/dependent-queries.md

@@ -0,0 +1,6 @@
+---
+id: dependent-queries
+title: Dependent Queries
+ref: docs/framework/react/guides/dependent-queries.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/disabling-queries.md

@@ -0,0 +1,57 @@
+---
+id: disabling-queries
+title: Disabling/Pausing Queries
+ref: docs/framework/react/guides/disabling-queries.md
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'Example2'
+
+```tsx
+function Todos() {
+  const [filter, setFilter] = useState('')
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    queryFn: () => fetchTodos(filter),
+    // ⬇️ disabled as long as the filter is empty
+    enabled: !!filter,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'
+
+[//]: # 'Example3'
+
+```tsx
+import { skipToken, useQuery } from '@tanstack/react-query'
+
+function Todos() {
+  const [filter, setFilter] = useState<string | undefined>()
+
+  const { data } = useQuery({
+    queryKey: ['todos', filter],
+    // ⬇️ disabled as long as the filter is undefined or empty
+    queryFn: filter ? () => fetchTodos(filter) : skipToken,
+  })
+
+  return (
+    <div>
+      // 🚀 applying the filter will enable and execute the query
+      <FiltersForm onApply={setFilter} />
+      {data && <TodosTable data={data} />}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example3'

docs/framework/preact/guides/does-this-replace-client-state.md

@@ -0,0 +1,6 @@
+---
+id: does-this-replace-client-state
+title: Does TanStack Query replace Redux, MobX or other global state managers?
+ref: docs/framework/react/guides/does-this-replace-client-state
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/filters.md

@@ -0,0 +1,6 @@
+---
+id: filters
+title: Filters
+ref: docs/framework/react/guides/filters
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/important-defaults.md

@@ -0,0 +1,6 @@
+---
+id: important-defaults
+title: Important Defaults
+ref: docs/framework/react/guides/important-defaults
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/infinite-queries.md

@@ -0,0 +1,65 @@
+---
+id: infinite-queries
+title: Infinite Queries
+ref: docs/framework/react/guides/infinite-queries
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'Example'
+
+```tsx
+import { useInfiniteQuery } from '@tanstack/preact-query'
+
+function Projects() {
+  const fetchProjects = async ({ pageParam }) => {
+    const res = await fetch('/api/projects?cursor=' + pageParam)
+    return res.json()
+  }
+
+  const {
+    data,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    status,
+  } = useInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+  })
+
+  return status === 'pending' ? (
+    <p>Loading...</p>
+  ) : status === 'error' ? (
+    <p>Error: {error.message}</p>
+  ) : (
+    <>
+      {data.pages.map((group, i) => (
+        <div key={i}>
+          {group.data.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        <div/>
+      ))}
+      <div>
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={!hasNextPage || isFetching}
+        >
+          {isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'}
+        </button>
+      </div>
+      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
+    </>
+  )
+}
+```
+
+[//]: # 'Example'

docs/framework/preact/guides/initial-query-data.md

@@ -0,0 +1,6 @@
+---
+id: initial-query-data
+title: Initial Query Data
+ref: docs/framework/react/guides/initial-query-data
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/invalidations-from-mutations.md

@@ -0,0 +1,6 @@
+---
+id: invalidations-from-mutations
+title: Invalidations from Mutations
+ref: docs/framework/react/guides/invalidations-from-mutations
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/mutations.md

@@ -0,0 +1,11 @@
+---
+id: mutations
+title: Mutations
+ref: docs/framework/react/guides/mutations
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'Info1'
+[//]: # 'Info1'
+[//]: # 'Example2'
+[//]: # 'Example2'

docs/framework/preact/guides/network-mode.md

@@ -0,0 +1,6 @@
+---
+id: network-mode
+title: Network Mode
+ref: docs/framework/react/guides/network-mode
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/optimistic-updates.md

@@ -0,0 +1,6 @@
+---
+id: optimistic-updates
+title: Optimistic Updates
+ref: docs/framework/react/guides/optimistic-updates
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/paginated-queries.md

@@ -0,0 +1,64 @@
+---
+id: paginated-queries
+title: Paginated / Lagged Queries
+ref: docs/framework/react/guides/paginated-queries
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'Example2'
+
+```tsx
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { useState } from 'preact/hooks'
+
+function Todos() {
+  const [page, setPage] = useState(0)
+
+  const fetchProjects = (page = 0) =>
+    fetch('/api/projects?page=' + page).then((res) => res.json())
+
+  const { isPending, isError, error, data, isFetching, isPlaceholderData } =
+    useQuery({
+      queryKey: ['projects', page],
+      queryFn: () => fetchProjects(page),
+      placeholderData: keepPreviousData,
+    })
+
+  return (
+    <div>
+      {isPending ? (
+        <div>Loading...</div>
+      ) : isError ? (
+        <div>Error: {error.message}</div>
+      ) : (
+        <div>
+          {data.projects.map((project) => (
+            <p key={project.id}>{project.name}</p>
+          ))}
+        </div>
+      )}
+      <span>Current Page: {page + 1}</span>
+      <button
+        onClick={() => setPage((old) => Math.max(old - 1, 0))}
+        disabled={page === 0}
+      >
+        Previous Page
+      </button>
+      <button
+        onClick={() => {
+          if (!isPlaceholderData && data.hasMore) {
+            setPage((old) => old + 1)
+          }
+        }}
+        // Disable the Next Page button until we know a next page is available
+        disabled={isPlaceholderData || !data?.hasMore}
+      >
+        Next Page
+      </button>
+      {isFetching ? <span> Loading...</span> : null}
+    </div>
+  )
+}
+```
+
+[//]: # 'Example2'

docs/framework/preact/guides/parallel-queries.md

@@ -0,0 +1,12 @@
+---
+id: parallel-queries
+title: Parallel Queries
+ref: docs/framework/react/guides/parallel-queries
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'Info'
+
+> When using Preact Query with compat's Suspense, this pattern of parallelism does not work, since the first query would throw a promise internally and would suspend the component before the other queries run. To get around this, you'll either need to use the `useSuspenseQueries` hook (which is suggested) or orchestrate your own parallelism with separate components for each `useSuspenseQuery` instance.
+
+[//]: # 'Info'

docs/framework/preact/guides/placeholder-query-data.md

@@ -0,0 +1,6 @@
+---
+id: placeholder-query-data
+title: Placeholder Query Data
+ref: docs/framework/react/guides/placeholder-query-data
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/prefetching.md

@@ -0,0 +1,51 @@
+---
+id: prefetching
+title: Prefetching & Router Integration
+ref: docs/framework/react/guides/prefetching
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---
+
+[//]: # 'ExampleConditionally1'
+
+```tsx
+// This lazy loads the GraphFeedItem component, meaning
+// it wont start loading until something renders it
+import { lazy } from 'preact/iso'
+
+const GraphFeedItem = lazy(() => import('./GraphFeedItem'))
+
+function Feed() {
+  const { data, isPending } = useQuery({
+    queryKey: ['feed'],
+    queryFn: getFeed,
+  })
+
+  if (isPending) {
+    return 'Loading feed...'
+  }
+
+  return (
+    <>
+      {data.map((feedItem) => {
+        if (feedItem.type === 'GRAPH') {
+          return <GraphFeedItem key={feedItem.id} feedItem={feedItem} />
+        }
+
+        return <StandardFeedItem key={feedItem.id} feedItem={feedItem} />
+      })}
+    </>
+  )
+}
+
+// GraphFeedItem.tsx
+function GraphFeedItem({ feedItem }) {
+  const { data, isPending } = useQuery({
+    queryKey: ['graph', feedItem.id],
+    queryFn: getGraphDataById,
+  })
+
+  ...
+}
+```
+
+[//]: # 'ExampleConditionally1'

docs/framework/preact/guides/queries.md

@@ -0,0 +1,6 @@
+---
+id: queries
+title: Queries
+ref: docs/framework/react/guides/queries
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/query-cancellation.md

@@ -0,0 +1,6 @@
+---
+id: query-cancellation
+title: Query Cancellation
+ref: docs/framework/react/guides/query-cancellation
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/query-functions.md

@@ -0,0 +1,6 @@
+---
+id: query-functions
+title: Query Functions
+ref: docs/framework/react/guides/query-functions
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/query-invalidation.md

@@ -0,0 +1,6 @@
+---
+id: query-invalidation
+title: Query Invalidation
+ref: docs/framework/react/guides/query-invalidation
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/query-keys.md

@@ -0,0 +1,6 @@
+---
+id: query-keys
+title: Query Keys
+ref: docs/framework/react/guides/query-keys
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---

docs/framework/preact/guides/query-options.md

@@ -0,0 +1,6 @@
+---
+id: query-options
+title: Query Options
+ref: docs/framework/react/guides/query-options
+replace: { 'React': 'Preact', 'react-query': 'preact-query' }
+---