Skip to content

Commit 4082894

Browse files
chughgauravgauravchughTkDodoautofix-ci[bot]
authored
feat: lit query adapter
* feat lit-query: add initial lit-query package * remove internal docs from initial PR * fix review issues * align scripts with monorepo Nx targets and use workspace:* for query-core * feat(lit-query): fix type inference and monorepo integration - Fix createQueriesController tuple type inference with recursive types - Add DataTag support to queryOptions - Fix build config and vitest custom-condition resolution - Fix example install scripts for standalone bootstrap * fix(lit-query): polish package validation and examples * ci: apply automated fixes * lit-query: preserve provider handshake ordering in BaseController * Update .changeset/lemon-memes-divide.md Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc> * removing prettier config from adapter, so that global config from the monorepo is used * removed the package local format scripts so formatting stays centralized at the monorepo root * removing like other adapters keep build and test:build as separate targets * Compared against the other adapters and removed the lit-query-only aliases/gates, keeping the standard Nx target names so root CI can pick them up consistently * package:check has been removed. The CJS smoke check is still needed because lit-query publishes custom CJS output/types * fix(lit-query): align lit examples and integration with monorepo conventions * chore(lit-query): clean up stale package checks * fix(lit-query): address review feedback for lit examples and lifecycle tests * chore: fix lockfile * fix: add customCondition * docs(lit-query): add Lit docs and generated reference * docs(lit-query): fix Lit docs review comment and align examples --------- Co-authored-by: gauravchugh <gauravchugh@servicenow.com> Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 3d1ee9d commit 4082894

147 files changed

Lines changed: 16593 additions & 312 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/lemon-memes-divide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/lit-query': minor
3+
---
4+
5+
Add initial @tanstack/lit-query package

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ yarn.lock
1010
build
1111
coverage
1212
dist
13+
dist-cjs
1314
dist-ts
1415

1516
# misc

