React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. 

As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks.

If you'd like to learn how to use them, this playlist is for you!

Ever since React Hooks were announced, many web developers wanted to use them to fetch data in their apps with GraphQL backend.

An `@apollo/react-hooks` package has been released recently with allows developers to use Apollo Client to fetch data from GraphQL endpoint using a `useQuery` hook. The new API has exactly the same possibilities as the previous, render-props based one but the resulting code is much simpler and easier to follow.

In this lesson we're going to learn how to fetch data with `useQuery` hook to get data about currency rates using both static and variable-based GraphQL query.

Fetch data with Apollo GraphQL useQuery hook

Developers love to automate things.

For instance, we'd like to be able to send a request to an endpoint every X milliseconds because something interesting might have happened. Or we want to get a new picture of a cute dog.

In this lesson, we're going to use `useQuery` hook to display a random image of a dog every 500 milliseconds using the `pollInterval` option as well as using the `startPolling` and `stopPolling` methods from Apollo Client to manually start and stop the polling process.

Automatically poll data from GraphQL API with Apollo Client useQuery hook

When using `useQuery` from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a button click).

In this lesson we're going to learn how to use `useLazyQuery` hook to execute a query manually in order to fetch dog pictures.

Use useLazyQuery to manually execute a query with Apollo React Hooks

GraphQL is fantastic not only for querying data, but also for mutating it and with Apollo React Hooks we're able to do both.

In this lesson we're going to learn how to use `useMutation` [hook](https://www.apollographql.com/docs/react/essentials/mutations/) in order to add an item to a todo list with hooks instead of using the render props pattern based `Mutation` component 

Learn Apollo Client Hooks

Tomasz Łakomy

Course Content