There are two major client side library’s which we can use with react for GraphQL a) Apollo b) Relay In the post we will look at Apollo and how to use it. If we compare Apollo with Relay Apollo Very simple to learn and fast to implement Work’s cross platform, we can use this on React/Angular/Vue etc This is the major reasons for using apollo client, here is a very short comparison for the same.
Fragments is also a very important concept in GraphQL. This is used to group re-usable code together. To get a basic understanding about this, read the below blog post its very simple and easy to understand Let’s see how we can us it in our todo application. In our app all queries, mutations are using these fields id, task, isComplete We can easily reuse this in our app like this
Subscription is another type of in GraphQL. This is use real time events using websockets, you can send notification to client for events which happen on the server using web sockets. It you are not aware what are websockets, you can find plenty of resources online. Let’s see how to implement subscription in our code base. As an example, let’s add a subscription to notify user when a new todo is added
Till now we have been using a simple graphql-express middleware as a gql server.  Apollo-Server provides a full feature gql server which is production ready and should be used for most applications. Let’s move our code base to apollo-server First install via $ npm install --save apollo-server graphql Also we don’t need graphql-tools anymore as it is inbuilt in apollo-server So final code looks like this const { ApolloServer } = require('apollo-server'); import { typeDefs, resolvers } from "
Till now we have only seen how to fetch data and gone quite deep into it. Now let’s see the how we can update data i.e POST, PUT, DELETE requests We need to use mutations for it. Mutation also follow exact similar pattern as Query. Let’s define a mutation to add a new profile data //mutations/profile.js export default ` extend type Mutation { addProfile(name: String) : Profile } ` //resolvers/profile.js import data from "
In previous blogs post, we got stuck at a problem and found a new tool to solve it i.e graphql-tools. Let’s see from start what is graphql-tools and how we use it in our app. First thing apollo graphql-tools recommends to use GQL type/query syntax directly and also to have schema and resolvers as separate. So, to try this out first lets convert our user schema to GQL syntax and comment the todo schema from our app, only stick to user schema.
  • iOS/ Android Development
  • Magento
  • Shopify
  • WooCommerce
  • PrestaShop
  • Single Page Applications
  • ReactJS
  • VueJS
  • AngularJS
  • Native App with Ionic
  • React Native
  • Wordpress
  • Laravel
  • Custom CMS
  • Custom eCommerce
  • API Development
  • PHP Based Technologies
  • NodeJS