Proof of concept React HOC components for datx-jsonapi

[DarkoKukovec]

A few ideas that are work in progress for potential datx-jsonapi-react lib:

HOC component ideas

injectApi

Alternative names:

• injectAsync
• injectData
• injectAPI
• query
• queryAPI
• fetch

Usage:

@inject('state')
@injectApi({
  albums: Album, // Load the first page
  tags: { model: Tag, options: { loadAll: true } }, // Load all tags
  photos: { model: Photo, reqOptions: { filter: { album: 123 } } }, // With custom request options
})
@observer
class MyComponent extends React.Component<{
  state: MyJsonapiCollection;
  albums: IJsonapiView;
  tags: IJsonapiView;
  photos: IJsonapiView;
  loading: {
    albums: boolean;
    tags: boolean;
    photos: boolean;
  };
}> {
  // ...
}

infinite

Usage (combination with injectApi):

@inject('state')
@injectApi({
  albums: Album, // Load the first page
  tags: { model: Tag, options: { loadAll: true } }, // Load all tags
  photos: { model: Photo, reqOptions: { filter: { album: 123 } } }, // With custom request options
})
@infinite('photos', 200) // Load more photos, with a 200px threshold when scrolling
@observer
class MyComponent extends React.Component<{
  state: MyJsonapiCollection;
  albums: IJsonapiView;
  tags: IJsonapiView;
  photos: IJsonapiView;
  loading: {
    albums: boolean;
    tags: boolean;
    photos: boolean;
  };
  loadMore(): void; // Load more data manually if needed
}> {
  // ...
}

paginated (TBD)

• exposes a response object with pageInfo and a onPageChange method for loading more data.

Prerequisites

• datx-jsonapi version 0.16 or newer
• defined config.pageInfoParser
• defined config.getPaginationParams

[isBatak]

I really like the idea behind @injectApi but the naming is little confusing. It is not just about injecting, it is also performing fetching in the background and from the outside it looks like query to API, so I would go with query. It's simple, short and meaningful :D (react Apollo is using that wording too)

Should @inject('state') always go before injectApi?

Apollo have a cool pollInterval prop, It's a cool feature to have and we could use eTag to check if data is changed on the server, also we can skip it if user is on 2G or dataSave https://github.com/zeit/next.js/blob/fc19b233ebcb6074a55ef4a00771ef7b0a3bcc33/packages/next/client/page-loader.js#L137-L143

Declarative component:

We should think about declarative way of fetching data. That will allow us to dynamically change reqOptions from UI like sort dropdown or so...
Example:

@observable
userId: number = 123;

<Query 
  options={{ model: Album,  reqOptions: { filter: { user: userId }})}
>
  {({ loading, error, data}) => (
    // ...
  )}
</Query>

userId = 321;

Similar to Apollo:
https://www.apollographql.com/docs/react/essentials/queries.html
or relay
https://facebook.github.io/relay/docs/en/query-renderer.html

With decorator:

@inject('state')
@injectApi
@observer
class MyComponent extends React.Component<{
  state: MyJsonapiCollection;
  albums: IJsonapiView;
  loading: {
    albums: boolean;
  };
}> {
  // ...
}

// Use it like this
@observable
userId: number = 123;

<MyComponent 
  injectApiOptions={{ model: Album,  reqOptions: { filter: { user: userId }}}
/>

userId = 321;

injectApi should fetch only one model because if it fetch more than one, filter change will trigger unnecessary fetch for other two resources.

Reduce repetition:

@inject('state') and @observer could be integrated inside @injectApi and create our own provider <DatxJsonapiProvider store={store}> to know which state should be injected.

Infinite/Pagination:

Should support traditional numbered pagination (next pages aren't appended, instead they are entirely replaced with new set of data).
Should support offset-based and cursor-based pagination.
Apollo is handling it with fetchMore helper https://www.apollographql.com/docs/react/features/pagination.html.
Potentially create an example of skeletal animation (we need to expose the loading state and page size)

Refetching:

Imperative the refetch method for fetching data after user's iteration.
For example: user add new comment -> comment is successfully saved -> refetch comments list.

Problem: if user is on the third page (infinite pagination) we have to refetch two previous pages too. This will produce a lot of API requests, or we can optimize it to one request (new page size will become old page size* 3) but then we will have wrong metadata pages count (cursor-based pagination can solve that problem)

SSR:

how Apollo did it, explained apollographql/react-apollo#2533

This will remove the need for defining query params on two places getInitialProps and @injectApi

I hope this will simplify nested paginations like comments. To fetch paginated nested comments you first need to fetch root comments and find the id of nested comments parent.

[isBatak]

This lib also has interesting approach https://github.com/ghengeveld/react-async

[DarkoKukovec]

Second try, inspired by the react-async hooks:

useFetchAll

Usage:

const { view: albums, isLoading } = useFetchAll(state, Album);

useInfiniteScroll

Usage:

const { hasMore, loading, loadMore } = useInfiniteScroll(albums);

Note: Doesn't handle scroll - needs to be triggered from the component

[DarkoKukovec]

Abandoning this in favor of https://github.com/vercel/swr. Need to look info making the integration between libs better.