How to use react-loads - 10 common examples

function App() {
  const getUsers = React.useCallback(async (): Promise => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  }, []);
  const getUsersRecord = useLoads('users', getUsers);
  const users = (getUsersRecord.response || []);

  return (
    
      
        Users
        {getUsersRecord.isPending && }
        {getUsersRecord.isResolved && (
          
            {users.map(user => (
              {user.name}
            ))}
          
        )}
        {getUsersRecord.isRejected && Error! {getUsersRecord.error.message}}

export default function MovieList(props) {
  const { onSelectMovie } = props;

  const getMoviesRecord = Loads.useLoads('movies', api.getMovies);
  const movies = getMoviesRecord.response || [];

  return (
    
      Jake's Top Movies
      {getMoviesRecord.isPending && }
      {getMoviesRecord.isResolved && (
        
          {movies.map(movie => (
             onSelectMovie(movie)} />
          ))}
        
      )}
    
  );
}

export default function MovieList(props) {
  const { loadingMovieId, onSelectMovie } = props;

  const moviesRecord = Loads.useLoads('movies', api.getMovies);
  const movies = moviesRecord.response || [];

  return (
    
      Jake's Top Movies
      
        {movies.map(movie => (
           onSelectMovie(movie)}
          />
        ))}

function App() {
  const getUsers = React.useCallback(async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  }, []);
  const usersRecord = useLoads('users', getUsers);
  const users = usersRecord.response || [];

  return (
    
      
        Users
        {usersRecord.isPending && }
        {usersRecord.isResolved && (
          
            {users.map(user => (
              {user.name}
            ))}
          
        )}
        {usersRecord.isRejected && Error! {usersRecord.error.message}}

export default function MovieDetails(props) {
  const { movieId, onClickBack } = props;

  const getMovieRecord = Loads.useLoads('movie', api.getMovie, { variables: [movieId] });
  const movie = getMovieRecord.response || {};

  const getReviewsRecord = Loads.useLoads('movieReviews', api.getReviewsByMovieId, { variables: [movieId] });
  const reviews = getReviewsRecord.response || [];

  return (
    
      <button>Back</button>
      <button>
        Reload
      </button>
      {getMovieRecord.isPending &amp;&amp; }
      {getMovieRecord.isResolved &amp;&amp; (

export default function MovieDetails(props) {
  const { movieId, onClickBack } = props;

  const getMovieRecord = Loads.useLoads('movie', api.getMovie, { variables: [movieId] });
  const movie = getMovieRecord.response || {};

  const getReviewsRecord = Loads.useLoads('movieReviews', api.getReviewsByMovieId, { variables: [movieId] });
  const reviews = getReviewsRecord.response || [];

  return (
    
      <button>Back</button>
      <button>
        Reload
      </button>
      {getMovieRecord.isPending &amp;&amp; }
      {getMovieRecord.isResolved &amp;&amp; (
        
          
            
              {movie.title}

import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});

import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});

import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});

const currentUsers = meta.cachedRecord.response;
    const newUser = response.data.data;
    return [...currentUsers, newUser];
  };
}

function deleteUser(user) {
  return async meta => {
    await axios.delete(`https://jsonplaceholder.typicode.com/users/${user.id}`);
    const currentUsers = meta.cachedRecord.response;
    const newUsers = currentUsers.filter(_user => _user.id !== user.id);
    return newUsers;
  };
}

export const usersResource = Loads.createResource({
  context: 'users',
  fn: getUsers,
  add: addUser,
  delete: deleteUser
});

function App() {
  const [name, setName] = React.useState();
  const [deletingUserId, setDeletingUserId] = React.useState();

  const getUsersRecord = usersResource.useLoads();
  const users = getUsersRecord.response;

  const addUserRecord = usersResource.add.useDeferredLoads();

  const deleteUserRecord = usersResource.delete.useDeferredLoads();