Skip to main content

Data and Api

Axios​

We prefer using axios in our codebase due to its simplicity, ease of use, and powerful features such as:

  • Automatic transformation of JSON data
  • Intercepting requests and responses
  • Canceling requests
  • Client-side support for protecting against XSRF

For more information on how to use axios, please refer to the official documentation: https://axios-http.com/docs/intro

Auto Generated API Client Libraries​

We use Auto Generated API Client Libraries to streamline the process of interacting with APIs. These libraries provide several benefits:

  • Consistency: Ensures that all API calls are made in a consistent manner, reducing the likelihood of errors.
  • Efficiency: Saves development time by automatically generating client code based on API specifications.
  • Maintainability: Simplifies updates when the API changes, as the client libraries can be regenerated to reflect the new API structure.
  • Type Safety: Provides type definitions and, CRUD Api functions, which help catch errors at compile time in TypeScript projects.

For more information on how to use Auto Generated API Client Libraries, please refer to the official documentation: Use API Client Libraries in applications

React Query​

1. Use Query Keys Effectively​

  • Use descriptive and unique query keys.
  • Include parameters in the query key to differentiate similar queries.

Example:

const { data } = useQuery({
  queryKey: ['fund-catalog-details', isin],
  queryFn: () => getV1CatalogIsinDetails(isin)
});

2. Set Query Defaults​

  • Use QueryClient to set default options for queries.
  • Define default stale time, cache time, and retry behavior.

3. Handle Errors Gracefully​

  • Use onError callbacks to handle errors.
  • Display user-friendly error messages.

4. Optimize Data Fetching​

  • Use staleTime to reduce unnecessary refetches.
  • Prefetch data when possible to improve user experience.

5. Use Mutations for Data Modifications​

  • Use useMutation for creating, updating, or deleting data.
  • Implement optimistic updates to improve perceived performance.

6. Leverage Query Invalidation​

  • Invalidate queries after mutations to keep data fresh.
  • Use invalidateQueries to refetch data when necessary.

7. Implement Pagination and Infinite Queries​

  • Use useInfiniteQuery for infinite scrolling.
  • Manage pagination with getNextPageParam and fetchNextPage.

8. Utilize DevTools​

  • Use React Query Devtools for debugging and monitoring queries.
  • Enable Devtools in development mode for better insights.

alt text

9. Keep Queries Synchronized​

  • Use refetchOnWindowFocus and refetchOnReconnect to keep data up-to-date.
  • Adjust synchronization settings based on application needs.

10. Test Queries and Mutations​

  • Use React Query's testing utilities to test hooks.
  • Mock API responses to ensure reliable tests.

11. Use Selectors for Derived State​

  • Use the select option to transform data before it reaches the component.
  • Avoid unnecessary re-renders by selecting only the needed data.

12. Manage Query Cache Size​

  • Use cacheTime to control how long inactive queries stay in the cache.
  • Regularly clean up unused queries to optimize memory usage.

Bad Practices to Avoid​

  • Using non-descriptive or duplicate query keys.
  • Ignoring error handling and not providing user feedback.
  • Over-fetching data by not setting staleTime or cacheTime.
  • Not invalidating queries after mutations, leading to stale data.
  • Ignoring pagination and infinite query patterns for large datasets.
  • Not utilizing DevTools for debugging.
  • Failing to test queries and mutations, leading to unreliable code.
  • Allowing the query cache to grow indefinitely without cleanup.

For more detailed information, refer to the React Query Documentation.

By following these best practices and avoiding common pitfalls, you can effectively manage server state in your React applications using React Query.