GraphQL-Intro

Jawakar Durai
2 min readFeb 13, 2020

--

I’m planning to write GraphQL full stack series, this is the first of many to come, enjoy learning 😄, If you’ve written some javascript, you’re good to go for the series.

GraphQL is a language-independent specification for client-server communication. It lets you model the resources and processes provided by a server as a domain-specific language (DSL). Clients can use it to send scripts written in your DSL to the server to process and respond to as a batch.

GraphQL

  • lets you write fully typed schema and you should
  • gives clients the power to ask for exactly what they need and nothing more
  • will expose only one endpoint to interact with the server
  • services can be written in many languages

Example schema in NodeJs

const Schema = gql`
type Project {
name: String!
createdAt: String!
}
type User {
id: ID!
name: String!
email: String!
Projects: [Project]
}
`

It’s really okay if you don’t understand the code, you will get there in time👽

Mental model

GraphQL is mostly known as a query language for clients. While this is sort of true, it’s neither a query language nor particularly graph-oriented.

It’s is not a query language cuz, there are no concepts of expressions here. You build whatever facilities to specifying and fulfilling a query on your own. Likewise, if your data is in a graph structure, if upon you to expose that. You will understand yourself in the coming articles.

To construct a page from scratch we would need to fetch data from several endpoints.

Assuming it is some project management app and you have to show projects that belong to a user, minimal things you have to fetch would be

  • user info (/user/:id)
  • projects of the user (user/:id/projects)

in the real world, it would be so many.

How GraphQL play in the above scenario?

# Requesting for user info and projects of a user with id 12
query {
getUser(id: 12) {
name
email
projects {
name
createdAt
}
}
}

The result will closely match the query in GraphQL.
So, the query will give you:

will give you:

{
data: {
getUser {
name: “Bryan”,
email: “byn@fb.com”,
projects: [
{
name: “React router”,
createdAt: “20–10–2010”
},
{
name: “Create react app”,
createdAt: “04–08–2016”
},
],
}
}
}

Stare through this gif and above code to understand what I said: “the result will closely match the query in GraphQL.”.

--

--