# Using React Hooks with GraphQL

Source: https://tpiros.dev/blog/using-react-hooks-with-graphql

Let's take an existing React application that uses GraphQL and rip out the boilerplate by switching to React hooks.

> I ran a few workshops for [O'Reilly on React & GraphQL](https://www.oreilly.com/live-training/courses/creating-react-applications-with-graphql/0636920289111/). When those workshops happened, [React Hooks](https://reactjs.org/docs/hooks-intro.html) didn't exist yet. The example here comes straight from that workshop material.

# The base application

> The codebase lives on [GitHub](https://github.com/fullstacktraining/oreilly-react-graphql/tree/master/basic/frontend).

The base application is simple: one page that lists cars. A standard React component pulls data from a RESTful API with a GraphQL layer sitting on top. I built the API and GraphQL service for demo purposes, so it's intentionally bare-bones.

> This article doesn't cover GraphQL basics. If you want an introduction, read this article, or grab the Practical GraphQL: Become a GraphQL Ninja video course.

Here's the React component listing all the cars:

```javascript

  {
    cars {
      id
      make
      model
    }
  }
`;

  return (
    
  );
}
```

If you've worked with React and GraphQL, you've seen this pattern. We store the query in `GET_CARS`, execute it through the `<Query>` component from `react-apollo`, and iterate over `data.cars` in the return statement.

The code works fine, but it's already looking heavy for something this simple. Let's trim it down.

# React Hooks

Hooks landed in React 16.8. They gave functional components proper state management. Before hooks, you had to manage state through `this.state` in class components:

```javascript

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

```

With hooks, the same thing shrinks to this:

```javascript

function MyHookComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

```

Same functionality, less code, easier to read. Notice we've also switched from a class component to a functional component.

Hooks solved the lifecycle methods and state management problem for functional components. Patterns like render-props and HOCs (Higher Order Components) aren't necessary anymore.

> Can you use Hooks inside class components? From the [React Docs](https://reactjs.org/docs/hooks-overview.html): "Hooks don't work inside classes".

Now that we've got hooks in our toolkit, let's rewire the GraphQL implementation.

First, install the Apollo package: `npm install @apollo/react-hooks`. Then make two changes:

- Update the `,
  document.getElementById('root')
);

// cars.js

  {
    cars {
      id
      make
      model
    }
  }
`;

  const { data, loading, error } = useQuery(GET_CARS);
  if (loading) return <p>Loading ...</p>;
  if (error) return <p>ERROR</p>;
  return (
    
  );
}
```

> Check out this blogpost to learn more about [`@apollo/react-hooks`](https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2)

In `cars.js`, we import `useQuery` from `@apollo/react-hooks`. The query itself stays the same. But the component is much cleaner. One line executes the query: `const { data, loading, error } = useQuery(GET_CARS);`. No more `<Query>` wrapper component. A big chunk of boilerplate, gone.

# Conclusion

React hooks change how you build functional components and manage state. The Apollo GraphQL package takes full advantage, letting you strip away the ceremony around queries and data handling.