[FEATURE] Adoption of React Query

[jerensl]

Why do we need this improvement?

Background

Fetching data is one of the very complex problems in the react ecosystem, we have so many tools and frameworks trying and competing to tackle this problem.

How does NextJS handle this problem? They did this by aggressively caching everything & overwriting the fetch specification and introducing cache as the default behavior, that's why fetch in the server is not the same as fetch in browser API, but cache does not come for free cache has some nuance, and sometimes neglected performance, time walk past and NextJS regret this decision by introduce NextJS 15 which are cache has no longer default behavior

How will this change help?

Problems

So many things can be broken when fetching with useEffect+ useState from managing fetch lifecycle loading, error, etc., and dealing with cleanup function as a consequence of using useEffect.

By adding react-query it will also be managing the default behavior including some of what we mentioned above, what makes it more interesting is that it will also give configuration to change the default behavior and give the developer the power to manage our data.

What are the main benefits in the Modelina Codebase

It will reduce the complexity of data fetching in the Modelina playground and improve the speed of adding features in the Playground code generator from exponential(adding context and so on) to linear and also can potentially reduce the number of API calls in NextJS Api which also reduces cost.

Screenshots

No response

How could it be implemented/designed?

How it will be implemented

It will be implemented in the playground, and extracting fetch to separate files. We also need mutation to perform CRUD

We also need to discuss whether we want the first initial code in Playground to be fetched ahead of time/during built time to reduce cost by using prefetching

Reference

https://ui.dev/why-react-query https://tanstack.com/query/v5/docs/framework/react/guides/request-waterfalls

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• [X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read the Contributing Guidelines

Are you willing to work on this issue?

None

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[catosaurusrex2003]

I would love to work on this. I looked into the code and I can only find react query being usefull here as mutation

Is there a particular part of the codebase where you see React Query being useful for data fetching (not just mutations) ?