Recently, I started exploring GraphQL while working on my MERN stack project. I learnt this through some youtube videos and some
other sources.
https://graphql.org/
What is GraphQL
- GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.It is created by Facebook and released public in 2015
- 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.
- It's like REST, but you only ask for the data you need.
Ask for what you need,get exactly that
- GraphQL queries access not just the properties of one resource but also smoothly follow references between them.
- While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request.
- Apps using GraphQL can be quick even on slow mobile network connections.
- Add new fields and types to your GraphQL API without impacting existing queries.
Lets Explore some Core concepts
1.Schema : It is a Blueprint of your GraphQL Api.
2.Queries : used to fetch Data.
3.Mutations : Used to modify data (Create, Update, Delete).
4.Resolvers : Functions that handle the logic for queries/mutations.
5.Types : Scalar: String, Int, Boolean, ID, Float
Object: Custom data types like Book, User, etc.
Input: Used for sending objects in mutations.
Lets see the setup for the GraphQL through VScode.
1.buildSchema(...): Defines a GraphQL schema using a special string format.
2.type Query: Every GraphQL schema must have a Query type — it’s the entry point for read operations.
3.hello: String: You define a field called hello that returns a string.
4.Line 14 is your resolver function.It maps to the field defined in your schema (hello).
5.When the client runs { hello }, this function runs and returns 'Hello Naresh IT!'.
6.Here comes the actual GraphQl Middleware
app.use('/graphql', ...): Connects the GraphQL middleware to the /graphql route.
schema: It Passes the schema you defined.
rootValue: The resolver functions.
graphiql: true: Enables the GraphiQL UI, a browser IDE where you can test your GraphQL queries.
Now Based on above Code to Run This Query open browser and run
{
hello
}
you'll get
{
"data":{
"hello":"Hello Naresh IT!"
}
}
So, in short GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.I hope this makes your concept clear and understandable.
Official Website : https://graphql.org/
How to use Playground : https://graphqlzero.almansi.me/
GraphQL Playground: https://graphqlzero.almansi.me/api
See you later with more intresting topics 👋
Top comments (0)