Gatsby Js and Graphql

In a Nutshell

Static is fast.

Static now scales.

Gatsby is an open-source static website generator (SSG) that is based on the frontend development framework React and makes use of Webpack and GraphQL technology. It can be used to build static sites that are progressive web apps, follow the latest web standards, and fine-tuned for speed and security.

Ready to dive in?

Set up your environment with three CLI commands

New to Gatsby?

Learn the basics by building a simple site

Nitty-gritty descriptions on how Gatsby works.

Gatsby uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box. I didn’t believe the speed until I tried it myself.

You code and develop your site, Gatsby transforms it into a directory with a single HTML file and your static assets. This folder is uploaded to your favorite hosting provider, and voila.

Gatsby folder structure

/
|-- /.cache
|-- /public
|-- /src
    |-- /api
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

* detail explaination to be given while presenting

A brief intro to CSS/SCSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (url(...)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).

Using Css/Scss modules on our app.

When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names. By using css/scss modules can help us in creating unique class names so that we don't have to end up messing around with class names.

                                                            
  • import styles from "./style.css";
    • 
                                                        
  • // import { className } from "./style.css";
    • 
                                                        
  • element.innerHTML ='<div class="'+styles.className+'">';
    •

Graphql - A data query language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL is a query language that was created by Facebook in 2012 for building web and mobile apps. It has become the new standard for front-end development because of its advantages over REST, which was previously the most popular API architecture. GraphQL also helps developers get started quickly with their projects without having to write complex data fetching code or build multiple endpoints, which saves time and money! This blog post will explore why GraphQL is taking over as the future of front-end development.

Benefits of Graphql over Rest APIs

REST is not a silver bullet

RESTful APIs are not a silver bullet for all types of applications. REST is an architectural style that provides highly decoupled systems. The indirection allows teams to work independently on different pieces without worrying about the implications on other parts of the application. There is also no standardization around RESTful APIs and there was room for further improvements in terms of:

  • - Data overload -With so many devices connected at any given time it’s hard for clients to keep up with retrieving every bit of information they need from multiple sources.
  • - Data overload -With so many devices connected at any given time it’s hard for clients to keep up with retrieving every bit of information they need from multiple sources.
  • - Latency issue -Since data has to be retrieved separately from several endpoints, this also means more waiting time for the user to see new content on their screen
  • - Difficult API testing -With so many endpoints, it’s harder to test APIs since they are isolated from one another. This raised a need for an improved solution that would allow clients and servers to reduce latency by reducing round trips between each other while also allowing them both to specify exactly what data is needed in the response

GraphQL - a new player in the API Game

GraphQL was created as a better alternative with several benefits & quickly became a major player in the API space, allowing developers to build efficient applications without over-fetching or under-fetching data while also giving them more control over how they structure their queries. GraphQL provides many exciting features such as strongly typed schema with the introspection of types, concise syntax (nested objects are serialized into one single graph) and abstracted away from backend infrastructure:

  • - Language Agnostic - With so many devices connected at any given time it’s hard for clients to keep up with retrieving every bit of information they need from multiple sources.
  • - Data Fetching Control -With so many devices connected at any given time it’s hard for clients to keep up with retrieving every bit of information they need from multiple sources.
  • - Strongly Typed Schema -Since data has to be retrieved separately from several endpoints, this also means more waiting time for the user to see new content on their screen

The future is here

GraphQL is a solution to the problems of REST, and can be used with any programming language. If you're looking for a way to build your next application in a scalable manner that will work well with all types of devices and networks, then learn about how graphql works today!

Conclusion

That's all folks.
Here is the link to the Graphql Official Website Graphql Website

For any other queries please feel free to reach out to me anytime.

Have a great day. Happy Coding!!