Let me explain you how to start learning GraphQL while also understanding every bit of code.

Few things i consider that you understand before starting this tutorial because you might need to know the basics of following topics but its not necessary as i will explain every code, still it will help you to build a solid foundation :

1) JavaScript
2) NodeJS
3) ExpressJS

In this tutorial we will learn to create a backend API that can Read your data (yes only Read)from the server side. Simply the word "Read" means the operation to return the data from the Database location to the Server end or front end of your web application.

Let Start with folder Structure

gql-basics
         |
         -- src
         |
         -- package.json  

Dependencies Installations :

graphql-yoga (is a server framework based on ExpressJS)

 yarn add graphql-yoga

Setup

Inside src folder create index.js which is main setup file. In that file import {GraphQLServer} from graphql-yoga and create its instance.

//import
const { GraphQLServer } = require("graphql-yoga");

//instance
const server= new graphQLServer({
//wait for this!
})

what is Type Definition ?

type definition is just like a variable with it's type declaration, for example:

//open browser console

var client = [{
id:1,
name:"Elon Musk"
}]

//now check the type
if(typeof client.name === "string") { true } else {false}
//output = true

if(typeof client.id === "string") { true } else {false}
//output = false

same as above we have to create a file and define every data we are expecting with their types. the file name will be schema.graphql and we will create that file inside src

gql-basics
         |
         -- src
              |
              -- schema.graphql

Now we will create our first data with the type. In GraphQL Read only data is always get defined inside a core Query element and rest of the data (Create,Update,Delete) defines inside core element Mutation.

//inside src/schema.graphql

type Query {
  test: String!}

Here is the explanation for above code:

• type : is used for elements that define data types in it.
• Query: query is read only core element of graphql
• test: test is called field think like its a variable that could contain anything like "functions()", "String", "Boolean" and "test" is a custom name we gave to our field that we are expecting from database for example it could be anything like "tweets in your feed","emails", "blog post you search for"
• String!: its define the type of data we are expecting from test field. and the "!" sign at the end defines that it can't be nullable means if you're asking for field called "test" in your console you will always get a data back.

Query

Now Create a file inside a src called Query.js

gql-basics
         |
         -- src
              |
              -- schema.graphql
              |
              -- Query.js

Now Create a variable with value of empty object

//inside src/Query.js

const Query = {
  //
};

Inside the object we will define what happen to the "test" field when user will ask for it. create a "Key:Value" pair inside the Query object and assign key as test and value as a String (sentence inside double quotes) because earlier we defined that the test field will return only a string type value.

//inside src/Query.js

const Query = {
  test:`Hello Dev.to Community :) `
};
//NodeJS style of exporting modules
//same as like: export {Query};
module.exports = {Query}

Running the Server

Now we will pass arguments inside the GraphQLServer in index.js and then start the server. take a look :

const { GraphQLServer } = require("graphql-yoga");
const { Query } = require("./Query");
const resolvers = {
  Query
 
};


const server = new GraphQLServer({
  typeDefs: "./src/schema.graphql",
  resolvers
});

server.start(_ =>
  console.log(`your server is running on http://localhost:4000`)
);

Here the GraphQL Server takes an object as an argument and we have to pass two things : 1) "type definitions" which is inside "schema.graphql" file and 2) "resolvers" which are basically files that takes data from database and return to us. for Example our "Query.js" file which is returning us a hard coded string(because we did't used any database in this post). After that we have started the server using "start()" method(which came from graphql-yoga) and we have wrote a function that will log a template literal that contains a success message.

Now you can run your first server using following command :

//from inside your gql-basics
//type belowcode to start the server file
node src/index.js

and it will open a GraphQL playground like image below:

Hurry 🎉! Thats it we have created and also understood basics of graphql, thank you'all for giving your time to graphql and if you like this tutorial please tweet me about it.

Next time i will try to explain how Mutation works, till then Happy Coding !!