From 8ddebc664093260362ca05e0ac77d35de91e868c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Curley?= Date: Sat, 11 Jan 2025 18:55:57 +0000 Subject: [PATCH] docs(react-query): highlight per component select pattern for query options (#8522) * docs(react-query): per component select pattern highlight per component select pattern for query options * Update docs/framework/react/guides/query-options.md --------- Co-authored-by: Dominik Dorfmeister --- docs/framework/react/guides/query-options.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index 4d02eea53e..74dee3930b 100644 --- a/docs/framework/react/guides/query-options.md +++ b/docs/framework/react/guides/query-options.md @@ -32,3 +32,18 @@ queryClient.setQueryData(groupOptions(42).queryKey, newGroups) [//]: # 'Example1' For Infinite Queries, a separate [`infiniteQueryOptions`](../reference/infiniteQueryOptions.md) helper is available. + +You can still override some options at the component level. A very common and useful pattern is to create per-component [`select`](../guides/render-optimizations.md#select) functions: + +[//]: # 'Example2' + +```ts +// Type inference still works, so query.data will be the return type of select instead of queryFn + +const query = useQuery({ + ...groupOptions(1), + select: (data) => data.groupName, +}) +``` + +[//]: # 'Example2'