Hey, my name is Prakash and today we will learn about the basic concept of Graph in GraphQL
Topics we will Discuss:
What is a Graph?
The graph is a Combination of Multiple Vertices and Edges.
Vertex: A Node or a Block that stores the data that the 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 a relationship between data of vertices, and what one data means to another one. While searching for specific data in the graph, multiple edges provide 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 multiple paths today.
The example we will follow in this post
Here I have created a family graph to explain to you in GraphQL in a simple and understandable form.
Suppose you are creating a database of your family, and 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 visualises your database. Now let’s discuss edges in a little bit more detail.
Directed / Undirected Graph :
Now take the above image as a reference and observe each side of your family member. For the 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 the Undirected graph represent the same relationship from both sides’ perspectives. For example, take Mother = X and Mother’s Brother = Y and their relationship = siblings. so in the undirected graph, we can say that (X, Y)=(Y, X) because the edges don’t point specific direction. So they are representing the same edge.
2) Directed graph
But in the directed graph Edges represents a different point of view/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 let’s talk about connected and disconnected graph using Father’s side in the graph.
1) Connected graph
Above us is a connected graph that also creates a cycle because of Father-Fathers Mother-Fathers Sister is all directly connected to each other. Connected graphs have 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 the Disconnected graph, we have a few vertices/nodes disconnected from other nodes of the graph as shown in the example if we remove the father node we can see that the connection between you and your Fathers family is not connected. Same in Graph if we get disconnected with any node that has only one path to it, we can lose the data in the node.
Tree and Graph Queries
The tree is a connected non-cyclic graph. GraphQL does sort your graph data into a tree-like above and provides you with exactly what type of data you have asked for. GraphQL provides the result of the query while there is a reason it is non-cyclic because it can create a 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 for. Example:
query{
myFamily{
me{
name
location
}
mom{
...
momsBrother{
name
location
}
},
dad{
...
dadsMother{
name
location
},
dadsSister{
name
location
}
}
}
}
That’s 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 queries regarding this post let me know in a comment or Tweet me.
Thanks for reading this, If you found this article useful read more at thevenice, and Let me know if find any improvisation in this article, I am Prakash Pawar and you can follow me on Twitter & Instagram. Thank you.
tags:
Leave a Reply