openapi-typescript and Storybook?

[matttk]

Is anybody using openapi-typescript with Storybook?

In our project, we are using axios and react-query for API requests and write stories in Storybook for most components, making full use of the testing feature. Currently, we are mocking API requests with axios-mock-adapter.

I've been working on a proof of concept with openapi-typescript, using openapi-react-query. Of course, this means that API requests would no longer go through axios, but, instead, openapi-fetch, meaning our current mocking solution won't cover any hook we write that uses openapi-react-query.

I tried the Mock API Request and Mock fetch() add-ons for Storybook, but I always came to the same problem in the end: the request for the endpoint that used openapi-fetch was not mocked for some reason. Then I re-read the docs and saw it's recommended to use MSW, so I set that up. As long as I am trying to mock the appropriate get request, I get a lot of errors in the console about failing to mock that rquest. (I originally got other failures but I found a work around about filtering out requests that don't start with "/api/" and that helped)

If I comment out my mock, there are no errors. If I put it back in, the console is filled with madness. If I try another story where there are no mocks, I can see my mock in preview.js for the auth token is working no problem, so MSW does work on some level. But as soon as I use the story with the mock for the request that uses openapi-fetch, everything goes wrong.

By the way, I have ruled out a conflict with axios-mock-adapter, because I deleted everything about it from the story in question and it had no effect.

tl;dr: I could try to give more details or set up some kind of test project, but before I go that deep, I am wondering if anybody is even using openapi-react-query and Storybook together, and, if so, what are you using to mock requests and did you have to implement any undocumented workarounds?