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.
This in after previous blog post, lets see more usage of GQL queries Step1 In the previous blog post, we had structured our queries to return a hard coded response. In this post, we will assume we have two objects for “user” and “address” almost similar to a database structure like mysql and we have multiple user data as well. P.S I am taking structure similar to a traditional db just so it’s easier to understand, but in real practice graphql works best with nosql db’s
In this blog post we will start using graphql using expressjs. I have been working with REST API’s for a very long time so, these blog posts would be learning graphql but in context of rest api as well. To start of, do the following After the first step is done, you should have a basic gql application running Next after this is done, do this step
In this blog we will try to understand the basic concepts of GraphQL. Make sure to read my previous blog as this is in continuation of that. Endpoint First basic thing to understand is that, GraphQL run on a single endpoint, as opposed to rest api’s have multiple rest api’s url. So all graphql queries, mutations etc all run on a single api end point only. Queries Queries are used to fetch data in graphql.
In this post we will first try to understand what is graphql. This blog could be long but i will try to explain GraphQL from a beginners point of view P.S. GraphQL is an advanced concept, so its understood that you are aware of concepts like rest api’s, frontend/backend technologies. What is it GraphQL is a query language or in a way to structure your api’s on backend, frontend. It’s a new way in which you should write your backend and also a different way to call api’s from frontend.