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 還沒有評估資料。