The one wrapper over TanStack Query for the apps in this repo: `useDataQuery` reads a value and `useCursorQuery` loads a keyset-paged list one page at a time, so no component imports `@tanstack/react-query` itself.
Examples of v0.1.0 are shown as code; only the latest version runs live. Open the live examples →
Each exported component here is a live, editable example on the docs site. This comment is its description.
Basic Use Data Query
1const fetchPage = async (cursor: string) => {2 const start = Number(cursor);34 return {5 items: [start, start + 1],6 nextCursor: start + 2 > 6 ? null : String(start + 2),7 };8};910const List = () => {11 const { items, hasMore, isLoadingMore, loadMore } = useCursorQuery({12 queryKey: ["example-list"],13 initialPage: { items: [1, 2], nextCursor: "3" },14 fetchPage,15 getItemKey: (item) => item,16 });1718 return (19 <div>20 <p>{items.join(", ")}</p>21 {hasMore && (22 <button type="button" disabled={isLoadingMore} onClick={loadMore}>23 Load more24 </button>25 )}26 </div>27 );28};2930const BasicUseDataQuery = () => (31 <DataQueryProvider>32 <List />33 </DataQueryProvider>34);3536render(<BasicUseDataQuery />);