Research other data fetching strategies in the frontend

[tillprochaska]

Some features in Aleph have quite complex UI interactions and are very interactive, for example network diagrams. Then there are many screens/views in Aleph, that are very simple in terms of interactivity - most of the time, we load some data from the API and display it. Sometimes users can even fill out a form and the contents get posted to the API :D

On a high level, this is more or less what we do:

• Redux (with redux-act and redux-thunk) is used for the main app store.
• We use Axios as an API/HTTP client.
• We kind of have our own data framework responsible for loading, caching, invalidating data after mutations etc. We also have a lot of custom utilities in order to make creating new reducers, actions and selectors simpler.
• We do persist state required for loading the correct data in the location hash (e.g. page numbers, view mode, …) and we use custom tooling to decode and encode the information in the URL.
• We handle loading and error states explicitly.
• For some of our more interactive UIs (table editors, network diagrams, …) we actually do not use Redux directly. Instead, we use a custom store implementation (EntityManager) for historical reasons. When we still supported Aleph Data Desktop, we wanted to have a set of shared UI components that do not rely on a Redux store.

Some aspects of this are quite cool, but there are also disadvantages to this approach:

• It requires multiple different dependencies from the React and Redux ecosystems.
• It can sometimes be difficult to reason about what’s happening, because state is kept in multiple places and the code that is responsible for loading and transforming data is distributed across many different files.
• A lot of boilerplate is required in order to load data from new endpoints. This slows down development of new features and enhancements. For example, when I implemented Till/2400 message banner #2421, I added new Redux actions, created a new reducer and manually dispatched state updates just to load a simple JSON file.
• You need a solid understanding of Redux concepts and the ecosystem libraries in order to find your way around. This slows down onboarding of new developers and community contributors.

In recent years, we’ve seen things in this area change quite a bit. Frameworks like Next.js and Remix have reduced the complexity of loading data for the 80% of simply CRUD-like use cases. Even without Remix or Next, there are now a few interesting options:

SWR

SWR exposes a hooks API to fetch data in components, while making sure that no duplicate requests happen, data is cached an invalidated properly etc.

In the simplest case, data can be fetch from an API endpoint using the useSWR hook:

function App() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (error) return <div>Couldn't load user profile.</div>;
  if (isLoading) return <div>Loading…</div>;

  return <div>Hello, {data.name}!</div>;
};

It’s easy to build reusable hooks in case the same data is required in multiple components:

function useUser() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);
  return { user: data, error, isLoading };
}

function NavBar() {
  const { user } = useUser();

  return (
    <ul>
      <li><a href="/">Logo</a></li>
      <li>
        {user
          ? <a href="/profile">My profile</a>
          : <a href="/login">Log in</a>
        }
      </li>
    </ul>
  );
}

function ProfilePage () {
  const { user, error, isLoading } = useUser();
  
  if (error) return <div>Couldn't load user profile.</div>;
  if (isLoading) return <div>Loading…</div>;

  return <div>Hello, {data.name}!</div>;
}

SWR ensures that only a single API request is sent, even if the NavBar and ProfilePage components are rendered on the same page or when re-renders happen. It also has support for long polling, mutations/invalidation, infinite scrolling, …

React Router

React Router v6 has added declarative data loading for routes. Every route can define an async loader that is executed when a user navigates to the route. The return value of the loader is accessible using hooks:

<Route
  path="/profile"
  element={<ProfilePage />}
  errorElement={<ErrorBoundary />}
  loader={async () => {
    const data = await fetch('/api/user');
    return await data.json();
  }}
/>

function ProfilePage() {
  const user = useLoaderData();
  return <div>Hello, {user.name}!</div>;
}

React Router also has support for mutations and invalidations. It’s agnostic with regards to the way of sending API requests (vanilla fetch, SWR, Axios, …).

React Query

React Query

TODO