SIGN IN SIGN UP
TanStack / query UNCLAIMED

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

48949 0 0 TypeScript
---
id: streamedQuery
title: streamedQuery
---
`streamedQuery` is a helper function to create a query function that streams data from an [AsyncIterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator). Data will be an Array of all the chunks received. The query will be in a `pending` state until the first chunk of data is received, but will go to `success` after that. The query will stay in fetchStatus `fetching` until the stream ends.
To see `streamedQuery` in action, take a look at our chat example in the [examples/react/chat directory on GitHub](https://github.com/TanStack/query/tree/main/examples/react/chat).
2025-04-25 10:37:57 +02:00
```tsx
2025-04-25 10:37:57 +02:00
import { experimental_streamedQuery as streamedQuery } from '@tanstack/react-query'
const query = queryOptions({
queryKey: ['data'],
queryFn: streamedQuery({
streamFn: fetchDataInChunks,
}),
})
```
2025-04-25 10:37:57 +02:00
> Note: `streamedQuery` is currently marked as `experimental` because we want to gather feedback from the community. If you've tried out the API and have feedback for us, please provide it in this [GitHub discussion](https://github.com/TanStack/query/discussions/9065).
**Options**
- `streamFn: (context: QueryFunctionContext) => Promise<AsyncIterable<TData>>`
- **Required**
- The function that returns a Promise of an AsyncIterable with data to stream in.
- Receives a [QueryFunctionContext](../framework/react/guides/query-functions.md#queryfunctioncontext)
- `refetchMode?: 'append' | 'reset' | 'replace'`
- Optional
- Defines how refetches are handled.
- Defaults to `'reset'`
- When set to `'reset'`, the query will erase all data and go back into `pending` state.
- When set to `'append'`, data will be appended to existing data.
2025-05-24 09:22:00 +02:00
- When set to `'replace'`, all data will be written to the cache once the stream ends.
feat(query-core): add custom reducer support to streamedQuery (#9532) * feat(query-core): add custom reducer support to streamedQuery Replace maxChunks parameter with flexible reducer function that delegates data aggregation to consumer code. This provides full control over how streamed chunks are combined into the final data structure. Add support for custom placeholderData that works seamlessly with the reducer function, allowing initialization of complex data types beyond simple arrays. https://github.com/TanStack/query/discussions/9065 BREAKING CHANGE: The maxChunks parameter has been removed from streamedQuery. Use a custom reducer function to control data aggregation behavior instead. * ci: apply automated fixes * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * removed personal vscode workspace file * updated documentation * fix(docs): clarify reducer function description in streamedQuery documentation * ci: apply automated fixes * fix(tests): Code Review :: update streamedQuery tests to use correct initialValue type --------- Co-authored-by: gobbimar <marco.gobbi@adidas.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-09-04 11:03:41 +02:00
- `reducer?: (accumulator: TData, chunk: TQueryFnData) => TData`
2025-05-24 09:22:00 +02:00
- Optional
feat(query-core): add custom reducer support to streamedQuery (#9532) * feat(query-core): add custom reducer support to streamedQuery Replace maxChunks parameter with flexible reducer function that delegates data aggregation to consumer code. This provides full control over how streamed chunks are combined into the final data structure. Add support for custom placeholderData that works seamlessly with the reducer function, allowing initialization of complex data types beyond simple arrays. https://github.com/TanStack/query/discussions/9065 BREAKING CHANGE: The maxChunks parameter has been removed from streamedQuery. Use a custom reducer function to control data aggregation behavior instead. * ci: apply automated fixes * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * removed personal vscode workspace file * updated documentation * fix(docs): clarify reducer function description in streamedQuery documentation * ci: apply automated fixes * fix(tests): Code Review :: update streamedQuery tests to use correct initialValue type --------- Co-authored-by: gobbimar <marco.gobbi@adidas.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-09-04 11:03:41 +02:00
- Reduces streamed chunks (`TQueryFnData`) into the final data shape (`TData`).
- Default: appends each chunk to the end of the accumulator when `TData` is an array.
- If `TData` is not an array, you must provide a custom `reducer`.
- `initialValue?: TData = TQueryFnData`
- Optional
- Defines the initial data to be used while the first chunk is being fetched, and it is also returned when the stream yields no values.
feat(query-core): add custom reducer support to streamedQuery (#9532) * feat(query-core): add custom reducer support to streamedQuery Replace maxChunks parameter with flexible reducer function that delegates data aggregation to consumer code. This provides full control over how streamed chunks are combined into the final data structure. Add support for custom placeholderData that works seamlessly with the reducer function, allowing initialization of complex data types beyond simple arrays. https://github.com/TanStack/query/discussions/9065 BREAKING CHANGE: The maxChunks parameter has been removed from streamedQuery. Use a custom reducer function to control data aggregation behavior instead. * ci: apply automated fixes * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * feat(query-core): require initialValue when using custom reducer in streamedQuery Add type safety by making initialValue mandatory when providing a custom reducer function. This prevents runtime errors and ensures proper data initialization for custom data structures beyond simple arrays. Use conditional types to enforce the relationship between reducer and initialValue parameters, maintaining backward compatibility for simple array-based streaming while requiring explicit initialization for custom reducers. BREAKING CHANGE: When using a custom reducer function with streamedQuery, the initialValue parameter is now required and must be provided. * removed personal vscode workspace file * updated documentation * fix(docs): clarify reducer function description in streamedQuery documentation * ci: apply automated fixes * fix(tests): Code Review :: update streamedQuery tests to use correct initialValue type --------- Co-authored-by: gobbimar <marco.gobbi@adidas.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-09-04 11:03:41 +02:00
- It is mandatory when custom `reducer` is provided.
- Defaults to an empty array.