[RFR] Data hooks

[fzaninotto]

• Add useDataProvider hook
• [BC Break] withDataProvider no longer injects the dispatch prop
• Add useQuery hook
• Add useMutation hook
• Document all that

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useDataProvider, showNotification } from 'react-admin';

const PostList = () => {
     const [posts, setPosts] = useState([])
     const dispatch = useDispatch();
     const dataProvider = useDataProvider();

     useEffect(() => {
         dataProvider('GET_LIST', 'posts', { filter: { status: 'pending' }})
           .then(({ data }) => setPosts(data))
           .catch(error => dispatch(showNotification(error.message, 'error')));
     }, [])

     return (
         <Fragment>
             {posts.map((post, key) => <PostDetail post={post} key={key} />)}
         </Fragment>
    }
}

import { useQuery } from 'react-admin';

const payload = {
   pagination: { page: 1, perPage: 10 },
   sort: { field: 'username', order: 'ASC' },
};
const UserList = () => {
    const { data, total, loading, error } = useQuery('GET_LIST', 'users', payload);
    if (loading) { return <Loading />; }
    if (error) { return <p>ERROR</p>; }
    return (
        <div>
            <p>Total users: {total}</p>
            <ul>
                {data.map(user => <li key={user.username}>{user.username}</li>)}
            </ul>
        </div>
    );
};

import { useMutation } from 'react-admin';

const ApproveButton = ({ record }) => {
    const [approve, { loading }] = useMutation(
        'UPDATE',
        'comments',
         { id: record.id, data: { isApproved: true } }
    );
    return <FlatButton label="Approve" onClick={approve} disabled={loading} />;
};

[fzaninotto]

Switching to RFR

[djhi]

s/of/or/

[djhi]

Awesome :)