Let’s talk a bit about WunderGraph and what it is. 

WunderGraph claims that it provides “The best developer experience for working with APIs”. 

Now, I don’t want to call something I’ve been playing around with for a few days “THE BEST” in anything, but I’ve got to say that working with WunderGraph is pretty darn good, and overall a nice experience. 

Now, what does WunderGraph do?

Well, to put it into most simple of terms, WunderGraph will connect to all of your APIs and become a central spot for getting and updating data from your APIs. 

And I’m saying APIs here, but I should probably be using the term data sources. 

Because WunderGraph has the ability to merge multiple data sources into a single source with which you can communicate to display, update or add data using GraphQL. 

Now, those data sources can be Databases, GraphQL APIs or REST APIs. So WunderGraph will essentially become a middleware between your data and your application, which can be either a web applications or a mobile applications, and it will provide you with a single GraphQL API with which you will communicate.

And if you are building a React or Next.js application it will automatically generate hooks for you that will make displaying, adding and updating your data a breeze, as you will see in this video. 

WunderGraph will also take care of Caching, Security, Permissions, Authentication and Realtime data for you.

Now since this is a “Let’s Checkout...” video I’m not going to go very deep into WunderGraph, because the point of these videos is for me to present technologies that I find interesting. And hopefully spark interest in them in you also. And then if you find it interesting you can take a deep dive yourselves. 

Also please don’t ask me questions about WunderGraph and how to do something with it. I’m a noob at it just like you. If you wanna ask questions about WunderGraph you can join their Discord server or Subreddit, and ask it there.

In this video we are going to connect to our API from [“Directus and Nextjs” series](https://watch-learn.com/courses/directus9-nextjs), using WunderGraph. And then using hooks that are generated for us we are going to get the data on the client side only, and then I’m going to show you how to get initial data on the server side. Also we are going to add some data to our API with provided hooks, and I’m going to show you how to display newly added data live once you add it.

In this video we are going to checkout WunderGraph, the solution for combining all of your APIs into a single source and much more.

Let's Checkout... WunderGraph

In the [previous episode](https://watch-learn.com/react-2020/lifecycle-methods) we learned about lifecycle methods in Reacts class components. Since we can't use those methods in functional components, we have to use React Hooks. And one hook that is going to give us similar effects to lifecycle hooks is `useEffect`.

However, you will hear me repeat several times in the video that `useEffect` is not the same thing as something like `componentDidMount`. And that is why I urge you to read an [article by Dan Abramov](https://overreacted.io/a-complete-guide-to-useeffect/) called "A Complete Guide To useEffect" talking about `useEffect` in much more depth. Go, read it!

In this episode we are going to take a look at an useEffect Hook for React and how it approximates to some lifecycle methods.

useEffect Hook

Now we are going to do the same thing we did in the [previous episode](https://watch-learn.com/react-2020/state-and-event-handling), but instead of using class component, we are going to be using functional component, and since functional components don't have state like class components we are going to learn how to use Hooks to bring the state to our functional component.

In this episode we are going to take a look at the useState hook, so that we can add state to our functional components.