Frontend
Data Fetching

Data Fetching: React Query and the Connect Protocol

This page discusses the implementation of the Friend service in the context of its integration with React Query within our frontend applications. The 'Friend' service's name is inspired by the traditional Backend for Frontend (BFF) pattern, however the 'Friend' service adopts an entity-based approach, organizing its RPCs into multiple protobuf services, each centered around a specific entity. Friend RPCs are generally not organized to support specific screens. This structure is specifically designed to optimize the performance and user experience of our React-based applications (React Native, Next.js, and Tauri) to optimizing caching and time-to-interactive.

  1. Caching Strategy:

    • React Query is employed for its caching capabilities, though it does not automatically normalize data like GraphQL libraries.
    • We structure query keys around entities and unique record identifiers. This strategy promotes efficient cache reuse across different components and screens.

  2. Data Fetching and SWR:

    • The useQuery hook is used for data fetching, with a focus on leveraging React Query’s stale-while-revalidate (SWR) feature. This approach ensures that data is up-to-date while minimizing unnecessary network requests and percieved latency.

  3. Concurrent Requests and Performance:

    • Given the capabilities of HTTP/2, the potential increase in concurrent requests due to the entity-based approach is efficiently managed, ensuring high performance.
    • React Query’s caching mechanism plays a crucial role in reducing the perceived load time by providing immediate access to stale data while fresh data is fetched in the background.

  4. Reducing Time to Interactive:

    • The entity-based approach, combined with granular requests for each component, significantly reduces the time to interactive. Components dependent on slower SOA responses can display their own skeleton states, allowing other parts of the UI to load independently.
    • This method avoids the common issue of an entire page being stalled due to a single slow-loading component, thus offering a more fluid and responsive interface to the user.
FrontendDocs