♻️ Implement data loaders

[esizer]

✨ Feature

Start using react-router data loaders.

🕵️ Details

We would like to start utilizing more functionality of react-router. The first step of this includes the use of data loading. Once we have this in, we can start looking at lazy loading our routes. Meaning, our data can be loaded in parallel with our data so we no longer need to wait until the component is loaded and mounted to fetch our data 🎉

In addition to this, we can actually start checking auth in the loaders so we should no longer need to wrap everything in RequireAuth.

🙋‍♀️ Proposed Implementation

You can follow the documentation for the data library integration. This uses react-query but the concept is easily translatable to urql.

I think we could keep the scope small on this to start and just get it working on an authenticated page and then expand on that in additional tickets?

✅ Acceptance Criteria

A set of assumptions which, when tested, verify that the feature was properly implemented.

• [ ] Router updated to support the loader property
• [ ] At least one route (preferably an authenticated route)
  • [ ] Loader checks auth of user
  • [ ] Loader throws an error and user lands on error page if not authenticated or authorized

[petertgiles]

Possibly blocked on graphcache.

[vd1992]

Waiting on graphcache