## What Is Markdown? And How To Use It Effectively?

Markdown is a simple markup language that uses plain text formatting syntax. It is intended to be converted to structured HTML. It is frequently used to format readme files. Markdown languages were created in 2004 by John Gruber and Aaron Swartz. The goal of Markdown is to make it easy to read. With the Markdown language, you can easily read and write web-based documents. What is Markdown?You're "formatting" text when you add bold, italics, numbered lists, bullet points, headings, and so on. Markdown is a syntax (or set of rules) that is used to format text on web pages. It’s extension is .md. People used Hypertext Markup Language, or HTML, to format text on web pages in the past. HTML is one of three markup languages, the others being eXtensible Markup Language (XML) and Standard Generalized Markup Language (SGML) (SGML). Tags are used to surround text in order to format it with HTML. For example, to bold text, type "<b> this is some bold text </b>." When you "read" a web page, your web browser interprets the HTML tags and applies the appropriate formatting. When it sees "<b> this is some bold text </b>," it knows that anything between the <b> and /b> tags should be in bold. The tags (<b> and </b> are also hidden by the browser.HTML can be quite complex, with dozens and dozens of tags like <span>, <div>, <kbd>, <ol>, and many more. Computers have no trouble reading these because they simply follow the syntax (HTML rules) and apply the formatting that corresponds to the tags. The tags, on the other hand, make it difficult for humans to read HTML and fully understand how the text will appear after the computer renders it. It's not particularly "user-friendly" for those who haven't read it before. Markdown, on the other hand, is intended to be "as simple to read and write as possible." On Gruber's website, John Gruber and Aaron Schwartz explain why they created Markdown in 2004 and provide a syntax guide. In a brief, Markdown makes it easier to format text for web pages because its tags are simpler than HTML and automatically convert to HTML. This means you don't need to know HTML to write something for a web page because Markdown automatically converts your tags to HTML. We can use HTML tags within a markdown file which markdown can understand and convert meaningfully. But it does not understand or cover all HTML tags, but rather the most commonly used formatting options. Why should you use Markdown?It’s Easy to Learn and Fast to Use:Markdown is a very simple to learn. The official syntax can be found here, but the most important thing to remember is that typing *word* will make it bold, typing **word** or _word_ will italicise the word, links are written like this [anchor text](http://www.URL.com), and lists are written exactly how you'd expect: just hit enter and add any of these three characters at the beginning of each line: -, *,  So typing Markdown is almost always faster than writing with a rich text editor, especially when it comes to things like links or bulleted lists, which require you to use the mouse or memorize a complicated sequence of keyboard shortcuts. One caveat: if you need complex text elements, such as tables, you should stick to HTML. Fortunately, Markdown fully supports HTML, so you can code a table in HTML and then switch back to Markdown in the same document. Furthermore, raw Markdown is much easier to read than raw HTML. This is one of the reasons Markdown was created in the first place. It Converts to HTML Easily:If you're going to write HTML, you should just write HTML. However, if you're writing an email or a readme file and need HTML's formatting options but not all its features, Markdown is ideal. Markdown seamlessly converts to HTML, saving you the time and effort of opening and closing all those tags. In fact, Markdown includes software to convert plain text to HTML! So, in addition to being a markup language, Markdown is also a text-to-HTML conversion software. Furthermore, have you ever attempted to convert a.docx file to HTML? It's often not worth the effort because you get so much extra formatting and spacing. Markdown is Futureproof:Markdown is a plain text format that is "futureproof." Markdown will be usable and openable by modern programs for as long as plain text is the standard (which it will be for a very long time). In comparison, Microsoft Word has eight different filetypes as of 2018. Keeping things in plain text ensures that there will never be an outdated version, which means that software will not need to be updated to keep up with the format. Markdown has its own file extension: .md, but it was designed to be perfectly readable as a raw text file. So, it's safe to say that Markdown is not going away anytime soon. It is used Everywhere:You might think that as the rich text becomes more popular, Markdown's use has stopped growing, but that is not the case. Markdown's popularity has grown steadily since its beginning, and it is likely to continue to do so. On popular coding sites like GitHub, Markdown is the unofficial standard. It is also the default format for popular communication tools like Skype, Slack, and (to a lesser extent) Facebook Messenger. Wikipedia even employs a modified Markdown syntax known as wikitext. In an increasingly social world of coding, the programmer who does not understand Markdown will be at a disadvantage (or, at the very least, confused for a little while). So, if nothing else, learn Markdown so you can keep up with the industry. The Markdown Syntax - A Quick PrimerThese are the elements that were outlined in John Gruber's original design document. These elements are supported by all Markdown applications.  ElementMarkdown SyntaxHeading# H1 ## H2 ### H3  Bold**bold text**Italic*italicized text*Blockquote> blockquoteOrdered ListFirst itemSecond itemThird itemUnordered List- First item- Second item- Third itemCodeCodeHorizontal Rule---Link[title](https://www.example.com)Image![alt text](image.jpg)Markdown in PracticeWe will use VSCode Editor in this tutorial to see how to use markdown and preview it side-by-side. I am assuming that you have VSCode Editor installed on your system. Step 1: Install the extension “Markdown Preview Enhanced” on the VSCode Editor. Step 2:  Create a file with .md extension under the folder of your choice.Step 3: Now turn on the preview mode using Ctrl+K V;, you will get a split- screen for the code and preview mode. Best Practices & Tips: Markdown allows you to write anything you want once and convert it to almost any format you want to use. The examples below demonstrate how to convert simple text written in MD into various formats. You don't need multiple text formats—you can start with a single source. Markdown was created with the explicit goal of being human-readable. The majority of the syntax should be fairly simple and intuitive. Now, we will take a look at the different formats in the markdown: In your .md file write the following code to see the preview. You will see preview as:  In Markdown, headings are any lines that begin with a # symbol. The number of hashes indicates the heading's level. One hash is converted to a h1, two hashes are converted to h2, and so on. There are a total of six levels available to you, but for most writing, you'll rarely need more than three. To add a link, enclose the text to be linked in square brackets, followed by the URL to be linked in parenthesis. Consider it like turning a word into a button to help you remember it. [button] and (where to go when the button is clicked) work together to form a link. Markdown images have the same formatting as links, but they're preceded by an !. This time, the text in brackets is the alt text - or the image's descriptive text. Let’s see some more formats and check their preview to be more comfortable with markdown. **For Code Base**  Turn on Preview mode using Ctrl+K V. javascript  var name = "Ishan";  console.log(name)      **For Tables**    |Table |Goes |Here |  |--- |--- |--- |  |one |two |three |    **Ordered & Unordered Lists**  1. List One  2. List Two  3. List Three    1.List Four  - List Five You will see the preview as:  If you're a technical writer, you might want to use code snippets to teach your readers a specific syntax (as I'm doing with this blog post). A quick code snippet can be displayed by placing a single backtick around a word in a sentence. Lists are a formatting nightmare in HTML, but Markdown lists are a breeze. we can simply prefix each statement like with a * - or - or + to convert them to dots for a bullet list. You can also make nested lists; simply indent a line with four spaces and it will be nested beneath the line above.Why learn Markdown? Once you've mastered Markdown, it's an incredibly powerful writing tool that will allow you to create rich web content much faster than almost any other method. However, there is a learning curve involved in getting to that point. We think that we have put togrether an all-inclusive guide to shorten that learning curve and possibly taught you a few useful Markdown tricks you might not have known. Markdown is an effective tool, and it will stay relevant in the time to come.

