Separation of concerns design principle and Apollo Client declarative data fetching

Hello all,

tl;dr at the bottom

I am currently working on a personal project and I am trying to implement the separation of concerns design principle and I have an implementation question regarding network calls. For context, my current stack is react + typescript + redux + redux-saga + Apollo.

In principle, I want to make my components completely oblivious to what “network calls” are and how they are performed. This means that when I navigate to a page and I need data from the server, a network call is dispatched, the data are returned, stored to redux and then become available to the relevant components.

If I need the component to explicitly initiate the fetch request, I could have it dispatch a generic “fetchStuff” action, and then have a saga perform the request, then store the results, or dispatch a “fetch_stuff_failed” action to handle the error. Since my component just dispatches an action, it has no knowledge of how the call is performed (REST or graphQL, Axios or Apollo). It just dispatches an action and then it detects a change in a store connected variable.

Apollo has some hooks to handle queries and mutations namely the useQuery and useMutation hooks, which expose the “loading” or “error” variables to indicate the current state of my request, as well as the data. Don’t these hooks come in contrast with the separation of concerns principle? As I understand it, I have to import the relevant graphQL query into my component, then import the relevant Apollo hooks and then perform the call.

This means that my component “has knowledge” of both graphQL and Apollo, whereas in the first example, it only dispatches an action.

I know I can work around it by exposing the query and mutate methods of the apollo client and then actually create “.failed” types for all my network calls. I do wonder though if by doing this I deprive myself of some of Apollo’s biggest advantages.

tl;dr does Apollo’s declarative data fetching come in contrast with the separation of concerns design principle? Is there a compromise to be found between the two?