Migrating to react-query for fetching data

[ruddi10]

Currently, we have coded our own reusable fetch service for fetching data from the server but there might be some edge cases that are left out/ not handled efficiently like -

• Caching
• Deduping multiple requests for the same data into a single request
• Updating "out of date" data in the background
• Knowing when data is "out of date"
• Reflecting updates to data as quickly as possible
• Performance optimizations like pagination and lazy loading data
• Managing memory and garbage collection of server state
• Memoizing query results with structural sharing

So we can use react-query that will help us to achieve all this and will also -

• Help remove many lines of complicated and misunderstood code from your application and replace them with just a handful of lines of React Query logic.
• Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
• Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
• Potentially help you save on bandwidth and increase memory performance

[aaaaayushh]

Hello, I'd like to work on this if it's okay. Please guide me on how to proceed.
Thanks!

[ruddi10]

Hey @aaaaayushh I think going through how we fetch the data currently and then going through react-query documentation is a good way to get started with this.

[aaaaayushh]

Okay, I will get started right away thanks!

[aaaaayushh]

Hello, I've explored quite a bit on how to integrate react query into the dashboard and replace the useFetch function that is currently being used. I've tried getting the barebone requests working with react query, but am facing some issues and would appreciate some help.
When making the request with react query, I'm getting a 400 response and the following message on the backend console:

level=warn ts=2021-10-24T03:13:27.312Z caller=api.go:93 component=api msg="ping: path not found at ./storage/_ping.json"

level=warn ts=2021-10-24T03:13:27.312Z caller=api.go:102 component=api msg="jitter: path not found at ./storage/_jitter.json"

Is this an issue with the backend configuration on my local machine or is there a problem with react query here? Any help is really appreciated, thanks.

[rijusougata13]

hi @ruddi10 @aquibbaig. I am facing this issue

level=warn ts=2021-11-13T21:12:47.211Z caller=api.go:93 component=api msg="ping: path not found at ./storage/_ping.json"
level=warn ts=2021-11-13T21:12:47.211Z caller=api.go:102 component=api msg="jitter: path not found at ./storage/_jitter.json"
level=error ts=2021-11-13T21:13:34.050Z caller=main.go:161 msg="running machine" error="running machine: job: sample-google: error running ping : read ip4 0.0.0.0: wsarecvfrom: A message sent on a datagram socket was larger than the internal message buffer or some other network limit, or the buffer used to receive a datagram into was smaller than the datagram itself."
exit status 1
make: *** [Makefile:19: run] Error 1

and my backend server crashes. Any solution for this?

[aquibbaig]

hey @rijusougata13, i do not think this is the right place to discuss a bug or general purpose error, please revert back to the gitter channel or open a new issue to start the discussion

[MohdImran001]

@aquibbaig and @ruddi10, can I work on it ?

[ruddi10]

@MohdImran001 sure