Fetching Data using GraphQL Queries with React Hooks and Axios
In this video we are going to build a GraphQL client with React and we are going to perform GraphQL Queries using Axios and React Hooks.
Let’s get started by creating a new react application.
npx create-react-app react-graphql
Now, we are going to install Axios to perform the http requests to our GraphQL server.
npm i --save axios
We are going to run the Nest JS GraphQL Server we built on a previous video.
In our React application, we are going to use the useState hook and the useEffect hook.
A hook is basically a way to access React components state and lifecycle from a function component.
The useState hook is going to return the current state of the component and the function that will let us update that value.
And the useEffect hook will allow us to call the GraphQL API once the DOM or Document Object Model of the Component is completely rendered.
For more details, you can watch the video below. Thanks!
Wrapping Up
The code created for this application is available on this Gitlab repo.
