Skip to content

Latest commit

 

History

History
169 lines (118 loc) · 5.23 KB

3.GraphQL In NodeJS.md

File metadata and controls

169 lines (118 loc) · 5.23 KB

--> [ Prerequisities And Installing Package ]

  • Initialise A NodePackage

    npm init

  • Packages

    • graphql -> To Write Schema And Use GraphQL Language
    • apollo-server -> Allows Us To Make Api That Serves GraphQL Without Need Of Express
    • nodemon -> Automatic Reloading Server On New Changes

  • Installing Package

    npm install graphql apollo-server nodemon

  • Adding Starting Script Into Package.json

          "scripts": {
          "start": "nodemon App.js"
      },

  • Creating File 'App.js' In Root Folder Of Our Project.

--> [ Folder Structure ]

  • Root/
    • node_modules/
    • schema/
    • App.js
    • FakeData.js
    • package.json
    • package-lock.json

Inside The 'root/' Folder We Create A File Called 'FakeData.js' Because We Need To Use Some Dummy Data As A Datasource For Querying.

   const UsersList = [
    {
      id:1,
      name:"Kreideprinze",
      email:"[email protected]"
    },
    {
      id:2,
      name:"Kashmir",
      email:"[email protected]"
    },
  ]

  module.exports = {UsersList}

inside the 'schema/' Folder.

  • schema/
    • type-defs.js
    • resolvers.js

--> [ Creating ApolloServer And SettingUp App.js ]

typeDefs -> Every Type,Schema,Query We Make In GraphQL Exist Inside The TypeDefs

resolvers -> All Of The Function Who Resolve Those Types,Make Calls To Api,Make Calls To Databases And Send Data Back Exist Inside Resolvers.

  const {ApolloServer} = require('apollo-server')

  const Server = new ApolloServer({typeDefs,resolvers})
  • Starting The Server
Server.listen().then(({ url }) => {
  console.log('Server Is Running At ' + url);
});

It Will Crash Because We Haven't Defined 'typeDefs' and 'resolvers' Yet.

--> [ Working With TypeDefs ]

In type-defs.js File We Imported '{gql}' from 'apollo-server' That Allow Us To Write GraphQL Codes. And Translate That Codes Automatic That Javascript Can Understand.

We Created A Variable Called 'typeDefs'

First Type Which Exist Inside This Variable Is type Query{} and This Holds All Of The Query Which We Will Wanna Make In Our Api. Example - If We Have A Website And We Want To Make Req To Grab List Of Users It Want Us To Define users : [User!] Inside The type Query{}.

If We Are Returning 'User' Type After Querying Then We Have To Define Type 'User'.

After That We Exported This 'typeDefs' Variable And Can Use It In 'App.js'.

const {gql} = require('apollo-server')

const typeDefs = gql`
      type User{
        id:ID!
        name:String!
        email:String!
      }

      type Query{
        users : [User!]
      }
`

module.exports = {typeDefs}

--> [ Working With Resolvers ]

Inside The 'resolver.js' File.

Resolvers Are Function That Resolves Queries That You Have. For Example Inside The 'typeDefs' type Query{} We Got A Query users : [User!] So We Need To Make A Resolver That Can Resolve This Field. All The Function That Make Calls To The Database,All The Functions That Do Something To The API Exist Inside This 'resolvers' Object. First We Define What Is Highest Level Field That Is 'Query'. Inside That Field We Define All Of The Resolver Functions As A Subfield For The type Query{}. And Right Now We Have One Field 'users' So We Need To Define Resolver For That Type. And Its Function So We Define It Like users() {} And Inside That We Can Put Javascript And Tell That What Would Happen If Someone Make A Query To The 'users'. And If We Have Database We Make Call To Database From Here To Retrieve The Data And Return Data At The End.

We Using FakeData.js So We Can Import That.

import {UsersList} = require('../FakeData.js')

const resolvers = {
  Query: {
    users(){
      // We Also Can Make Api Calls Here To Database And Return At The Data.
      return UsersList;
    }
  }
}

module.exports = {resolvers}

--> [ Testing ]

Now We Can Import 'resolvers' and 'typeDefs' Inside Our 'App.js' File.

Now Server Will Run Without Any Error And If We Go To The 'http://localhost:4000' We Can See Beautiful GraphQL Playground Running On Apollo Server.

const {ApolloServer} = require('apollo-server')
const {typeDefs} = require('./schema/type-defs.js')
const {resolvers} = require('./schema/resolvers')

const Server = new ApolloServer({typeDefs,resolvers})

Server.listen().then(({ url }) => {
  console.log('Server Is Running At ' + url);
});

Inside The GraphQL Playground First We Have To Type Keyword Called 'query' Because We Are Querying The Data . After That We Have To Type The Name Of Our Choice For That Query So For Example We Call It 'getAllUsers'. After That Inside That We Have To Define The Field Name Of The Query Which We Are Trying To Use. In That Case We Using 'users' Field. Inside That We Have To Specify What Field We Want To Get So In That Case We Want 'id','name','email'. And After That We Click On The Button And It Should Return Us The Data.

Like This User Can Specify From The Frontend What He Want To Get And It Will Only Return That Data.

In The Last If We Remove 'email' Field From Our FakeData.js File And Since It Required Field So If We Query It. Its Gonna Throw us The Error.

  query getAllUsers {
    users{
      id
      name
      email
    }
  }