GraphQL for 6 year Old

#graphql #javascript #webdev #beginners

Hey, my name is Prakash and today we will learn about Basic Concept of Graph in GraphQL

Topics we will Discuss:

Graph
Directed / Undirected Graph
Connected /DisConnected Graph
Tree and GraphQL Queries
What is a Graph ?

Graph is a Combination of Multiple Vertices and Edges.

Vertex: A Node or a Block that stores the data that user had provided. It is a searchable component that contains data that we can access anytime.

Edge: An Edge is a route or relation between two Vertices. Edge can show as relationship between data of vertices, and what one data means to another one. While searching for specific data in the graph, multiple edges provides us exact path to reach that data.If we have multiple paths, an edge can help us find the smallest path available. But we are not going to discuss about multiple paths today.

Example we will follow in this post

Here I have created a family graph to explain you in GraphQL in simple and understandable form.

Suppose you are creating a database of your family, you have included your 5 family members with you in your database. Now the graph of your database will look like the image above. Vertices will represent your family member and the edges will represent the relationship of each of them with one another. This is how graphQL visualise your database. Now lets discuss about edges in little bit more detail.

Directed / Undirected Graph :
Now take above image as a reference and observe each side of your family member. For undirected and directed graph i will take Mother's side in the graph as an example.
1) Undirected graph

* image above is for undirected graph *
Edges of Undirected graph represents same relationship from both sides perspective. For example, take Mother = X and Mother's Brother = Y and their relationship = siblings. so in undirected graph we can say that (X,Y)=(Y,X) because edges doesn't pointed specific direction. So they are representing the same edge.

2) Directed graph

But in directed graph Edges represents Different point of views / perspective.Edges has direction means (X,Y) and (Y,X) defines two different stories as shown in above image we have an edge from mother to son which represents Mothers relation perspective on son and between same two vertex we have another edge that represents sons relation perspective on mother. That's how Directed Graph work you can get data from the directed side but can't get data in reverse.

Connected / Disconnected Graph

Now we know how directed and undirected graph works lets talk about connected and disconnected graph using Father's side in the graph.

1) Connected graph

Above us a connected graph that also creates a cycle because of Father-Fathers Mother - Fathers Sister are all directly connected each other. Connected graphs has all vertices/nodes connected. we can see that you are connected with your Father, and your Father is connected with his Mother and Sister.

2) Disconnected graph

In Disconnected graph we have few vertices/nodes disconnected with other nodes of the graph as shown in example if we remove father node we can see that connection between you and your Fathers family is not connected. Same in Graph if we get disconnected with any node that have only one path to it, we can lose the data in the node.

Tree and Graph Queries

Tree is a connected non-cyclic graph. GraphQL do sort your graph data into a tree like above, and provides you exactly what type of data you have asked. GraphQL provides the result of the query while there is a reason it is non-cyclic because it can create faster path to the data vertices we are searching for inside the graph. The below code snippet is a query that you provide to GraphQL, and GraphQL will return you exact data you asked.
Example:
```
query{
  myFamily{
    me{
      name
      location
    }
    mom{
      ...
      momsBrother{
        name
        location
      }
    },
    dad{
      
      ...
      dadsMother{
        name
        location
      },
      dadsSister{
        name
        location
      }
    }
  }
}
```
That's it the basic Concept of the Graph in GraphQL i hope it will help you to visualize the process inside of the GraphQL. If you have any Query regarding this post let me know in comment or Tweet me. thank you for reading this.