The latest articles on DEV Community by MDFC (@lucidmdfc). https://dev.to/lucidmdfc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1399105%2F4bd76886-9dec-4967-b459-0bdde0f6cbe5.jpeg https://dev.to/lucidmdfc en MDFC Sun, 19 May 2024 15:12:21 +0000 https://dev.to/lucidmdfc/service-layer-with-tanstack-and-contexte-api-1b02 https://dev.to/lucidmdfc/service-layer-with-tanstack-and-contexte-api-1b02 <p>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 an API context. I aim to maintain maximum separation, especially between the service layer and the rest of the flow. Here is my current approach:</p> <p>1 Creating a Specific Feature Context: I have a context (let's call it TanstackQueryContext).</p> <p>2 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. Notice: TSX will not directly import Custom Hooks in this case</p> <p>3 Inversion of Control: The Tanstack Query hooks import and use the service layer interface to manage API calls.</p> <p>Is this approach Healthy and enough? Or may be it needs to be reviewed/coorect or replaced with a better one? Thank you in advance</p>