From bae2921387e62f3f8f77e0974eada90767c1028b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ciar=C3=A1n=20Curley?= Date: Fri, 10 Jan 2025 17:47:54 +0000 Subject: [PATCH 1/2] docs(react-query): per component select pattern highlight per component select pattern for query options --- docs/framework/react/guides/query-options.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index 4d02eea53e5..043097b935e 100644 --- a/docs/framework/react/guides/query-options.md +++ b/docs/framework/react/guides/query-options.md @@ -32,3 +32,16 @@ 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: + +```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' From f241230439e18f142a0c3cf28a6707d6f8527a18 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sat, 11 Jan 2025 17:59:54 +0100 Subject: [PATCH 2/2] Update docs/framework/react/guides/query-options.md --- docs/framework/react/guides/query-options.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/framework/react/guides/query-options.md b/docs/framework/react/guides/query-options.md index 043097b935e..74dee3930ba 100644 --- a/docs/framework/react/guides/query-options.md +++ b/docs/framework/react/guides/query-options.md @@ -35,6 +35,8 @@ For Infinite Queries, a separate [`infiniteQueryOptions`](../reference/infiniteQ 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