Search code examples
reactjsgraphqlreact-apolloapollo-clientapollo-boost

react with GraphQL Clients

Using React with GraphQL clients like Apollo Client is a good idea? The same results i can achieve with react and new Context API.

Basically i can consume GraphQL APIs using axios or any other libraries like this. And for state management i can use react's new Context APIs which is really simple.

axios.get('localhost://4000?qraphql').then((res)=>{

//do something with the response.
})

Is there still any Advantages to go with Apollo Client. Why would I really go for Apollo client when i can achieve the same without it. It will help me to reduce my bundle size.

Solution

  • Apollo client provides a ton of features above and beyond simply fetching data from the server. What follows is a non-exhaustive list:

    • Exposed loading, error and data state, so you don't have to create additional stateful components just to fetch data asynchronously
    • A normalized caching layer that allows you to avoid making unnecessary repeat requests to your server
    • Observable queries that allow your UI to update whenever any query or mutation changes a relevant part of the cache
    • Powerful error handling tools through apollo-link-error
    • Pagination support through loadMore
    • Optimistic UI updates for mutations
    • Support for Subscriptions through apollo-link-ws
    • Integration with local state management through apollo-link-state
    • Support for deferred queries through the @defer directive
    • Server-side-rendering support
    • Apollo Client Developer Tools chrome extension that includes built-in GraphiQL console, query watcher, mutation inspector and cache inspector.

    See the extensive docs here for more details.

    There are common patterns that result in having to write (and test) a bunch of boilerplate code, for example maintaining loading state so that your UI knows when a request is complete. Using Apollo, or any other similar client, eliminates the need to write all that boilerplate and provides a clean, well-tested API for you to work with. If you're working on a team, there's also something to be said for using a well-documented library that some of your team may already be familiar with, rather than having to learn some new API that was created just for a particular project.