A Guide to GraphQL Schema and Data Types
In this lesson, we introduce and discuss some of GraphQL's main concepts such as the GraphQL schema, object types and resolver functions.
GraphQL Concepts#
📝 This lesson's quiz can be found - here.
🗒️ Solutions for this lesson's quiz can be found - here.
📖 This lesson's lecture slides can be found - here.
Now that we've seen the advantages of using GraphQL in a real-world example, let's dive into some core concepts. After interacting with Github's GraphQL API in the previous lesson, we know that the GraphQL query language allows us to select properties on certain object types.
For example, assume we could query the title
and price
fields on a listing
object type that we can create.
{
listing {
title
price
}
}
This will return data that looks something like the following:
{
"data": {
"listing": {
"title": "Chic condo...",
"price": 50
}
}
}
How do we know that the listing
object has a title
or a price
property? Does the listing
object have more properties we can select? This is where the GraphQL Schema comes in.
Every GraphQL API has a schema which completely describes all the possible data we can request. The schema is the blueprint of a GraphQL API. When a request comes in, it is validated against this schema and processed accordingly.
How do fields in the schema get processed? That's due to the second piece of a GraphQL API - the resolvers. GraphQL resolvers are functions that turn a GraphQL operation or request into data.
We'll first talk about the GraphQL schema before we dive into discussing GraphQL resolvers.
Object types#
As quoted from the GraphQL documentation, the most basic component of a GraphQL schema are the object types which represent the kind of object we can query and what properties that object has. For the example above, we could have had an object type like the following:
type Listing {
id: ID!
title: String!
address: String!
price: Int!
}
The above states that:
We're creating an object type called
Listing
.The
Listing
object has a property calledid
which is a GraphQLID
.The
Listing
object has a property calledtitle
which is a GraphQLString
.The
Listing
object has a property calledaddress
which is a GraphQLString
.The
Listing
object has a property calledprice
which is a GraphQLInt
.
The definitions at the end of these fields refer to the type that is to be returned from the field. (e.g. title
is expected to return a string
).
The syntax we're looking at here is known as the Graphql Schema Language with which we're going to talk about some more as we start to introduce GraphQL into our Node application.
A GraphQL schema allows us to develop relationships between different object types. For example, we can say the Listing
object type can have a tenant
field in which tenant
is to be an object type of its own (e.g the User
object type).
type Listing {
"..."
tenant: User!
}
The User
object type can have a similar but inverse relationship of its own where it can contain a listing
field of the Listing
object type.
type User {
"..."
listing: Listing!
}
These are one-to-one relationships where a listing can return a particular user and a user can return a certain listing. We could also have one-to-many relationships where we can say, for example, the User
object type has a listings
field that returns a list of listings.
type User {
"..."
listings: [Listing!]!
}
In the GraphQL Schema Language, we can define a GraphQL list by using the square brackets syntax. In this case, we're stating the
listings
field is to return a list ofListing
objects -[Listing!]!
.The
!
syntax is to tell our schema that the fields are marked as non-null (i.e. the field is required to be of a certain type and nevernull
).We discuss more about lists and the non-null marker at the end of this lesson and in a lot more detail in the upcoming lessons.
That are two special object types within a GraphQL schema called Query
and Mutation
. Every GraphQL schema must have a Query
type and may or may not have a Mutation
type.
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL