patterns for encapsulating data-fetching within shared components

[ensconced]

I have a set of separate single-page applications, each of which has its own build process and RTK setup. I also have a library of components that are used across these apps. I am wondering about good approaches for handling data-fetching for these components.

Take for example a comments component, which would be used to perform various CRUD operations on a list of comments from a comments API. I can think of a few options for doing this, but would look like to know if there are better approaches I should consider.

Option 1.

Just do the data-fetching within each of the parent applications independently (using RTK query), and pass the relevant return values from the useQuery hooks (data, isFetching, isError) etc into the comments component, along with callbacks for carrying out mutations.

Option 2.

Handle the data-fetching & mutating entirely within the comments component. Possibly using its own completely independent RTK setup and redux store, or not using redux at all in these components and just using a lighter-weight data-fetching library e.g. swr.

Option 3

Create an api slice with createApi within the comments component and export the middleware and reducers, for the parent application to include them when configuring its store. This should work fine but it creates a bit more setup work on the side of the parent application.

Any other good contenders?