‎docs/config.json‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,27 @@
135135
}
136136
]
137137
},
138+
{
139+
"label": "lit",
140+
"children": [
141+
{
142+
"label": "Overview",
143+
"to": "framework/lit/overview"
144+
},
145+
{
146+
"label": "Installation",
147+
"to": "framework/lit/installation"
148+
},
149+
{
150+
"label": "Quick Start",
151+
"to": "framework/lit/quick-start"
152+
},
153+
{
154+
"label": "TypeScript",
155+
"to": "framework/lit/typescript"
156+
}
157+
]
158+
},
138159
{
139160
"label": "angular",
140161
"children": [
@@ -759,6 +780,47 @@
759780
}
760781
]
761782
},
783+
{
784+
"label": "lit",
785+
"children": [
786+
{
787+
"label": "Reactive Controllers vs Hooks",
788+
"to": "framework/lit/guides/reactive-controllers-vs-hooks"
789+
},
790+
{
791+
"label": "Queries",
792+
"to": "framework/lit/guides/queries"
793+
},
794+
{
795+
"label": "Parallel Queries",
796+
"to": "framework/lit/guides/parallel-queries"
797+
},
798+
{
799+
"label": "Query Keys",
800+
"to": "framework/lit/guides/query-keys"
801+
},
802+
{
803+
"label": "Query Functions",
804+
"to": "framework/lit/guides/query-functions"
805+
},
806+
{
807+
"label": "Mutations",
808+
"to": "framework/lit/guides/mutations"
809+
},
810+
{
811+
"label": "Query Invalidation",
812+
"to": "framework/lit/guides/query-invalidation"
813+
},
814+
{
815+
"label": "Infinite Queries",
816+
"to": "framework/lit/guides/infinite-queries"
817+
},
818+
{
819+
"label": "SSR",
820+
"to": "framework/lit/guides/ssr"
821+
}
822+
]
823+
},
762824
{
763825
"label": "preact",
764826
"children": [
@@ -1183,6 +1245,83 @@
11831245
}
11841246
]
11851247
},
1248+
{
1249+
"label": "lit",
1250+
"children": [
1251+
{
1252+
"label": "Lit Reference",
1253+
"to": "framework/lit/reference/index"
1254+
},
1255+
{
1256+
"label": "QueryClientProvider",
1257+
"to": "framework/lit/reference/classes/QueryClientProvider"
1258+
},
1259+
{
1260+
"label": "Functions / createQueryController",
1261+
"to": "framework/lit/reference/functions/createQueryController"
1262+
},
1263+
{
1264+
"label": "Functions / createQueriesController",
1265+
"to": "framework/lit/reference/functions/createQueriesController"
1266+
},
1267+
{
1268+
"label": "Functions / createInfiniteQueryController",
1269+
"to": "framework/lit/reference/functions/createInfiniteQueryController"
1270+
},
1271+
{
1272+
"label": "Functions / createMutationController",
1273+
"to": "framework/lit/reference/functions/createMutationController"
1274+
},
1275+
{
1276+
"label": "Functions / useIsFetching",
1277+
"to": "framework/lit/reference/functions/useIsFetching"
1278+
},
1279+
{
1280+
"label": "Functions / useIsMutating",
1281+
"to": "framework/lit/reference/functions/useIsMutating"
1282+
},
1283+
{
1284+
"label": "Functions / useMutationState",
1285+
"to": "framework/lit/reference/functions/useMutationState"
1286+
},
1287+
{
1288+
"label": "Functions / useQueryClient",
1289+
"to": "framework/lit/reference/functions/useQueryClient"
1290+
},
1291+
{
1292+
"label": "Functions / queryOptions",
1293+
"to": "framework/lit/reference/functions/queryOptions"
1294+
},
1295+
{
1296+
"label": "Functions / infiniteQueryOptions",
1297+
"to": "framework/lit/reference/functions/infiniteQueryOptions"
1298+
},
1299+
{
1300+
"label": "Functions / mutationOptions",
1301+
"to": "framework/lit/reference/functions/mutationOptions"
1302+
},
1303+
{
1304+
"label": "Context / queryClientContext",
1305+
"to": "framework/lit/reference/variables/queryClientContext"
1306+
},
1307+
{
1308+
"label": "Context / getDefaultQueryClient",
1309+
"to": "framework/lit/reference/functions/getDefaultQueryClient"
1310+
},
1311+
{
1312+
"label": "Context / registerDefaultQueryClient",
1313+
"to": "framework/lit/reference/functions/registerDefaultQueryClient"
1314+
},
1315+
{
1316+
"label": "Context / unregisterDefaultQueryClient",
1317+
"to": "framework/lit/reference/functions/unregisterDefaultQueryClient"
1318+
},
1319+
{
1320+
"label": "Context / resolveQueryClient",
1321+
"to": "framework/lit/reference/functions/resolveQueryClient"
1322+
}
1323+
]
1324+
},
11861325
{
11871326
"label": "angular",
11881327
"children": [
@@ -1532,6 +1671,23 @@
15321671
}
15331672
]
15341673
},
1674+
{
1675+
"label": "lit",
1676+
"children": [
1677+
{
1678+
"label": "Basic",
1679+
"to": "framework/lit/examples/basic"
1680+
},
1681+
{
1682+
"label": "Pagination",
1683+
"to": "framework/lit/examples/pagination"
1684+
},
1685+
{
1686+
"label": "SSR",
1687+
"to": "framework/lit/examples/ssr"
1688+
}
1689+
]
1690+
},
15351691
{
15361692
"label": "angular",
15371693
"children": [

‎docs/framework/lit/guides/infinite-queries.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
id: infinite-queries
3+
title: Infinite Queries
4+
---
5+
6+
Infinite queries are for lists that load more data into one cache entry. Use [`createInfiniteQueryController`](../reference/functions/createInfiniteQueryController.md).
7+
8+
An infinite query result contains:
9+
10+
- `data.pages`: fetched pages
11+
- `data.pageParams`: page parameters used for those pages
12+
- `fetchNextPage` and `fetchPreviousPage`
13+
- `hasNextPage` and `hasPreviousPage`
14+
- `isFetchingNextPage` and `isFetchingPreviousPage`
15+
16+
## Load More Example
17+
18+
```ts
19+
import { LitElement, html } from 'lit'
20+
import { createInfiniteQueryController } from '@tanstack/lit-query'
21+
22+
class ProjectsList extends LitElement {
23+
private readonly projects = createInfiniteQueryController(this, {
24+
queryKey: ['projects'],
25+
queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
26+
initialPageParam: 1,
27+
getNextPageParam: (lastPage) =>
28+
lastPage.hasMore ? lastPage.page + 1 : undefined,
29+
})
30+
31+
render() {
32+
const query = this.projects()
33+
34+
if (query.isPending) return html`Loading...`
35+
if (query.isError) return html`Error: ${query.error.message}`
36+
37+
return html`
38+
${query.data.pages.map(
39+
(page) => html`
40+
${page.projects.map((project) => html`<p>${project.name}</p>`)}
41+
`,
42+
)}
43+
44+
<button
45+
?disabled=${!query.hasNextPage || query.isFetching}
46+
@click=${() => this.projects.fetchNextPage()}
47+
>
48+
${query.isFetchingNextPage
49+
? 'Loading more...'
50+
: query.hasNextPage
51+
? 'Load More'
52+
: 'Nothing more to load'}
53+
</button>
54+
`
55+
}
56+
}
57+
```
58+
59+
## Page Parameters
60+
61+
`initialPageParam` is required. `getNextPageParam` decides whether another page exists and what value should be passed as `pageParam` to the next query function call.
62+
63+
```ts
64+
createInfiniteQueryController(this, {
65+
queryKey: ['projects'],
66+
queryFn: ({ pageParam }) => fetchProjectsPage(pageParam),
67+
initialPageParam: 1,
68+
getNextPageParam: (lastPage) =>
69+
lastPage.hasMore ? lastPage.page + 1 : undefined,
70+
})
71+
```
72+
73+
Returning `undefined` or `null` means there is no next page.
74+
75+
## Avoid Overlapping Fetches
76+
77+
There is one ongoing fetch for an infinite query cache entry. If you call `fetchNextPage` while a background refetch is running, you can overwrite data. Disable the button or check `!query.isFetching` before loading more:
78+
79+
```ts
80+
if (query.hasNextPage && !query.isFetching) {
81+
this.projects.fetchNextPage()
82+
}
83+
```
84+
85+
## Paginated Alternative
86+
87+
If your UI shows one page at a time, a normal query with a page in the key can be a better fit. The [Pagination example](../examples/pagination) uses `createQueryController`, `placeholderData: keepPreviousData`, prefetching, and mutations to demonstrate that pattern.

0 commit comments

Comments
 (0)