DEV Community

Cover image for Intro to the GraphQL
Sai gowtham
Sai gowtham

Posted on • Updated on

Intro to the GraphQL

GraphQL is Query Language For your APIs It helps us to fetch only required
resources instead of over fetched and it is Not only limited to the single
programming language, an alternative to the Rest.

GraphQL is a Type Specific Language

You can easily create GraphQL types by using the Schema Definition

GraphQL comes with a set of scalar types out of the box

  • String
  • Int
  • Float
  • Boolean
  • ID

Let's See in Practice How it Works

I'm Using Apollographl package to create a Graphql-server.

mkdir graphql-example
cd graphlql-example
Enter fullscreen mode Exit fullscreen mode

we need to initialize the Package.json file and install dependencies

npm init -y
npm i --save graphql apollo-server@rc
Enter fullscreen mode Exit fullscreen mode

Open graphql-example folder in your Favourite Code Editor

create a server.js file

Now we need to require from the apollo-server.

const { gql, ApolloServer } = require('apollo-server');
Enter fullscreen mode Exit fullscreen mode

It's time to create a Type Definitions

In this Example, I'm showing a Person type

const personType=gql`

type Person{
    name: String!
    age: Int!


type Query{
  getPerson: Person!
Enter fullscreen mode Exit fullscreen mode

Like in above code we defined Person Type must hold name and age

Query Means fetching the Data Like if we invoke a getPerson our output
should like Person type.

Exclamation mark (!): It means that field is not nullable

By writing the Query GraphQL Doesn't Do Anything we need to tell GraphQL how to resolve the getPerson Query.

so that we need to Resolve the getPerson Query now

const resolvers = {

    Query: {
            return {
                name: 'James',
                age: 12

Enter fullscreen mode Exit fullscreen mode

At final we need to pass the typeDefinitions and resolvers to the ApolloServer constructor.

const server = new ApolloServer({
    typeDefs: personType,

}).then(({ url }) => {
    console.log('Server is Up at' + url)

Enter fullscreen mode Exit fullscreen mode


Now open Your Terminal and run node server.js

In your Browser open http://localhost:5000 you can see a Graphiql Playground looks like below image.

originally published at

Hope You enjoyed Happy coding...

Top comments (0)