GraphQL is a query language and runtime for APIs. It was developed by Facebook in 2012 and publicly released in 2015 as an open-source project. GraphQL is designed to be a more efficient, powerful, and flexible alternative to traditional REST APIs.<\/p>\n
GraphQL allows clients to specify exactly what data they need and the server returns that data in a response. This eliminates the problem of overfetching, where the client gets more data than they need, and underfetching, where the client has to make multiple requests to get all the data they need.<\/p>\n
In this tutorial, we’ll cover the basics of GraphQL, including its syntax, types, resolvers, and execution model.<\/p>\n
GraphQL uses a syntax that is similar to JSON. The basic structure of a GraphQL query is a set of fields with arguments.<\/p>\n
query {\n field1(arg1: \"value\") {\n subfield1\n subfield2\n }\n field2 {\n subfield1\n subfield2\n }\n}\n<\/code><\/pre>\nIn this example, we have a query with two fields: field1<\/code> and field2<\/code>. field1<\/code> takes an argument arg1<\/code> with the value \"value\"<\/code>. Each field has two subfields: subfield1<\/code> and subfield2<\/code>.<\/p>\nTypes<\/h2>\n
GraphQL has a type system that defines the shape of the data that can be queried. Types can be scalars (like Strings and Integers) or objects (like Users and Posts).<\/p>\n
type User {\n id: ID!\n name: String!\n email: String!\n posts: [Post]!\n}\n\ntype Post {\n id: ID!\n title: String!\n body: String!\n author: User!\n}\n<\/code><\/pre>\nIn this example, we have two types: User<\/code> and Post<\/code>. Each type has fields with specific types. The User<\/code> type has fields id<\/code>, name<\/code>, email<\/code>, and posts<\/code>. The id<\/code> field is of type ID!<\/code>, which means it’s a non-null ID. The name<\/code> and email<\/code> fields are of type String!<\/code>, which means they are non-null Strings. The posts<\/code> field is of type [Post]!<\/code>, which means it’s a non-null list of Post<\/code> objects.<\/p>\nThe Post<\/code> type has fields id<\/code>, title<\/code>, body<\/code>, and author<\/code>. The id<\/code> field is of type ID!<\/code>, the title<\/code> and body<\/code> fields are of type String!<\/code>, and the author<\/code> field is of type User!<\/code>.<\/p>\nResolvers<\/h2>\n
Resolvers are functions that resolve a GraphQL query. Each field in a GraphQL query has a resolver that knows how to fetch the data for that field.<\/p>\n
const resolvers = {\n Query: {\n user: (_, { id }) => {\n return getUser(id);\n },\n post: (_, { id }) => {\n return getPost(id);\n },\n },\n User: {\n posts: (user) => {\n return getPostsByUser(user.id);\n },\n },\n Post: {\n author: (post) => {\n return getUser(post.authorId);\n },\n },\n};\n<\/code><\/pre>\nIn this example, we have three resolvers: user<\/code>, post<\/code>, and User.posts<\/code>. The Query<\/code> resolver object contains the top-level queries, user<\/code> and post<\/code>. The User<\/code> resolver object contains the field posts<\/code>, and the Post<\/code> resolver object contains the field author<\/code>.<\/p>\nThe user<\/code> resolver takes an argument id<\/code> and returns the user with that ID. The post<\/code> resolver takes an argument id<\/code> and returns the post with that ID. The User.posts<\/code> resolver takes a user object and returns all the posts written by that user. The Post.author<\/code> resolver takes a post object and returns the user who wrote that post.<\/p>\nExecution<\/h2>\n
When a GraphQL query is executed, it goes through several phases: parsing, validation, execution, and response formatting.<\/p>\n
const { graphql } = require(\"graphql\");\nconst schema = require(\".\/schema\");\nconst resolvers = require(\".\/resolvers\");\n\nconst query = `\n query {\n user(id: \"1\") {\n name\n email\n posts {\n title\n }\n }\n }\n`;\n\ngraphql(schema, query, resolvers).then((result) => {\n console.log(result);\n});\n<\/code><\/pre>\n