Dashboards provide an interactive and efficient manner to view and analyze data. This usually helps organizations to understand trends and predict outcomes.  Developers often look for the fastest way to build dashboards using libraries that provide them with all underlying sets of tools, so that they must only worry about the business logic and the other technical difficulties that are handled by the library itself.

React is one such framework which wraps up the complexity of an application in one single concept called “component”. It also provides some helper libraries which can be used to further cut down the technical difficulties and let React handle all the logic

One such library is React Query, which is gaining more popularity among the developers and becoming their most preferred choice as a data fetching library. This becomes an excellent starting point when you endeavour to create a custom dashboard that can truly meet your specific business goals. 

Table of Contents

Creating dashboards with React Query and GraphQL

React Query and GraphQL together makes the whole process of creating dashboards faster. Following points summarize the advantages of building dashboards with React query and GraphQL:

• Using both React Query and GraphQL data can be fetched efficiently and maintained easily. Complex state management can be avoided for data as there will be no redundant data because of GraphQL and their state can be managed using react query.
• Following features of GraphQL helps in managing the APIs
  ○ It provides efficient data fetching. It’s straightforward in GraphQL to add new types and fields to your API and the same can be used easily on the client’s end. This helps in designing new features quickly.
  ○ It has good sets of dev tools which can be used to read the schema efficiently.
  ○ It is best for complex systems and microservices.
• You don’t have to manage the loading, success, and error server states manually, as this is handled by React Query itself. Dashboards can be auto refreshed, and the debugging process is simple as very less code is written from scratch. Overall, 15% of development time is saved as the states are managed by React Query itself.
• Overall, together they complement each other and provide a very good developer experience.

Sample Application

URL: https://codesandbox.io/s/covid-dashboard-zomgoh?file=/src/App.jsx

React Query Benefits

Managing data state using react query

The server state management becomes easy with React Query. Instead of handling all the states manually, we can simply fetch the states maintained by React Query and use them to implement our high-level logic. Below snippets show how the logic of an API call can be managed in a few lines of code.

function example() {
   const { isLoading, error, data } = useQuery('query-key', fetchData);

   if(isLoading) { /* return loading view */ }

   if(error) { /* return error view */ }

   return (
       <div>
           {/* Use data to show appropriate view */}
       </div>
   )
}

Fig. 2 – Code Snippet for an API Call

Without React Query, we will have to manage the loading, error states by writing extra logic to set/update them when required.

Auto Refetching, Disabling/Pausing queries

Auto data refreshing has become a very important feature for dashboards, especially the live ones. With React query these things are handled by default. On component mount, window refresh or tab focus, the queries are called again automatically, and data is updated. We don’t have to worry about the data being in a stale state, as React Query automatically updates it.

Along with this there are ways to pause/disable these refetch according to our need using simple attribute values.

Parallel Queries

Fetching queries concurrently is also an easy task with React Query. Using the useQuery and useInfiniteQuery hooks, any number of queries can be called parallelly.

Along with these, there are other useful features like Automatic Garbage Collection, Auto Caching, SSR Support among others that makes this library a very useful and powerful tool for the developers.

React Query Disadvantages

React Query continue to gain popularity among developers, however, here are some drawbacks that must be considered –

• React Query is based on the concept that client and server states should be maintained separately. This can create problems when these two states start interacting with each other in a complex UI project.
• Data updating in a React Query application can be erroneous, at times. While updating Data using mutations, for each update the invalidate Queries hook needs to be called (with that specific query key). In a large project where multiple queries are being called, maintaining the query key can be quite a work as well as invalidating process is prone to errors.

Summary

In the current data driven world, the whole process of fetching and updating data in dashboards is made simple and faster by React Query. It makes our life easier as we must handle minimal logic ourselves. Over time React Query is becoming very popular among the developers, especially for fetching the GraphQL queries. It also has a dedicated dev tool which makes the development process easier.

Celestial Systems has many years of experience building scalable and futuristic applications for organizations that have unlocked value through better data visualization.