elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.63k stars 8.23k forks source link

[Fleet] [Meta] Migrate Fleet app's data fetching to react-query #150767

Open kpollich opened 1 year ago

kpollich commented 1 year ago

In https://github.com/elastic/kibana/pull/146714, we migrated all data fetching in the Integrations UI application to use @tanstack/query (otherwise known as react-query). This issue is a place to track the follow-up work involved in migrating the remainder of the migration effort.

Essentially, we'll want to migrate all hooks in x-pack/plugins/fleet/public/hooks/use_request to use the new react-query helpers as specced out in the linked PR and in the dev docs writeup.

Ideally, when each of these hooks is migrated to react-query, its corresponding references should also be updated, and the outdated/unused references to the non-react-query implementation of the hook should be removed. This may not be possible in all cases, based on the number of references each hook has. It might be necessary to follow up a migration PR with another one to complete a given migration.

There are also a few one-off modules that use existing data fetching patterns outside of use_request/ which are tracked separately below.

This issue is broken up into task lists to make tackling individual migrations a little more approachable. We should try not to migrate the entire Fleet app at once.

## `use_request/` hooks

- [ ] [`agent_policy.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/agent_policy.ts)
- [ ] [`agents.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/agents.ts)
- [ ] [`app.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/app.ts)
- [ ] [`data_stream.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/data_stream.ts)
- [ ] [`download_source.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/download_source.ts)
- [ ] [`enrollment_api_keys.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/enrollment_api_keys.ts)
- [ ] [`epm.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/epm.ts)
- [ ] [`fleet_proxies.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/fleet_proxies.ts)
- [ ] [`fleet_server_hosts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/fleet_server_hosts.ts)
- [ ] [`health_check.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/health_check.ts)
- [ ] [`ingest_pipelines.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/ingest_pipelines.ts)
- [ ] [`k8s.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/k8s.ts)
- [ ] [`outputs.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/outputs.ts)
- [ ] [`package_policy.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/package_policy.ts)
- [ ] [`settings.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/settings.ts)
- [ ] [`setup.ts`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_request/setup.ts)
### Other hooks

- [ ] [`use_fleet_status`](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/hooks/use_fleet_status.tsx)
- [ ] 

It'd also be a good idea to evaluate file names and such as we go through this process. For example, does the folder name use_request really make the most sense to store all of these hooks?

elasticmachine commented 1 year ago

Pinging @elastic/fleet (Team:Fleet)

kpollich commented 1 year ago

Another part of this that I haven't had time to dive into is tracking down any hand-spun useEffect request chains, etc. RQ should make it easier to get rid of things like that.