[sephoric]

Now we can finally have completely clean data loaders:

Create a data loader hook that loads your data in a one-shot effect (you pass it the identities array), and which returns either a valid view (an error or loading view) and no data, or no view and valid data of type T. Then you can just do:

    const loader = useDataLoader(async () => {
      const a = await getDataA();
      const b = await getDataB(a);
      return b.data;
    });

    return loader.view || <MyView data={loader.data} />

I've been using this for a few months and it's amazingly clean compared to render-props. I hope this gets pulled into the React standard library.

[basil-rash]

This also ties in very cleanly with graphQL:

  import gql from 'graphql-tag';
  import { useQuery } from 'react-apollo-hooks';
  
  const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }`;

  const Dogs = () => {
    const { data, error } = useQuery(GET_DOGS);
    if (error) return `Error! ${error.message}`;
  
    return (
      <ul>
        {data.dogs.map(dog => (
          <li key={dog.id}>{dog.breed}</li>
        ))}
      </ul>
    );
  };

https://github.com/trojanowski/react-apollo-hooks