You're on a long train journey - currently in the middle of nowhere. The rolling English hills allows your brain to relax. The intrusive programmer in your head, however, magicks up a solution to something you've been working on for a while. Laptop on. Hotspot on. IDE open. Run application ... Network Error - Failed to connect!
Ever since I was introduced to Mock Service Worker in React, I've made it a goal to ensure that all of my React apps work offline in preparation for the aforementioned inevitability. It allows you to be able to develop your app with a fixed dataset, meaning that it doesn't matter whether you have a network or not, whilst also decoupling the frontend and backend development processes.
Offline mocking also serves another, more important purpose: to ensure that everything can be tested, as one really shouldn't be touching the outside world when performing tests.
When looking how I could replicate this in Flutter, all of the resources I found at the time very much leaned towards solving network mocking for testing purposes only. However, I could not for the life of me find a way of doing this for general development! I wasn't too keen to use yet another package, especially as I already use
dio which supports interceptors, so I cooked up a solution.
Problem To Solve
I want to be able to return mocked data, in this case
for all network calls made to
example/path within my app.
Store The Response Data Locally
Firstly, I knew I'd need to store the response data somewhere, so I created a fixtures folder in my app. The file didn't have anything fancy in there, just a response I had copied from Chrome's network tab, and made into a
Create A New Interceptor To Perform The Mocking
Dio has a concept of Interceptors, which (as the name suggests) allow you to intercept all network requests that pass through Dio. I knew that I could utilise this to my advantage, as I had done something similar using the http_mock_adapter when testing. Why didn't I just use this as a solution? Well
http_mock_adapteris a simple to use mocking package for Dio intended to be used in tests.
I thought it best to just listen to what I was told!
Create A Mock
Next, we'll have to actually create a mock. Note, returnData can be anything that you want it to be - you know your application - but if a function is passed, the return data of the function will be sent back to your application.
Add The Interceptor
I opted to do this at the top of my application, meaning that I also wouldn't need to set it up for my tests.
MockInterceptor won't actually do anything until mocks are added, meaning that it is safe to add it here. However, I've added an environment variable check to determine whether I want to use the network, or to use my mocks.
And that's it! I can now develop my app completely offline as I get distracted by the happy sheep and cows flashing past my train window!