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
Language.

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

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

npm init -y
npm i --save graphql apollo-server@rc

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');

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!
}
`

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: {
        getPerson:()=>{
            return {
                name: 'James',
                age: 12
            }
        }

    }
};

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

const server = new ApolloServer({
    typeDefs: personType,
    resolvers
});


server.listen({
    port:5000
}).then(({ url }) => {
    console.log('Server is Up at' + url)
});

server.js

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 reactgo.com

Hope You enjoyed Happy coding...