I have decided to use a service layer to manage my API/Server calls in my React app. I’m using Tanstack Query (useQuery and useMutation) in my components, and API context, but really want to keep a maximum of separation, mainly between service layer and the reste of the flow;

Here is my current approach:

Creating a Global Feature Context: I have a context (let’s call it TanstackQueryContext).
Provider as a Data Provider: The provider focuses on one mission: sharing this context with components. Each component (TSX file) uses the useContext hook to get updates from the provider.
Inversion of Control: The Tanstack Query hooks import and use the service layer interface to manage API calls.

Is this architecture correct? or may be there are better ways to ensure such separation and decoupling?

Here is my current approach:

Creating a Global Feature Context: I have a context (let’s call it TanstackQueryContext).
Provider as a Data Provider: The provider focuses on one mission: sharing this context with components. Each component (TSX file) uses the useContext hook to get updates from the provider.
Inversion of Control: The Tanstack Query hooks import and use the service layer interface to manage API calls.

Is this architecture correct? or may be there are better ways to ensure such separation and decoupling?

Thank you in advance