Evolution of state

🚂

🚀

data => UI
this.setState();

Flux

🔄 

Redux

🙏

MobX

Unstated

React context

GraphQL Clients

Apollo, Relay, urql

Queries

const GET_DOGS = gql`
    query Dogs {
        dogs @rest(type: "DogsPayload", path: "/dogs") {
            dogs {
                name
            }
        }
    }
`;

const DogsList = () => (
    <Query query={GET_DOGS}>
        {({ loading, error, data }) => {
            if (loading) return 'Loading...';
            if (error) return `Error! ${error.message}`;
            return (
                <ul>
                    {data.dogs.map(dog => (
                        <li key={dog.name}>{dog.name}</li>
                    ))}
                </ul>
            );
        }}
    </Query>
);

Mutations

const AddDogButton = () => (
    <Mutation mutation={ADD_DOG}>
        {addDog => (
            <button
                onClick={() => {
                    addDog({ variables: { name: 'Bits' }});
                }}
            >
                Add Bits !
            </button>
        )}
    </Mutation>
);

const ADD_DOG = gql`
    mutation addDog($name: name!) {
        addDog(name: $name)
            @rest(type: "Dog", path: "dogs", method: "POST") {
            name
        }
    }
`;

React Suspense

React Suspense

// Tell React Cache how to fetch your data
const DogsResource = createResource(fetchDogs);

const DogsList = () => {
    const dogs = DogsResource.read();
    return (
        <ul>
            {dogs.map(dog => (
                <li key={dog.name}>{dog.name}</li>
            ))}
        </ul>
    );
};

const App = () => (
    <React.Suspense fallback={<Spinner />}>
        <DogsList />
    </React.Suspense>
);

🚨

Code re-use

🎁

⚛️ Logic in components / hooks

📩 Abstracted data fetching

Apollo

React Suspense

⚛️ Logic in components

import and play

🎮

Apollo

const GET_DOGS = gql`
    query Dogs {
        dogs @rest(type: "DogsPayload", path: "/dogs") {
            dogs {
                name
            }
        }
    }
`;


const { loading, error, data } = useQuery(GET_DOGS);

Performance

🐌

🛒 Cached by default

        🤷‍♂️ trading performance issue for cache issue

 

🛠 New GraphQL tools: @defer

Apollo

🤗 Time to start sharing !

Made with Slides.com