Auto Refetch with stale-time set to {{ intervalMs() }}ms
This example is best experienced on your own machine, where you can open
multiple tabs to the same localhost server and see your changes propagate
between the two.
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click on
any posts you have already visited again, you will see them load instantly and
background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
Try to mock offline behavior with the button in the devtools. You can navigate
around as long as there is already data in the cache. You'll get a refetch as
soon as you go "online" again.
In this example, new items can be created using a mutation. The new item
will be optimistically added to the list in hopes that the server accepts
the item. If it does, the list is refetched with the true items from the
list. Every now and then, the mutation may fail though. When that happens,
the previous list of items is restored and the list is again refetched
from the server.
In this example, each page of data remains visible as the next page is
fetched. The buttons and capability to proceed to the next page are also
supressed until the next page cursor is known. Each page is cached as a
normal query too, so when going to previous pages, you'll see them
instantaneously while they are also refetched invisibly in the background.
@if (query.isPending()) {
Loading...
} @else if (query.isError()) {
Error: {{ query.error().message }}
} @else if (query.isSuccess()) {
@for (project of query.data().projects; track project.id) {
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click on
any posts you have already visited again, you will see them load instantly and
background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/angular/query-options-from-a-service/src/app/app.component.ts
================================================
import { Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
@Component({
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.component.html',
})
export class AppComponent {}
================================================
FILE: examples/angular/query-options-from-a-service/src/app/app.config.ts
================================================
import { provideHttpClient, withFetch } from '@angular/common/http'
import { provideRouter, withComponentInputBinding } from '@angular/router'
import {
QueryClient,
provideTanStackQuery,
} from '@tanstack/angular-query-experimental'
import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
import { routes } from './app.routes'
import type { ApplicationConfig } from '@angular/core'
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withFetch()),
provideRouter(routes, withComponentInputBinding()),
provideTanStackQuery(new QueryClient(), withDevtools()),
],
}
================================================
FILE: examples/angular/query-options-from-a-service/src/app/app.routes.ts
================================================
import type { Route } from '@angular/router'
// loadComponent lazily loads the component
// when the component is the default export, there is no need to handle the promise
export const routes: Array = [
{
path: '',
loadComponent: () => import('./components/posts.component'),
},
{
path: 'post/:postId',
loadComponent: () => import('./components/post.component'),
},
]
================================================
FILE: examples/angular/query-options-from-a-service/src/app/components/post.component.html
================================================
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click on
any posts you have already visited again, you will see them load instantly and
background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/angular/router/src/app/app.component.ts
================================================
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { RouterOutlet } from '@angular/router'
@Component({
selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [RouterOutlet],
templateUrl: './app.component.html',
})
export class AppComponent {}
================================================
FILE: examples/angular/router/src/app/app.config.ts
================================================
import { provideHttpClient, withFetch } from '@angular/common/http'
import { provideRouter, withComponentInputBinding } from '@angular/router'
import {
QueryClient,
provideTanStackQuery,
} from '@tanstack/angular-query-experimental'
import { withDevtools } from '@tanstack/angular-query-experimental/devtools'
import { routes } from './app.routes'
import type { ApplicationConfig } from '@angular/core'
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withFetch()),
provideTanStackQuery(new QueryClient(), withDevtools()),
provideRouter(routes, withComponentInputBinding()),
],
}
================================================
FILE: examples/angular/router/src/app/app.routes.ts
================================================
import type { Route } from '@angular/router'
// loadComponent lazily loads the component
// when the component is the default export, there is no need to handle the promise
export const routes: Array = [
{
path: '',
loadComponent: () => import('./components/posts.component'),
},
{
path: 'post/:postId',
loadComponent: () => import('./components/post.component'),
},
]
================================================
FILE: examples/angular/router/src/app/components/post.component.html
================================================
This query was rendered on the{' '}
client. Reload this page to see the page rendered on the
server.
}
>
server.
Click on another pokemon to see queries run and render on the
client.
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
load instantly and background refresh right before your eyes!{' '}
(You may need to throttle your network speed to simulate longer
loading sequences)
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
load instantly and background refresh right before your eyes!{' '}
(You may need to throttle your network speed to simulate longer
loading sequences)
{postId() > -1 ? (
) : (
)}
)
}
function createPosts() {
return useQuery(() => ({
queryKey: ['posts'],
queryFn: async () => {
const {
posts: { data },
} = await request<{ posts: { data: Array } }>(
endpoint,
gql`
query {
posts {
data {
id
title
}
}
}
`,
)
return data
},
}))
}
function Posts(props: { setPostId: Setter }) {
const state = createPosts()
return (
Posts
Loading...Error: {(state.error as Error).message}
<>
)
}
render(() => , document.getElementById('root') as HTMLElement)
================================================
FILE: examples/solid/default-query-function/README.md
================================================
# Example
To run this example:
- `npm install`
- `npm run start`
================================================
FILE: examples/solid/default-query-function/index.html
================================================
Solid App
================================================
FILE: examples/solid/default-query-function/package.json
================================================
{
"name": "@tanstack/query-example-solid-default-query-function",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@tanstack/solid-query": "^5.89.0",
"@tanstack/solid-query-devtools": "^5.89.0",
"solid-js": "^1.9.7"
},
"devDependencies": {
"typescript": "5.8.3",
"vite": "^6.3.6",
"vite-plugin-solid": "^2.11.6"
}
}
================================================
FILE: examples/solid/default-query-function/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
================================================
FILE: examples/solid/default-query-function/vite.config.ts
================================================
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
export default defineConfig({
plugins: [solid()],
})
================================================
FILE: examples/solid/default-query-function/.eslintrc.cjs
================================================
// @ts-check
/** @type {import('eslint').Linter.Config} */
const config = {}
module.exports = config
================================================
FILE: examples/solid/default-query-function/.gitignore
================================================
node_modules
dist
.yalc
yalc.lock
================================================
FILE: examples/solid/default-query-function/src/index.tsx
================================================
/* @refresh reload */
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/solid-query'
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
import { For, Match, Show, Switch, createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import type { Setter } from 'solid-js'
import type { QueryFunction } from '@tanstack/solid-query'
// Define a default query function that will receive the query key
const defaultQueryFn: QueryFunction = async ({ queryKey }) => {
const response = await fetch(
`https://jsonplaceholder.typicode.com${queryKey[0]}`,
{
method: 'GET',
},
)
return response.json()
}
// provide the default query function to your app via the query client
const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryFn: defaultQueryFn,
},
},
})
function App() {
const [postId, setPostId] = createSignal(-1)
return (
As you visit the posts below, you will notice them in a loading state
the first time you load them. However, after you return to this list and
click on any posts you have already visited again, you will see them
load instantly and background refresh right before your eyes!{' '}
(You may need to throttle your network speed to simulate longer
loading sequences)
-1} fallback={}>
)
}
function Posts(props: { setPostId: Setter }) {
// All you have to do now is pass a key!
const state = useQuery(() => ({ queryKey: ['/posts'] }))
return (
Posts
Loading...Error: {(state.error as Error).message}
<>
)
}
function Post(props: { postId: number; setPostId: Setter }) {
// You can even leave out the queryFn and just go straight into options
const state = useQuery(() => ({
queryKey: [`/posts/${props.postId}`],
enabled: !!props.postId,
}))
return (
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/components/post-viewer.tsx
================================================
import { useQuery } from '@tanstack/solid-query'
import { resetErrorBoundaries } from 'solid-js'
import { createSignal } from 'solid-js'
import { For } from 'solid-js'
import { Example } from './example'
import { QueryBoundary } from './query-boundary'
import type { Component } from 'solid-js'
import { fetchPost } from '~/utils/api'
export interface PostViewerProps {
deferStream?: boolean
sleep?: number
simulateError?: boolean
}
export const PostViewer: Component = (props) => {
const [simulateError, setSimulateError] = createSignal(props.simulateError)
const [postId, setPostId] = createSignal(1)
const query = useQuery(() => ({
queryKey: ['posts', postId()],
queryFn: () =>
fetchPost({
postId: postId(),
sleep: props.sleep,
simulateError:
simulateError() || (simulateError() !== false && postId() === 5),
}),
deferStream: props.deferStream,
throwOnError: true,
}))
return (
{/* NOTE: without this extra wrapping div, for some reason solid ends up printing two errors... feels like a bug in solid. */}
loading post...
}
errorFallback={(err, retry) => (
{err.message}
)}
>
{(posts) => (
{(post) => (
[post {postId()}] {post.title}
{post.body}
)}
)}
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/components/query-boundary.tsx
================================================
import { ErrorBoundary, Match, Suspense, Switch, children } from 'solid-js'
import type { UseQueryResult } from '@tanstack/solid-query'
import type { JSX } from 'solid-js'
export interface QueryBoundaryProps {
query: UseQueryResult
/**
* Triggered when the data is initially loading.
*/
loadingFallback?: JSX.Element
/**
* Triggered when fetching is complete, but the returned data was falsey.
*/
notFoundFallback?: JSX.Element
/**
* Triggered when the query results in an error.
*/
errorFallback?: (err: Error, retry: () => void) => JSX.Element
/**
* Triggered when fetching is complete, and the returned data is not falsey.
*/
children: (data: Exclude) => JSX.Element
}
/**
* Convenience wrapper that handles suspense and errors for queries. Makes the results of query.data available to
* children (as a render prop) in a type-safe way.
*/
export function QueryBoundary(props: QueryBoundaryProps) {
return (
props.errorFallback ? (
props.errorFallback(err, async () => {
await props.query.refetch()
reset()
})
) : (
)}
{props.children(
props.query.data as Exclude,
)}
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/components/user-info.tsx
================================================
import { useQuery } from '@tanstack/solid-query'
import { createSignal } from 'solid-js'
import { Example } from './example'
import { QueryBoundary } from './query-boundary'
import type { Component } from 'solid-js'
import { fetchUser } from '~/utils/api'
export interface UserInfoProps {
deferStream?: boolean
sleep?: number
simulateError?: boolean
staleTime?: number
gcTime?: number
}
export const userInfoQueryOpts = (props?: UserInfoProps) => ({
queryKey: ['user'],
queryFn: () => fetchUser(props),
deferStream: props?.deferStream,
staleTime: props?.staleTime,
gcTime: props?.gcTime,
throwOnError: true,
})
export const UserInfo: Component = (props) => {
const [simulateError, setSimulateError] = createSignal(props.simulateError)
const query = useQuery(() =>
userInfoQueryOpts({ ...props, simulateError: simulateError() }),
)
return (
loading user...}
errorFallback={(err, retry) => (
{err.message}
)}
>
{(user) => (
<>
id: {user.id}
name: {user.name}
queryTime: {user.queryTime}
)}
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/[...404].tsx
================================================
import { Title } from '@solidjs/meta'
import { HttpStatusCode } from '@solidjs/start'
export default function NotFound() {
return (
Not Found
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/batch-methods.tsx
================================================
import { notifyManager, useQuery } from '@tanstack/solid-query'
import { createSignal } from 'solid-js'
import { QueryBoundary } from '~/components/query-boundary'
function sleep(milliseconds: number) {
return new Promise((res) => setTimeout(res, milliseconds))
}
function spin(milliseconds: number) {
const start = performance.now()
while (performance.now() - start <= milliseconds) {
// do nothing
}
}
async function sayHello(name: string) {
console.info('[api] sayHello.start')
await sleep(500)
// make the layout shift more obvious, it doesn't always happen
console.time('[api] sayHello.spin')
spin(20)
console.timeEnd('[api] sayHello.spin')
console.info('[api] sayHello.end')
return `Hello ${name}`
}
export default function BatchMethods() {
const [count, setCount] = createSignal(0)
const hello = useQuery(() => ({
queryKey: ['hello', count()] as const,
queryFn: ({ queryKey: [_, count] }) => sayHello(`solid ${count}`),
}))
return (
{(data) =>
{data}
}
Something below to demonstrate layout shift
Due to the way solidjs handles updates, sometimes the updating of a
query results in DOM modifications triggering a rerender twice. This is
perceived as a glitch in the layout of the webpage that usually lasts
for one frame. By using another batching strategy in the browser,
instead of the default setTimeout one, we can mitigate this issue. Try
out requestAnimationFrame or queueMicrotick.
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/deferred.tsx
================================================
import { Title } from '@solidjs/meta'
import { PostViewer } from '~/components/post-viewer'
import { UserInfo } from '~/components/user-info'
export default function Deferred() {
return (
Solid Query - Deferred
Solid Query - Deferred Example
Both queries are configured with deferStream=true, so the server will
not start streaming HTML to the client until the queries have
resolved. In this case we are not really taking advantage of streaming
- this mimics traditional renderAsync + Suspense behavior. Note how
the green bar in the devtools is much larger now - the client does not
start receiving any information until 2+ seconds (both queries
resolve).
Clients with javascript disabled will see the resolved state for both
queries. (try turning off javascript and reloading this page)
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/hydration.tsx
================================================
import { useQuery } from '@tanstack/solid-query'
import { Suspense, createSignal } from 'solid-js'
import { NoHydration } from 'solid-js/web'
import { Title } from '@solidjs/meta'
import type { UseQueryResult } from '@tanstack/solid-query'
import { fetchUser } from '~/utils/api'
export default function Hydration() {
const query = useQuery(() => ({
queryKey: ['user'],
queryFn: () => fetchUser({ sleep: 500 }),
deferStream: true,
}))
const [initialQueryState] = createSignal(JSON.parse(JSON.stringify(query)))
return (
Solid Query - Hydration
Solid Query - Hydration Example
Lists the query state as seen on the server, initial render on the
client (right after hydration), and current client value. Ideally, if
SSR is setup correctly, these values are exactly the same in all three
contexts.
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/index.tsx
================================================
import { Title } from '@solidjs/meta'
export default function Home() {
return (
Solid Query v5
Solid Query v5
This demo demonstrates how Solid Query can be used in SSR, with
streaming support. Use the links in the top left to navigate between the
various examples.
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/mixed.tsx
================================================
import { Title } from '@solidjs/meta'
import { PostViewer } from '~/components/post-viewer'
import { UserInfo } from '~/components/user-info'
export default function Mixed() {
return (
Solid Query - Mixed
Solid Query - Mixed Example
You may want to require that key queries resolve before the initial
HTML is streamed to the client, while allowing the rest of your
queries to stream to the client as they resolve. A common use case for
this is to populate SEO meta tags and/or social graph information for
unfurl scenarios such as sharing the page as a link in Slack.
In this example, the quick (100ms) user query has deferStream set to
true, while the more expensive post query (1000ms) is streamed to the
client when ready. Clients with javascript disabled will see the
resolved state for the user query, and the loading state for the post
query. (try turning off javascript and reloading this page)
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/prefetch.tsx
================================================
import { useQueryClient } from '@tanstack/solid-query'
import { isServer } from 'solid-js/web'
import { Title } from '@solidjs/meta'
import { UserInfo, userInfoQueryOpts } from '~/components/user-info'
export const route = {
load: () => {
const queryClient = useQueryClient()
// Prefetching the user info and caching it for 15 seconds.
queryClient.prefetchQuery(userInfoQueryOpts({ sleep: 500, gcTime: 15000 }))
},
}
export default function Prefetch() {
return (
Solid Query - Prefetch
Solid Query - Prefetch Example
SolidStart now supports link prefetching. This means that when a user
hovers over a link, the browser can prefetch the data for that page
before the user even clicks on the link. This can make navigating
around your app feel much faster.
To see this in action, go to the home page and reload the page. Then
hover over the "Prefetch" link in the navigation. You should see the
user data prefetch in the background and in the devtools. When you
click on the link, the page should load instantly.
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/streamed.tsx
================================================
import { Title } from '@solidjs/meta'
import { PostViewer } from '~/components/post-viewer'
import { UserInfo } from '~/components/user-info'
export default function Streamed() {
return (
Solid Query - Streamed
Solid Query - Streamed Example
HTML is streamed from the server ASAP, reducing key metrics such as
TTFB and TTI. Suspended queries are streamed to the client when they
resolve on the server. This is represented in your devtools by the
green and blue chunks of the waterfall.
Clients with javascript disabled will see the loading state for both
queries. (try turning off javascript and reloading this page)
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/routes/with-error.tsx
================================================
import { Title } from '@solidjs/meta'
import { PostViewer } from '~/components/post-viewer'
import { UserInfo } from '~/components/user-info'
export default function Streamed() {
return (
Solid Query - Errors
Solid Query - Errors
For more control over error handling, try leveraging the `Switch`
component and watching the reactive `query.isError` property. See
`compoennts/query-boundary.tsx` for one possible approach.
)
}
================================================
FILE: examples/solid/solid-start-streaming/src/utils/api.ts
================================================
interface PostData {
userId: number
id: number
title: string
body: string
}
const doSleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
export const fetchPost = async ({
postId,
simulateError,
sleep,
}: {
postId: number
simulateError?: boolean
sleep?: number
}) => {
console.info('[api] fetchPost.start', { postId, sleep, simulateError })
let response
if (!simulateError) {
response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postId}`,
).then((res) => res.json())
}
// simulate extra latency to make things like streaming behavior more clear
if (sleep) {
await doSleep(sleep)
}
console.info('[api] fetchPost.done', { postId, sleep, simulateError })
if (simulateError) {
throw new Error('API request to get post was not OK')
}
return [response] as PostData[]
}
export const fetchUser = async ({
sleep,
simulateError,
}: { sleep?: number; simulateError?: boolean } = {}) => {
console.info('[api] fetchUser.start', { sleep, simulateError })
if (sleep) {
await doSleep(sleep)
}
console.info('[api] fetchUser.done', { sleep, simulateError })
if (simulateError) {
throw new Error('API request to get user was not OK')
}
return {
id: 'abc',
name: `john doe`,
queryTime: Date.now(),
}
}
================================================
FILE: examples/svelte/load-more-infinite-scroll/README.md
================================================
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn` or `bun install`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
================================================
FILE: examples/svelte/load-more-infinite-scroll/package.json
================================================
{
"name": "@tanstack/query-example-svelte-load-more-infinite-scroll",
"private": true,
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@tanstack/svelte-query": "^5.89.0",
"@tanstack/svelte-query-devtools": "^5.89.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^6.1.0",
"@sveltejs/kit": "^2.42.2",
"@sveltejs/vite-plugin-svelte": "^5.1.1",
"svelte": "^5.39.3",
"svelte-check": "^4.3.1",
"typescript": "5.8.3",
"vite": "^6.3.6"
}
}
================================================
FILE: examples/svelte/load-more-infinite-scroll/svelte.config.js
================================================
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
},
}
export default config
================================================
FILE: examples/svelte/load-more-infinite-scroll/tsconfig.json
================================================
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}
================================================
FILE: examples/svelte/load-more-infinite-scroll/vite.config.ts
================================================
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [sveltekit()],
})
================================================
FILE: examples/svelte/load-more-infinite-scroll/.gitignore
================================================
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
================================================
FILE: examples/svelte/load-more-infinite-scroll/src/app.css
================================================
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
.card {
padding: 2em;
}
main {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
================================================
FILE: examples/svelte/load-more-infinite-scroll/src/app.d.ts
================================================
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
}
export {}
================================================
FILE: examples/svelte/load-more-infinite-scroll/src/app.html
================================================
%sveltekit.head%
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click
on any posts you have already visited again, you will see them load
instantly and background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/vue/2.6-basic/src/main.ts
================================================
import Vue from 'vue'
import VueCompositionApi, { createApp, h } from '@vue/composition-api'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
Vue.use(VueCompositionApi)
Vue.use(VueQueryPlugin)
createApp({
render() {
return h(App)
},
}).mount('#app')
================================================
FILE: examples/vue/2.6-basic/src/Post.vue
================================================
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click
on any posts you have already visited again, you will see them load
instantly and background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/vue/2.7-basic/src/main.ts
================================================
import Vue, { h } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
Vue.use(VueQueryPlugin)
var app = new Vue({
el: '#app',
render: () => {
return h(App)
},
})
================================================
FILE: examples/vue/2.7-basic/src/Post.vue
================================================
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click
on any posts you have already visited again, you will see them load
instantly and background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/vue/basic/src/main.ts
================================================
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
createApp(App).use(VueQueryPlugin).mount('#app')
================================================
FILE: examples/vue/basic/src/Post.vue
================================================
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click
on any posts you have already visited again, you will see them load
instantly and background refresh right before your eyes!
You will also notice, that after some time the name of the author gets
loaded. This Data is not directly included in the
/post/id response but gets fetched when the post gets loaded
from its userId.
(You may need to throttle your network speed to simulate longer loading
sequences)
================================================
FILE: examples/vue/dependent-queries/src/main.ts
================================================
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'
import App from './App.vue'
createApp(App).use(VueQueryPlugin).mount('#app')
================================================
FILE: examples/vue/dependent-queries/src/Post.vue
================================================
As you visit the posts below, you will notice them in a loading state the
first time you load them. However, after you return to this list and click
on any posts you have already visited again, you will see them load
instantly and background refresh right before your eyes!
(You may need to throttle your network speed to simulate longer loading
sequences)
