refactor(coral): Replace use of `useOutletContext` by a `query` hook independent from`react-router` context
- 主要语言
- Java
- 星标
- 195
- 派生
- 77
- 平均合并
- 8 天 9 小时
- 30 天内合并 PR
- 1
描述
# What happened?
We are defining a pretty large context through the `useOutletContext` hook provided by `react-router`, both in [`TopicDetails`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/TopicDetails.tsx#L207-L217) and [`ConnectorDetails`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/connectors/details/ConnectorDetails.tsx#L213-L217).
We then initialize this context with data in [`TopicOverviewResourceTabs`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/components/TopicDetailsResourceTabs.tsx#L123-L138) and [`ConnectorOverviewResourceTabs.tsx`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/connectors/details/components/ConnectorOverviewResourcesTabs.tsx#L104-L114).
We finally use this data wherever we need it by calling the context hook ([example](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/details/documentation/TopicDocumentation.tsx#L37))
This is a little convoluted, and leads to confusion. Additionally, relying on `react-router` for this kind of data business logic seems unfocused, as we also use `@tanstack/query`, which is much more flexible and powerful.
# What should happen next?
We would want to define `useTopicDetails` and `useConnectorDetails` as hooks wrapping a series of `useQuery` (or one `useQueries`), which would then return the data we need in a more straightforward way. An example of this kind of approach in the codebase [`useExtendedEnvironments`](https://github.com/Aiven-Open/klaw/blob/db0aa9f71f51f9f0c70723c87cef42a83168405b/coral/src/app/features/topics/acl-request/queries/useExtendedEnvironments.tsx) which compose several API calls.
贡献指南
评估
这个 Issue 还没有评估数据。