# What Is Markdown? And How To Use It Effectively?

5K

Markdown is a simple markup language that uses plain text formatting syntax. It is intended to be converted to structured HTML. It is frequently used to format readme files.

Markdown languages were created in 2004 by John Gruber and Aaron Swartz. The goal of Markdown is to make it easy to read. With the Markdown language, you can easily read and write web-based documents.

## What is Markdown?

You're "formatting" text when you add bold, italics, numbered lists, bullet points, headings, and so on. Markdown is a syntax (or set of rules) that is used to format text on web pages. It’s extension is .md.

People used Hypertext Markup Language, or HTML, to format text on web pages in the past. HTML is one of three markup languages, the others being eXtensible Markup Language (XML) and Standard Generalized Markup Language (SGML) (SGML).

Tags are used to surround text in order to format it with HTML. For example, to bold text, type "<b> this is some bold text </b>."

When you "read" a web page, your web browser interprets the HTML tags and applies the appropriate formatting. When it sees "<b> this is some bold text </b>," it knows that anything between the <b> and /b> tags should be in bold. The tags (<b> and </b> are also hidden by the browser.

HTML can be quite complex, with dozens and dozens of tags like <span>, <div>, <kbd>, <ol>, and many more. Computers have no trouble reading these because they simply follow the syntax (HTML rules) and apply the formatting that corresponds to the tags.

The tags, on the other hand, make it difficult for humans to read HTML and fully understand how the text will appear after the computer renders it. It's not particularly "user-friendly" for those who haven't read it before.

Markdown, on the other hand, is intended to be "as simple to read and write as possible." On Gruber's website, John Gruber and Aaron Schwartz explain why they created Markdown in 2004 and provide a syntax guide.

In a brief, Markdown makes it easier to format text for web pages because its tags are simpler than HTML and automatically convert to HTML. This means you don't need to know HTML to write something for a web page because Markdown automatically converts your tags to HTML.

We can use HTML tags within a markdown file which markdown can understand and convert meaningfully. But it does not understand or cover all HTML tags, but rather the most commonly used formatting options.

## Why should you use Markdown?

### It’s Easy to Learn and Fast to Use:

Markdown is a very simpleto learn. The official syntax can be found here, but the most important thing to remember is that typing *word* will make it bold, typing **word** or _word_ will italicise the word, links are written like this [anchor text](http://www.URL.com), and lists are written exactly how you'd expect: just hit enter and add any of these three characters at the beginning of each line: -, *,

So typing Markdown is almost always faster than writing with a rich text editor, especially when it comes to things like links or bulleted lists, which require you to use the mouse or memorize a complicated sequence of keyboard shortcuts. One caveat: if you need complex text elements, such as tables, you should stick to HTML. Fortunately, Markdown fully supports HTML, so you can code a table in HTML and then switch back to Markdown in the same document.

Furthermore, raw Markdown is much easier to read than raw HTML. This is one of the reasons Markdown was created in the first place.

### It Converts to HTML Easily:

If you're going to write HTML, you should just write HTML. However, if you're writing an email or a readme file and need HTML's formatting options but not all its features, Markdown is ideal.

Markdown seamlessly converts to HTML, saving you the time and effort of opening and closing all those tags.

In fact, Markdown includes software to convert plain text to HTML! So, in addition to being a markup language, Markdown is also a text-to-HTML conversion software.

Furthermore, have you ever attempted to convert a.docx file to HTML? It's often not worth the effort because you get so much extra formatting and spacing.

### Markdown is Futureproof:

Markdown is a plain text format that is "futureproof." Markdown will be usable and openable by modern programsfor as long as plain text is the standard (which it will be for a very long time). In comparison, Microsoft Word has eight different filetypes as of 2018. Keeping things in plain text ensures that there will never be an outdated version, which means that software will not need to be updated to keep up with the format.

Markdown has its own file extension: .md, but it was designed to be perfectly readable as a raw text file. So, it's safe to say that Markdown is not going away anytime soon.

### It is used Everywhere:

You might think that as the rich text becomes more popular, Markdown's use has stopped growing, but that is not the case. Markdown's popularity has grown steadily since its beginning, and it is likely to continue to do so.

On popular coding sites like GitHub, Markdown is the unofficial standard. It is also the default format for popular communication tools like Skype, Slack, and (to a lesser extent) Facebook Messenger. Wikipedia even employs a modified Markdown syntax known as wikitext.

In an increasingly social world of coding, the programmer who does not understand Markdown will be at a disadvantage (or, at the very least, confused for a little while).

So, if nothing else, learn Markdown so you can keep up with the industry.

## The Markdown Syntax - A Quick Primer

These are the elements that were outlined in John Gruber's original design document. These elements are supported by all Markdown applications.

ElementMarkdown Syntax
## H2
### H3
Bold**bold text**
Italic*italicized text*
Blockquote> blockquote
Ordered List
• First item
• Second item
• Third item
Unordered List- First item
- Second item
- Third item
CodeCode
Horizontal Rule---
Image![alt text](image.jpg)

## Markdown in Practice

We will use VSCode Editor in this tutorial to see how to use markdown and preview it side-by-side. I am assuming that you have VSCode Editor installed on your system.

Step 1: Install the extension “Markdown Preview Enhanced” on the VSCode Editor.

Step 2:  Create a file with .md extension under the folder of your choice.

Step 3: Now turn on the preview mode using Ctrl+K V;, you will get a split- screen for the code and preview mode.

## Best Practices & Tips:

Markdown allows you to write anything you want once and convert it to almost any format you want to use. The examples below demonstrate how to convert simple text written in MD into various formats. You don't need multiple text formats—you can start with a single source.

Markdown was created with the explicit goal of being human-readable. The majority of the syntax should be fairly simple and intuitive.

Now, we will take a look at the different formats in the markdown:

In your .md file write the following code to see the preview.

You will see preview as:

In Markdown, headings are any lines that begin with a # symbol. The number of hashes indicates the heading's level. One hash is converted to a h1, two hashes are converted to h2, and so on. There are a total of six levels available to you, but for most writing, you'll rarely need more than three.

To add a link, enclose the text to be linked in square brackets, followed by the URL to be linked in parenthesis. Consider it like turning a word into a button to help you remember it. [button] and (where to go when the button is clicked) work together to form a link.

Markdown images have the same formatting as links, but they're preceded by an !. This time, the text in brackets is the alt text - or the image's descriptive text.

Let’s see some more formats and check their preview to be more comfortable with markdown.

**For Code Base**
Turn on Preview mode using Ctrl+K V. 
javascript
var name = "Ishan";
console.log(name)


**For Tables**

|Table |Goes |Here |
|--- |--- |--- |
|one |two |three |

**Ordered & Unordered Lists**
1. List One
2. List Two
3. List Three
1.List Four
- List Five 

You will see the preview as:

If you're a technical writer, you might want to use code snippets to teach your readers a specific syntax (as I'm doing with this blog post). A quick code snippet can be displayed by placing a single backtick around a word in a sentence.

Lists are a formatting nightmare in HTML, but Markdown lists are a breeze. we can simply prefix each statement like with a * - or - or + to convert them to dots for a bullet list. You can also make nested lists; simply indent a line with four spaces and it will be nested beneath the line above.

Why learn Markdown?

Once you've mastered Markdown, it's an incredibly powerful writing tool that will allow you to create rich web content much faster than almost any other method. However, there is a learning curve involved in getting to that point. We think that we have put togretheran all-inclusive guide to shorten that learning curve and possibly taughtyou a few useful Markdown tricks you might not have known. Markdown is an effective tool, and it will stay relevant in the time to come.

### Abhresh Sugandhi

Author

Abhresh is specialized as a corporate trainer, He has a decade of experience in technical training blended with virtual webinars and instructor-led session created courses, tutorials, and articles for organizations. He is also the founder of Nikasio.com, which offers multiple services in technical training, project consulting, content development, etc.

## Angular: Add service to module Code Example

4975
Angular: Add service to module Code Example

What are services in an Angular app?Services is ... Read More

## Create GraphQL API with example

Recently, GraphQL has made a lot of buzz among the developer community, and it has been receiving a lot of attention because of its dynamic nature along with its capability to fetch data, which is a lot less redundant. In this Code Tutorial, you will get to learn about what GraphQL really is, why has it created such hype amongst new-age developers, how is it different from the REST approach, and finally you will be building our own API with GraphQL along with Code Tutorials. Let’s get started!What is GraphQL? A quick primerBefore understanding what GraphQL is, let’s first understand what Query Languages are. Query Languages are computer languages that request the data from a database (called queries) to a client-side application through a server. A well-known example is Structured Query Language or SQL.Coming to GraphQL, by definition - “GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data” (source: Wikipedia). Simply put, GraphQL is a new age Query Language developed by Facebook in 2012 that helps Application Programming Interfaces (APIs) fetch only that data which is requested by the client, and nothing else. This enormously reduces the redundant data at the API endpoint and making the requests blazing fast and developer friendly.Initially, GraphQL was an internal project of Facebook and it was created for fetching specific data and reducing network usage. In 2015, it was released publicly at the React.js conference and reference implementations and specifications of GraphQL in JavaScript were open-sourced. Later most of the programming languages adopted that. New languages like Python, Node.js, Java, C#, PHP, GO, and many more, support GraphQL.But wasn’t the same thing already being done by RESTful APIs? The answer is yes, but GraphQL is different than REST in a lot of ways.GraphQL is Client-Driven, whereas REST is Server-Driven.Queries are organized in terms of Schema and strict typecasting in GraphQL, whereas REST has Endpoints for that task.GraphQL calls Specific data with a single call. REST calls Fixed data with multiple calls.Instead of the GET, POST, PUT, DELETE operations in REST, GraphQL has Query, Mutation, and Subscription for data manipulation.Some of the other advantages of using GraphQL are:GraphQL is faster than other communication APIs.GraphQL can retreat multiple resources and results with a single request.It is easy to use complex systems and microservices with GraphQL as it unifies and hides their complexity.It offers multiple libraries and powerful tools for various projects such as GraphiQL, GraphQL Explorer, Apollo.No under and over data fetching. It fetches the amount of data that is required.The core building block of GraphQL is its schema which is used as a middle way between server and client while defining the accessibility of the data.  A GraphQL schema is written in Schema Definition Language (SDL) and refers to the exact mutations and queries that a client can execute against your data graph. It can be built with any programming language. Simply, the schema defines the type of data that can be fetched, the relationships between these types of data, and what type of queries are allowed. The most basic components of a GraphQL schema are object types. They represent a kind of object you can fetch from your service along with the fields it has. Further, schema helps the client validate their query and eliminate unavailable data or the wrong structure stage.The other two fundamental parts of GraphQL are Query and Resolver. The request to fetch a particular data is called a query and a resolver is used to tell the server from where and how to fetch the data corresponding to the given field. You can execute the GraphQL queries either by Command line or by using a GraphQL server.GraphQL works in three parts – a query to read data, a mutation to write data, and a subscription to receive real-time data over time.Now that you know the ‘What’ and ‘Where’of GraphQL, let’s dive straight into our favorite part, the development phase.Let’s Play with GraphQLTo get started with GraphQL, you need a server that serves your API and a client that connects to your service endpoints. In this section, you will learn about a step-by-step procedure of building an API using GraphQL and Express on top of Node.js. In the next section, you will be implementing these prerequisites into code and start our development for the API.Prerequisites:Understanding of GraphQLNode Package Manager (or NPM) with version 10+Knowledge of basic querying and server-side programming.We will be needing a database to store the user data and everything else that a client-side application can request for. For this, you will be using LowDB, which is a simple file based JSON database for small projects in the localhost. Then you will be needing middleware to connect our database system to the requesting frontend application. For this, you will be using the Express middleware with the GraphQL implementation of Express - the Graphql-express library. Finally, you will be making a client-side application using react which can request all the data from the local database and can perform operations on the database like read, write, and delete.So, our roadmap is simple and straightforward. Create a Database Schema > Use a middleware server to query the database > Create a frontend application to use the data. If this is too much at once for you, do not worry as this is article is being written keeping in mind that the reader is a first-timer for GraphQL and basic querying as usual. Now, let’s dive into the code.Setting up Express GraphQLLet’s begin with the basic project structure of a Node.js application. Begin a new project in a new folder.$mkdir graphql-example$ cd graphql-exampleUse NPM to intiialize a project$npm init -yInstall the required dependencies for Express, MongoDB (Mongoose), and some additional dependencies required for the function of Express.$ npm install express mongoose body-parser cors --saveApollo Server is a community-maintained open-source GraphQL server that works with all Node.js HTTP server frameworks, so next, you are going to download and save that.$npm install apollo-server-express --saveThis should’ve created a package.json and a package-lock.json file within your folder. These files contain information regarding our environment, the dependencies, and the specific versions to run those dependencies.This means our environment is ready and you can now start developing the integrated server and API. We are going to write the Schema inside the index.js file. In the index.js file, start off by writing this code.const express = require('express'); const mongoose = require('mongoose'); const schema = require('./schema'); const bodyParser = require('body-parser'); const cors = require('cors'); const { ApolloServer } = require('apollo-server-express'); const url = "mongodb://localhost:27017/moviesdb"; const connect = mongoose.connect(url, { useNewUrlParser: true }); connect.then((db) => { console.log('Connected correctly to server!'); }, (err) => { console.log(err); }); const server = new ApolloServer({ typeDefs: schema.typeDefs, resolvers: schema.resolvers }); const app = express(); app.use(bodyParser.json()); app.use('*', cors()); server.applyMiddleware({ app }); app.listen({ port: 4000 }, () => console.log(Server ready at http://localhost:4000${server.graphqlPath}));In lines number 1 to 6, you’re implementing the necessary modules. Note that here you have imported the ./schema, but you haven’t created that yet. We will be doing this in the next step.In lines number 9 to 14, you are connecting the project to the MongoDB database and logging any error you face to the console.In lines number 16 to 19, you’re creating a new Apollo Server with typeDefs and Resolver. We’ll be defining those in the ./schema later in this tutorial.In lines 21 to 26, you’re firing up the Express Server at port 4000, when you will actually be able to interact with what you’re building.GraphQL has two main principles to work: types and resolvers. We defined them in Apollo Server. We’ll import them from the file you’ll create later.Next, let’s create the file models/movie.js that’ll contain the movie-Mongoose model.const mongoose = require('mongoose'); const Schema = mongoose.Schema; const movieSchema = new Schema({     name: {        type: String,        required: true     },     rating: {        type: Number,        required: true     },     producer: {        type: String,        required: true    } }, {     timestamps: true }); var Movies = mongoose.model('Movie', movieSchema); module.exports = {Movies, movieSchema};We’re going to build a simple movie app, where you can show, add, edit, and delete movies. That way you’ll get through the basics of GraphQL, which is the main goal of this tutorial.In lines 4 to 19, you’re basically determining the schema of the database that is going to hold the data of movies. Every movie is going to have a Name and a Producer of type String and a Rating of type Number.Designing the SchemaLet’s move on to the schema.js file where you’re going to build our GraphQL API.Create a new file in the root of the folder by the name of schema.js and add the following code.const { gql } = require('apollo-server-express');   const Movie = require('./models/movie').Movies;   const typeDefs = gql     type Movie {      id: ID!      name: String!      producer: String!      rating: Float!  }  type Query {    getMovies: [Movie]    getMovie(id: ID!): Movie  }  type Mutation {      addMovie(name: String!, producer: String!, rating: Float!): Movie      updateMovie(id: ID!, name: String!, producer: String!, rating: Float): Movie      deleteMovie(id: ID!): Movie    } In this, you’re building the schema. We defined the Movie type which will have an ID, the name of the movie and the producer, and a rating of type Float. The “!” after the types shows that these fields are necessary.Unlike the REST approach of getting different tasks done at different endpoint URLs, GraphQL can create operations in a single endpoint. That is what you have done in line 11 onwards. The type Query determines the GET operations, and type Mutation determines the modification operations like POST, DELETE, etc. In getMovies, you’re returning a list of all available movies in our database, and in getMovie, you’re getting the specific movie by the ID of that movie.Now you’re going to link these with the Mongoose Database queries that are going to perform the actions in the database. And this is done by Resolvers. Resolvers are a collection of functions that connect schema fields and types to various backends. It can read, write, and delete data from and to anywhere in the database, be it SQL, NoSQL, or Graph-based database. In simple terms, they act as a GraphQL query handler. Here’s how you’re going to implement Resolvers in our code:const resolvers = {   Query: {     getMovies: (parent, args) => {       return Movie.find({});     },     getMovie: (parent, args) => {       return Movie.findById(args.id);     }   },   Mutation: {     addMovie: (parent, args) => {       let movie = new Movie({         name: args.name,         producer: args.producer,         rating: args.rating,       });       return movie.save();     },     updateMovie: (parent, args) => {       if (!args.id) return;         return Movie.findOneAndUpdate(          {            _id: args.id          },          {            $set: { name: args.name, producer: args.producer, rating: args.rating, } }, {new: true}, (err, Movie) => { if (err) { console.log('Something went wrong when updating the movie'); } else { continue; } } ); } } } module.exports = {typeDefs,resolvers};This is the basic logic of MongoDB and CRUD applications, which doesn’t come under the scope of this article, since it is majorly focused on GraphQL. However, the logic is simple and straightforward for anyone to understand, so skim through it once.With this, you’re done with a basic Movie API that can perform all the CRUD operations on a database of movies. To test this out, you’re going to fire up our node server and open the browser in http://localhost:4000/graphql which will open the GraphQL Playground.$ node index.js Server ready at http://localhost:4000/graphqlOnce the Playground UI opens, you’re first going to create a Movie Record for the database since it would initially be empty.mutation { addMovie(name: “GraphQL Movie”, producer: “Facebook”, rating:  4.5) { id, name, rating, producer } }OUTPUT:{ “data” : { “addMovie”: { “id”: “5j2j1lnk1LNS231MLK3”, “name”: “GraphQL Movie”, “producer”: “Facebook”, “rating”: 4.5 } } }And now let’s list out all the movies in the database with only their “name” and “rating”.query { getMovies: { name, rating } }OUTPUT:{ “Data”: { “getMovies”: [ { “name”: “GraphQL Movie”, “rating”: 4.5 } ] } }So, you have successfully created a Movie API where you can perform all the CRUD operations on a single endpoint, and also ask for just the data that you want.  This results in a blazing fast API response and a developer-friendly return object that makes development fast and easy.Using GraphQL with ReactUsing GraphQL with react is super easy and can make full-stack development look like a piece of cake. We’re going to build a react app that uses the Movie API you just built to render the results on a frontend client app.Start off by installing the required dependencies.\$ npm install create-react-app graphql @apollo/clientCreate a new React appnpx create-react-app movies-appLet’s start off by initializing an ApolloClient instance. In index.js let's first import the symbols you need from @apollo/client, Next, you'll initialize ApolloClient, passing its constructor a configuration object with URI and cache fields:import {   ApolloClient,   InMemoryCache,   ApolloProvider,   useQuery,   gql } from "@apollo/client"; const client = new ApolloClient({   uri: 'https://48p1r2roz4.sse.codesandbox.io',   cache: new InMemoryCache() });The URI specifies the GraphQL Server URL.That’s it! Our client app is ready to fetch data from the GraphQL server. In index.js, let’s wrap our React app with the ApolloProvider Component. Put up the ApolloProvider somewhere high in the app, above any component that might need to access GraphQL data.function App() {   return (           My first GraphQL app       ); } render(         ,   document.getElementById('root'), );With this being done, our client app is now ready to request data from the server and perform queries on the frontend. We can do this using the useQuery React Hook that shares the GraphQL data with the UI.In the index.js, let’s first define the query you want to execute.const MOVIES = gql   query getMovies {      name,      producer   } ;Next, let's define a component called GetMovies that executes our getMovies query with the useQuery hook:function GetMovies() {   const { loading, error, data } = useQuery(MOVIES);   if (loading) return Loading...;   if (error) return Error :(;   return data.map(({ name, producer }) => (                   {name}: Produced by {producer}             )); }Whenever this component renders, the useQuery hook automatically executes our query and binds the results to the data property on successful completion of the query.Finally, you'll add GetMovies to our existing component tree:function App() {   return (           My first Apollo app             ); }When your app reloads, you should briefly see a loading indicator, followed by a list of Movies present in the MongoDB database.Congratulations. You just made a React app that uses GraphQL to render data from the server. Give yourself a pat on the back for this one.Dev-friendly Query Languages are the FutureSo, wrapping it all up in a few more lines. In this tutorial, you learned what GraphQL is - a new age Query Language that is data specific and client-oriented, how is it different (and better) than REST architecture - it is developer friendly, blazing-fast, and easy to learn or understand. We also made a mock API of Movies using GraphQL and MongoDB and performed the CRUD operations using just one single endpoint URL - another benefit over the RESTful architecture. And finally, you went on to create a React application that uses these benefits of GraphQL and combines them with the benefits of React to give a hyper-fast, easy, and full-stack app that renders Movies on request.We hope you learned something new from this article. Once you’ve started this journey of GraphQL, it is a fun ride ahead since it is a relatively new tech and not many people out there are having this skill under their hood. So, make use of this opportunity and outshine the rest.Keep Learning.
4805
Create GraphQL API with example

Recently, GraphQL has made a lot of buzz among the... Read More

## How to use Timers in Node.js

2239
How to use Timers in Node.js

You can use Node.js's utilities to schedule the ex... Read More