RFC: Fragment Suspense boundaries in React bindings

Summary

Overall, our new Suspense implementation is working a lot better, as expected, after getting some feedback on it from the React team. This gives us the room to experiment with more uses of Suspense in our React bindings.

Today when we load a query with Graphcache we may run into cases where Schema Awareness kicks in, when it's enabled.

Today this already allows people to have a page-wide query that loads some data and displays partial data when the cache doesn't have enough information to fulfil the query in its entirety but so far that it can leave out optional fields.

This poses a challenge for implementations, where some sub-components of a page may have to switch between a partial and a non-partial state. Assuming that these have types in a TypeScript environment, dealing with partial data on its own isn't too difficult. However, implementing many cascading loading states can be a difficult task and Suspense can help here.

Proposed Solution

It should be possible for a component to check data for completion using a useFragment suspense hook. This hook accepts a fragment and a piece of data and suspends when the fragment isn't fully fulfiled and partial.

TBD: Exact API details pending #1221

Passive Update solution:

One solution that may work is to passively ingest React updates and Client results; i.e. the useFragment hook receives a fragment and data but will be used with a useQuery hook that also triggers suspense updates, hence we'll eventually pre-render up until the useFragment hook(s). This may either have a separate suspense boundary or use a suspense boundary above useQuery. The important detail here is whether it has its own boundary.

When a useFragment hook has its own boundary it'll likely have to look at all active queries and filter them down to ones that also consist the same fragment (by name). Hence, a code generation tool would be of prefereable use here. Once it detects that the same fragment occurs in an OperationResult it should update and either throw a suspense promise or return a result as needed. The result should be masked as per the fragment.

Requirements

• A useFragment hook should accept data and a fragment and return masked data
• The useFragment hook should suspend when its data is incomplete