diff --git a/docs/config.json b/docs/config.json index 54eeb77e838..0fe26e26c6f 100644 --- a/docs/config.json +++ b/docs/config.json @@ -399,6 +399,10 @@ "label": "Window Focus Refetching", "to": "framework/solid/guides/window-focus-refetching" }, + { + "label": "Polling", + "to": "framework/solid/guides/polling" + }, { "label": "Disabling/Pausing Queries", "to": "framework/solid/guides/disabling-queries" @@ -536,6 +540,10 @@ "label": "Window Focus Refetching", "to": "framework/vue/guides/window-focus-refetching" }, + { + "label": "Polling", + "to": "framework/vue/guides/polling" + }, { "label": "Disabling/Pausing Queries", "to": "framework/vue/guides/disabling-queries" diff --git a/docs/framework/solid/guides/polling.md b/docs/framework/solid/guides/polling.md new file mode 100644 index 00000000000..4797df083e1 --- /dev/null +++ b/docs/framework/solid/guides/polling.md @@ -0,0 +1,68 @@ +--- +id: polling +title: Polling +ref: docs/framework/react/guides/polling.md +replace: { '@tanstack/react-query': '@tanstack/solid-query' } +--- + +[//]: # 'Example1' + +```tsx +useQuery(() => ({ + queryKey: ['prices'], + queryFn: fetchPrices, + refetchInterval: 5_000, +})) +``` + +[//]: # 'Example1' +[//]: # 'Example2' + +```tsx +useQuery(() => ({ + queryKey: ['job', jobId], + queryFn: () => fetchJobStatus(jobId), + refetchInterval: (query) => { + if (query.state.data?.status === 'complete') return false + return 2_000 + }, +})) +``` + +[//]: # 'Example2' +[//]: # 'Example3' + +```tsx +useQuery(() => ({ + queryKey: ['portfolio'], + queryFn: fetchPortfolio, + refetchInterval: 30_000, + refetchIntervalInBackground: true, +})) +``` + +[//]: # 'Example3' +[//]: # 'Example6' + +```tsx +useQuery(() => ({ + queryKey: ['prices', tokenAddress], + queryFn: () => fetchPrice(tokenAddress), + refetchInterval: 15_000, + enabled: !!tokenAddress && !isPaused, +})) +``` + +[//]: # 'Example6' +[//]: # 'Example7' + +```tsx +useQuery(() => ({ + queryKey: ['chainStatus'], + queryFn: fetchChainStatus, + refetchInterval: 10_000, + networkMode: 'always', +})) +``` + +[//]: # 'Example7' diff --git a/docs/framework/vue/guides/polling.md b/docs/framework/vue/guides/polling.md new file mode 100644 index 00000000000..0f5439078e1 --- /dev/null +++ b/docs/framework/vue/guides/polling.md @@ -0,0 +1,27 @@ +--- +id: polling +title: Polling +ref: docs/framework/react/guides/polling.md +replace: { '@tanstack/react-query': '@tanstack/vue-query' } +--- + +[//]: # 'Example4' + +```ts +import { VueQueryPlugin } from '@tanstack/vue-query' +import type { VueQueryPluginOptions } from '@tanstack/vue-query' + +const vueQueryPluginOptions: VueQueryPluginOptions = { + queryClientConfig: { + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + refetchInterval: 60_000, + }, + }, + }, +} +app.use(VueQueryPlugin, vueQueryPluginOptions) +``` + +[//]: # 'Example4'