Hands-On Full-Stack Web Development with GraphQL and React

The React Context API

We will start with the React method for storing and accessing global data in your front end.

The following is a short explanation of this method:

• Context: This is a React approach for sharing data between components, without having to pass it through the complete tree.
• Provider: This is a global component, mostly used at just one point in your code. It enables you to access the specific context data.
• Consumer: This is a component that can be used at many different points in your application, reading the data behind the context that you are referring to.

To get started, create a folder called context below the components folder. In that folder, create a user.js file, where we can set up the Context API.

We will go over ...