From 692d6b78ca3a33a0cabcaf69820ecf9c61e72009 Mon Sep 17 00:00:00 2001 From: Zelys Date: Tue, 24 Mar 2026 12:21:27 -0500 Subject: [PATCH] docs(solid,vue): port polling guide from React Adds polling guides for Solid Query and Vue Query using the ref/override system, pointing at the React guide as the source of truth. Solid overrides all useQuery examples to use the accessor function syntax. Vue overrides Example4 (QueryClient setup) to use VueQueryPlugin options. All other sections inherit directly from the React guide. Updates config.json to add the Polling nav entry for both frameworks, between Window Focus Refetching and Disabling/Pausing Queries. --- docs/config.json | 8 +++ docs/framework/solid/guides/polling.md | 68 ++++++++++++++++++++++++++ docs/framework/vue/guides/polling.md | 27 ++++++++++ 3 files changed, 103 insertions(+) create mode 100644 docs/framework/solid/guides/polling.md create mode 100644 docs/framework/vue/guides/polling.md 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'