Baby Steps in GraphQL 👶


Let me explain to 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 the following topics but it’s 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’s 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 the src folder create index.js which is the 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?

A type definition is just like a variable with its 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 the 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 the rest of the data (Create, Update, Delete) defines inside the core element Mutation.

//inside src/schema.graphql

type Query {
  test: String!}

  • Type: is used for elements that define data types in it.
  • Query: query is a read-only core element of graphql
  • Test: The 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 the database, for example, it could be anything like “tweets in your feed”, “emails”, “blog post you search for”
  • String!: It defines the type of data we are expecting from the test field. and the “!” sign at the end defines that it can’t be nullable means if you’re asking for a field called “test” in your console you will always get data back.

Query

Now create a file inside an src called Query.js

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

Now create a variable with the value of the empty object

//inside src/Query.js

const Query = {
  //
};

Inside the object, we will define what happens to the “test” field when the user will ask for it. create a “Key:Value” pair inside the Query object and assign the key as a test and value as a String (sentence inside double quotes) because earlier we defined that the text 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 are inside “schema.graphql” file and 2) “resolvers” which are basically files that take data from the database and return to us. for example, our “Query.js” file which is returning us a hard-coded string(because we didn’t use any database in this post). After that, we started the server using “start()” method(which came from graphql-yoga) and we have written a function that will log a template literal that contains a success message.

Now you can run your first server using the 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 the image below:

graphql playground image

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

Thanks for reading this, If you found this article useful read more at thevenice, and Let me know if find any improvisation in this article, I am Prakash Pawar and you can follow me on Twitter & Instagram. Thank you.

Tags:

#GraphQL, #Server, #Query

2560 2048 admin

Leave a Reply

Get
in Touch

We are here to help you where we can with any requests you may have.

Phone: +91 8849198097
E-mail: info@thevenice.in
Address: Ahmedabad, Gujarat.