Client setup 🔌
Setup our React client to connect to a GraphQL server.
Now we have a complete server, we need to talk to it from our client. Previously we have sent queries and mutations from GraphQL Playground. But now we need to send them from our react code.
The concept is pretty much the same, we're still just sending standard http requests. But we'll implement a library like apollo/client to make things easier.
The main benefit of using a library is to make use of the graphql cache. This is a crucial part of front-end GraphQL.
The cache explained
The cache is a key part of GraphQL. It's a way of storing the results of our queries so that we can re-use them.
This is really important for performance. If we make a request to fetch a list of jobs, we don't want to make that request again if we've already fetched the data.
The cache is also really important for making our UI reactive. If we have a list of jobs, and we update one of them, we want to see the change immediately without having to make a new request.
The cache is a crucial part of any front-end GraphQL implementation.
How would you handle this in a traditional REST API?
Typically we would use tools like redux or zustand to manage our state, and there's nothing wrong with using these along side GraphQL. But you'll often find that you're duplicating a lot of the same logic.
With tools like Apollo Client, you'll often find you can build highly complex apps without introducing any additional state management tools.