Skip to main content

React Router Loader

Context and Problem Statement​

Considering the integration of React Router DOM v6 with Apollo Client for data loading, we encounter challenges with using hooks like useQuery within the loader function, necessitating direct client.query usage. This method complicates the distinct roles of caching between the router and Apollo provider.

Decision Drivers​

  • Complexity in rewriting existing data fetching setups to accommodate router-based loading.
  • Unclear benefits of integrating data loading within the router context.
  • Confusion and potential conflicts between router and Apollo provider caching mechanisms.

Considered Options​

  • Integrate React Router Loader: Implement loader functions in routes to handle data fetching.
  • Retain Current Apollo Client Setup: Continue using Apollo Client's useQuery outside the routing context.
  • Hybrid Approach: Use a combination of both methods selectively based on specific needs.

Decision Outcome​

Chosen option: Retain Current Apollo Client Setup, because integrating the React Router Loader would require extensive rewriting with unclear benefits, and it blurs the lines between routing and data management responsibilities, which could lead to maintenance challenges and cache consistency issues.

Links/Resources​