Data fetching - Conditional Logic
Using conditional logic to deal with fetch requests.
When data is fetched from components, that might be done either directly inside the component's code (e.g. inside a lifecycle or useEffect hook), or from an external service/hook that does it and returns the data. Let's say our
RestaurantSection component calls a method
getRestaurants that looks somewhat like this:
We can add some logic there to conditionally return the data either from the real backend or from mocks, depending on where the component is running. Storybook provides a
STORYBOOK environment variable to help us check whether the code is being run in Storybook or not.
The method would look like this:
By doing this, our component would not request anything from the backend services when calling that method while in Storybook. Instead, it would just receive the mock data. There would be no need to change any code in the component, it would just work!
You could also use the same approach when running your tests, so the mocked data would be returned either if the component is rendering on Storybook or via your tests (for instance
process.env.NODE_ENV === 'test').
To achieve that, you can create a service that has the same methods and signatures as the one that calls the real backend data, but then just return mock data instead. You can use Typescript interfaces to make sure that those APIs follow the same structure. Applying this concept in the previous example, here's what it would look like:
Seeing it in action in our project#