React-Query data fetching with OpenAPI and Suspense

submited by
Style Pass
2023-09-14 13:30:05

Managing data fetching is a sometimes understated part of the frontend architecture. It can have huge effects on performance, but also developer experience (as well as sanity).

Handling mutations, errors, parallelization or request cancellations can create a lot of boilerplate, hard-to-maintain, and error-prone code, copied and pasted all over the place instead of being encapsulated. You wouldn’t let your business logic look like its seen better days, so why would you make an exception when doing calls to your API?

The library react-query offers a great solution for that problem. Learn about our approach of combining it with REST, OpenAPI and adding Suspense into the mix. You can use react-query with GraphQL as well, but I’ll be focusing on the REST / OpenAPI approach this time around.

You will get a battle tested, opinionated way of fetching data that is safely typed using standard specification. No more manual typing of server objects, no more manually typing out axios clients with inlined authorization headers and payload creation, no more writing boilerplate to handle loading, errors and such. Caching? It comes out of the box! So no unnecessary re-rendering when you fetch if your data hasn’t changed. Mutating something? Query data gets updated without refetching the query. And a lot, lot more..

Leave a Comment